WhatsApp Group
20% OFF - Join Now!
Join Now
How to Customize Your Blog Author Box for a Professional Look
Today, you’ll learn how to customize your blog’s author box using a few lines of coding and CSS. After applying this, your author box will appear professional, similar to the one seen on Anushop.in.
GeneratePress Author Box CSS Code
/* Anushop Author Box Styling */
.anushop-author-box {
padding: 3%;
padding-bottom: 10px;
margin-top: 30px;
font-size: 0.9em;
background-color: #fff;
display: flex;
align-items: center;
box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
border-radius: 25px;
}
.anushop-author-box .insights-avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
.anushop-author-box .insights-avatar img {
border-radius: 100%;
}
.author-title {
margin-bottom: 0.1em;
font-weight: bold;
font-size: 18px;
}
.author-description {
line-height: 1.6em;
font-size: 16px;
}
.author-links a {
margin-top: -2em;
font-size: 14px;
line-height: 2em;
font-weight: bold;
color: #26BC00;
float: left;
}
/* Responsive Design for Mobile Screens */
@media (max-width: 768px) {
.anushop-author-box {
padding: 20px;
padding-bottom: 25px;
margin-top: 60px;
margin-bottom: 60px;
flex-direction: column;
text-align: center;
}
.anushop-author-box .insights-avatar {
margin-right: 0;
width: 100%;
margin-top: -60px;
}
.anushop-author-box .insights-avatar img {
max-width: 100px;
}
.author-links a {
float: none;
align-self: center;
}
.author-description {
margin-bottom: -0.1em;
}
}
/* End of Anushop Author Box */
GeneratePress Author Box PHP Script
Add the following code to your theme’s functions.php
file or use a custom code editor plugin to avoid modifying the core theme files directly:
<div class="anushop-author-box">
<div class="insights-avatar">
<?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
</div>
<div class="insights-author-info">
<div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
<span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
</div>
<div class="author-summary">
<p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
</div>
<div class="author-links">
<a href="https://anushop.in/about-us-2/?swcfpc=1" title="Read more about this author">Read More</a>
</div>
</div>
</div>
Video Tutorial
To help you implement this, you can follow a step-by-step video tutorial. This video will guide you through adding the CSS and PHP code to your GeneratePress theme for a professional, sleek-looking author box.