How to add Author Box in WordPress Posts

Every blog posts have an Author and many good blog sites have different authors who write on different topics. The standard WordPress blog post has Author’s name and avatars displayed at the end of the contents. Readers may want to know more about you than just the contents you write on your blog. Once they finish reading your article, they also want to know the author of the article and search for more articles written by that person. Also, most readers want to connect with the authors of the article, they just read and adore. So, to get more subscribers, you may want to add your social profile links at the end of the post. Adding an author box in your blogs enhance your visitors to discover more information about the author on the very same page. Adding an author box after the blog post is very simple. There are few plugins, which let you add cool author box within a few minutes. But in this article, I am going show how to add author box in WordPress posts with few lines of code without using any plugins.

How to add Author Box in WordPress Posts

Step 1. Editing User Profile

Before adding custom box, make sure you have added author details and gravatar from backendLogin to your Dashboard. Go to Users > Your Profile

How to add Author Box in WordPress Posts

You’ll see a section Biographic info. Add short and simple details about you.

How to add Author Box in WordPress Posts Note: Profile picture is generated by Gravatar, you may want to associate your email address with Gravatar

Add your website link in Website like authors portfolio, blog, etc.

Step 2. Add Custom Code

Now, in order to display Author Box in WordPress posts just copy and paste the following codes in functions.php and style.css files. Add the following code in your current theme’s PHP file.

function custom_author_info_box($content) {
    global $post;
    if (is_single() && isset($post - > post_author)) {
        $author_name = get_the_author_meta(‘display_name’, $post - > post_author);
        if (empty($display_name))
            $author_name = get_the_author_meta(‘nickname’, $post - > post_author);
        $author_description = get_the_author_meta(‘user_description’, $post - > post_author);
        $author_website = get_the_author_meta(‘url’, $post - > post_author);
        $author_posts = get_author_posts_url(get_the_author_meta(‘ID’, $post - > post_author));
        if (!empty($display_name))
            $author_details = ‘ < p class = ”author_name” > About‘.$display_name.‘ < /p>’;
        if (!empty($author_description))
            $author_details. = ‘ < p class = ”author_details_info” > ’.get_avatar(get_the_author_meta(‘user_email’), 90).nl2br($author_description).‘ < /p>’;
        $author_details. = ‘ < p class = ”author_post_links” > < a href = ”‘.$author_posts. '”>View all Posts by ‘ . $author_name . ‘’;
        if (!empty($author_website)) {
            $author_details. = ‘ | < a href = ”‘.$author_website. '” target=”_blank” rel=”nofollow”>Website</a></p>’;
        } else {
            $author_details. = ‘ < /p>’;
        }
        $content = $content.‘ < footer class = ”author_bio” > ’.$author_details.‘ < /footer>’;
    }
    return $content;
}
add_action(‘the_content’, ‘custom_author_info_box’);
remove_filter(‘pre_user_description’, ‘wp_filter_kses’);

Now open your theme’s CSS file and add the following code.

.author_bio {
 background: none repeat scroll 0 0 #F5F5F5;
 padding: 15px;
 border: 1px solid #ccc;
}
.author_name {
 font-size: 16px;
 font-weight: bold;
}
.author_details_info img {
 border: 1px solid #D8D8D8;
 border-radius: 50%;
 float: left;
 margin: 0 10px 10px 0;
}

You may edit above styling with your custom CSS. Now, you have added your author details, website link, profile picture and the custom codes in the required files. You want to display your custom author box. View All Posts by Author name and your Site link.

Also Read:   Add watermark using Scissors and Watermark Plugin in WordPress

How to add Author Box in WordPress Posts

 In this way you can add author info to your WordPress posts with few codes without using plugins.

The following two tabs change content below.
Rupesh Karna

Rupesh Karna

Rupesh is a Web developer, freelancer and creative blog writer. Coding is his passion. He develops clean and elegant websites that client loves. He loves exploring the world when he doesn't feel like coding.

Share This Post