How to add an Author Box to your posts

My themes don’t have an author box by default.  There are plugin that will install Author boxes, but when a customer asked me about adding an author box I thought I’d take a few minutes to make a solution.. Here’s what outputs and you have complete control of design.

Dan is the creator of this theme

Here’s a way you can create it with some “socrates” flexibility.

Step 1.

Add this code to your functions.php (child theme) or in a code snippets plugin.

// Shortcode for displaying the author's name
function soc_author_name_shortcode() {
    $author_id = get_the_author_meta('ID');
    $author_posts_url = get_author_posts_url($author_id);
    $author_name = get_the_author();
    return '<a href="' . esc_url($author_posts_url) . '">' . esc_html($author_name) . '</a>';
add_shortcode('soc_author_name', 'soc_author_name_shortcode');

// Shortcode for displaying the author's description/bio
function soc_author_description_shortcode() {
    return get_the_author_meta('description');
add_shortcode('soc_author_description', 'soc_author_description_shortcode');

// Shortcode for displaying the author's Gravatar
function soc_gravatar_shortcode($atts) {
    $atts = shortcode_atts(array(
        'size' => '96', // Default size for the avatar
    ), $atts, 'soc_gravatar');

    return get_avatar(get_the_author_meta('ID'), $atts['size']);
add_shortcode('soc_gravatar', 'soc_gravatar_shortcode');

Step 2

Add this code to Additional CSS

.soc_author_box {border:1px #f4f4f4 solid;padding:10px;min-height:100px}
.soc_author {font-size:18px;font-weight:bold; margin-bottom:10px}
.soc_author_description {}

Step 3

Add this code to the Socrates Toolkit custom functions tab..   Custom Below Post Code  and it will appear on every post.  Or get creative and add this as another Code Snippet and you can make a shortcode to pop in wherever.

<div class="soc_author_box">
    <div style="float: right; margin-bottom: 10px;">
        [soc_gravatar size="80"]
    <div class="soc_author">[soc_author_name]</div>
     <div class="soc_description">[soc_author_description]</div>
Next Post

How to create a floating jumplink menu widget

Leave a Reply

Your email address will not be published. Required fields are marked *