Website Clone for ₹799 Request Now
Hostinger Hosting 10% OFF! Get Hosting

How to Customize GeneratePress Author Box 2025

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.


Leave a comment

Item added to cart.
0 items - $0.00