Add an author box to your posts, without a plugin

I always wondered why Headway doesn’t take advantage of the built in Gravatar function. It’s a great way to visually associate an author with a post and since WordPress supports it natively, it’s really easy to implement.

Author bio example

In this tutorial, I’m going to go through the steps to add your an author box to your posts, without the need for a plugin.

Since we’re wanting to output the authorbox on the single post, we’ll add the author box using the Content block on the the Pages > Single > Post layout.

Before you begin

Before we get stuck into the code for the author box, you’ll need to unzip the tutorial download and copy the three icons to your WordPress sites uploads folder.

/wp-content/uploads/

For this tutorial, I’ve only included icons for the authors website (link), Twitter and Facebook, but you could output any of the fields available on the edit user page in WordPress. You would need to modify the markup below, but it’s pretty straight forward, so you should be fine :)

First things first, let’s add the HTML

Since we’re wanting to output the author box on the single post, we’ll add the author box using the Content block on the the Pages > Single > Post layout.

The HTML

The snippet below is the HTML markup that we’re going to output below the blog article, via the Meta > Meta Below Content option in the Content block.

<div class="media author-box">

    <div class="media-figure">
        <?php echo get_avatar( get_the_author_meta('email'), '100' ); ?>
    </div>

    <div class="media-body">
        <h2><?php the_author_posts_link(); ?></h2>
        <p><?php the_author_meta('description'); ?></p>
        <div class="author-icons">
            <a href="<?php the_author_meta('user_url'); ?>" class="author-website">
                <img src="/wp-content/uploads/icon-link.png" alt="Website" />
            </a>
            <a href="<?php the_author_meta('twitter'); ?>" class="author-twitter">
                <img src="/wp-content/uploads/icon-twitter.png" alt="Twitter" />
            </a>
            <a href="<?php the_author_meta('facebook'); ?>" class="author-facebook">
                <img src="/wp-content/uploads/icon-facebook.png" alt="Facebook" />
            </a>
        </div>
    </div>

</div>

If we look at the above code, we can see we’re outputting the basic structure for the media object:

div class="media"
	div class="media-figure"
	div class="media-body"

Then inside the media-figure div, we’re outputting the authors Gravatar thumbnail. This is using the built in Gravatar function in WordPress and all it needs to function is an email address. I’ve also added the size argument to set the avatar to 110px by 110px.

Then in the media-body, we’re outputting the Author Posts Link, which outputs the authors full name, linked to an archive of all his/her posts. If you’d prefer to output the authors name without the link to their posts, you could replace %author% with %author_no_link%.

If you wanted to display the authors first name only, you could use .

After the authors name, we have the author description, which is pulled from the Biographical Info option on the profile edit page in WordPress.

After that come the icons for the authors website, Twitter and Facebook links. You might need to update the icon path, if you upload yours to a different location. The icons are from the Font-Awesome collection, in case you want to add more social accounts.

The CSS

Next we’re going to add some custom CSS to line up the authors thumbnail and bio. We’ll add the CSS via the Custom CSS option in Headways Visual Editor (in design mode).

To line up the author content with the avatar, we’re going to use a re-usable web component, called the Media Object. The code was copied directly from the Solved by Flexbox site.

/* Media Object */
.media {
display: flex;
align-items: flex-start;
}
.media-figure {
margin-right: 1em;
}
.media-body {
flex: 1;
}

Now that everything is structurally in place, we can go ahead and add another snippet of CSS to add some styling to the author box container.

/* Author Box Styles */
.author-box {
background: #f7f7f7;
padding: 20px;
border-radius: 2px;
}

Depending on how your Headway site is setup, the elements in the author box should be spaced out already, but if not, head over to the Visual Editor in Design mode, then adjust the headings, text and paragraphs.

Navigation

More

Company

AboutServicesBlog

Support

OverviewFaqsGuides