Adding an Author Info Box under each Post

It’s always nice to give the author a little credit for the work they put in to create the content for your blog. In this tutorial, we are going to add an author info/meta box under each post to display content about the author. We will make this author box only appear if the author filled in the description field in their WordPress profile.

I will also show you how to add custom text fields to the WordPress profile page so you can use them for things like social profile links within the author info box. After this tutorial your theme will have an author info box with:

  • author avatar
  • author name that is linked to their published posts
  • author description
  • social links that use Font Awesome

Steps

  1. Open the content-single.php page template
  2. Directly under the the_content tag add the following code:
  3. Save the file and view an individual post. You will notice that the author info box doesn’t show up. This is because the author of that post has not put any content into the “Biographical Info” textfield in the WordPress Dashboard under the Users section.
  4. Go into the WordPress Dashboard and then Users. Add content into the “Biographical Info” textfield for an author and click Save.
  5. Reload the front-end and view a post for whichever author you modified in the step before, you should now see the author info box.
  6. Lets add some CSS styles for the author info box. Open style.css and in the Posts and pages section add the following CSS:

    These styles will add some margin to the top of the author info box and make the author avatar a circle.
  7. The next step is to add the social profile fields. Add a new file to the /inc/ directory called author-meta.php that includes the following code:
  8. Open functions.php and at the very bottom add the following code:
  9. Now that we have our social profile fields in place, we need to edit the author meta markup to display the social profile links. Open content-single.php and modify the author meta markup to look like the following:

    Note: A very good suggestion was brought up about displaying the social URLs. You should always validate/escape user data when displaying it on your website. This will make sure you site is safe from malicious code. Notice the difference from the video code to the written code below. When we echo the social URLs the data is escaped.
  10. One of the last things we need to do is add some CSS to modify the social icons. Open style.css and in the Posts and pages section add the following code:
  11. If you go into the User profile from the WordPress dashboard you should now see the social profile fields. When adding the URLs be sure to include the complete URL (this includes the http://). Feel free to edit the function, markup, or CSS in this tutorial to fit your needs!

Notes from the Video

In this tutorial, I decided to use the Bootstrap well class to wrap the author meta box. You can find and read about this Bootstrap class here. We also used the media object Bootstrap classes in this tutorial to align the content within the author meta box, you can find those classes here.

The markup that I modified for this tutorial to display the author content can be found here. Last but not least, here is the blog post I found on how to add user profile fields in WordPress.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Customizing and adding features to the backend, now we’re talkin! This is definitely one of the most exciting tutorials. I appreciate the line by line – play by play, great coding resources exposed too. Bookmarking this one, thanks

  • Abu Jorhom

    I have definitely learnt something new today.

  • Code Ecstasy

    Data is not escaped properly in this tutorial. instead of “echo $fbHandle;” you should write “echo esc_url($fbHandle);”. Just a suggestion to use esc_attc, esc_url, esc_html, esc_js where needed. Because these are mandatory in wrodpress

    • Thank you for pointing this out! This slipped my mind while creating this tutorial. I will update the written section.

  • frede_z

    Hi Brad, I’m really getting a lot from the videos,BIG THANKS!
    In the video titled “Adding an Author Info Box under each Post”
    When I add the social link info into the users contact info in the dashboard their respective icons show up in the well next to the authors avatar. When I fill in the authors website info, I can’t see where it’s posting the website. Are the authors website supposed to show up somewhere in the well next to their avatar and social icon links?

    Looking forward to all the new tutorials !

  • John Prasetya

    thank you,
    this tutorial is useful to me.
    I found another tutorial create author box with bootstrap, may be a reference also please check http://seegatesite.com/create-wordpress-author-box-with-bootstrap-tutorial/

  • Kevin

    Hey Brad,

    I’m having difficulty getting the fa icons to be visible. I added the code as you outlined, and you can even find the links when the inspector, but they are invisible. What did I do wrong here?

    • Kevin

      Here is a screen cap

      • What version of Font Awesome are you using? Do you have any console errors? If you are still having issues please create a topic in the forum.

        • Kevin

          4.6.1 of font awesome and no console errors. I’ll go ahead and post to the forum. thanks