Add an ‘About the Author’ Box Below Your Posts in WordPress

Photo of Ashley
Posted by
Blogging, Coding
, , , ,

Hello, Ashley!

I have noticed that you have, and a bunch of bloggers, have a mini-bio at the end of the posts. I was wondering if that’s a plug in you’re using or if you have to edit your functions file (?) or css. I’d love to add it to my blog!

Thanks!

Beth

Hi Beth!

You definitely can do this with a plugin such as Starbox. However, I prefer to code it myself since it’s actually quite simple and putting it into my theme manually will add less bloat to my site than installing a dedicated plugin. Also, many plugins out there are just weighed down with bells, whistles, and 50 different styling options. Again, that just adds unnecessary bloat to the plugin.

If you’re not comfortable adding a bit of code to your theme, then I suggest the plugin method. But if you’re okay editing your theme, then give this tutorial a try!

I’m going to address two methods:

Editing your theme files

Open up your theme files and edit single.php. This is the theme template for your individual post page. Now it’s hard for me to tell you exactly where to place this code since every theme is different. But somewhere in the file you should see a line of code like this:

<?php the_content(); ?>

You want to paste the About the Author code somewhere after this. The the_content() function represents your post content.

Once you’ve found a good spot, simply enter this code:

<div class="about-the-author">
	<img src="IMAGE URL" alt="Photo of Ashley" class="alignleft" width="120" />
	<h6>About <?php echo get_the_author_meta('first_name'); ?></h6>
	<?php echo get_the_author_meta('description'); ?>
	<div class="clear"></div>
</div>

Make sure you paste it AFTER a closing ?> tag, otherwise you might break your site.

There are a few lines for you to edit. For example, you can enter an image URL where it says IMAGE URL in quotes. If you don’t want to include a photo of yourself, remove that line completely. The next line will read ‘About [your first name]’, so make sure your first name is entered in your profile. Then, the line below that basically outputs your bio as it’s entered in Users » Your Profile.

Using a custom plugin

I’ve created a very simple plugin that you can install instead. This plugin offers basic functionality but no CSS styling, so you’d be responsible for styling it yourself with custom CSS. I’ve designed it to be as simple and lightweight as possible.

First, download the plugin. You will get a file called cw-about-author.zip on your computer. In WordPress, navigate to Plugins » Add New and click Upload. Select the zip file, then upload and activate the plugin.

Once it’s activated, go to Users » Your Profile and fill out your profile details. Here are the important bits:

  • Display Name: The plugin will show your display name as About [display name].
  • Biographical Info: This text will be displayed after the post.
  • Author Photo: This is the new field added by the plugin. Enter the image URL for the photo you want to use.

Styling the about the author box

That’s it! If you want to do any styling, here are a few useful snippets for you:

  • .cw-about-author – Targets the wrapper div
  • .cw-about-author img – Targets the image
  • .cw-about-author h4 – Targets the ‘About [your name]’ text
  • .cw-about-author p – Targets the biographical text

Example adding a border, background, and padding:

.cw-about-author {
background: #ffffff;
border: 3px double #eee;
padding: 15px;
}

Download the plugin

Download Now

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

29 comments

  4. This is such an awesome plugin! Thanks so much for creating it. I was curious though – how do you get it so that it displays only on posts? Because for some reason it’s appearing in my pages in wordpress, too – and I can’t find the code to remove it from the page template. Also, is there any way you can move the tags above it? Because. again, I can’t find the right place to move the coding. Thanks!

    Tiffa @ The British Book Nerd recently posted: Wrap-Up: July 2014

    1. To make it only appear on pages you have to add extra code below line 55 of the plugin. Find where it says this:

      function cw_about_the_author( $content ) {
	global $post;

      And add this below that line:

      $post_type = get_post_type($post);
if ($post_type != 'post') {
	return $content;
}

      Assuming your tags are added through your theme (which is likely) then you can’t make the plugin version appear after the tags.

      1. That worked perfectly, thanks a lot! ๐Ÿ™‚ Is there any way to add the tags differently then (not through the theme)? So they’ll appear above the Author info, like yours do? Or is it really complicated?
        Thanks again!

        1. Find this bit of code:

          $author_output = '
<div class="cw-about-author">
	' . $photo_html . '
	<h4>About ' . $author_name . '</h4>
	' . wpautop($bio) . '
</div>
';

          And change it to be something like this:

          $author_output = '
' . get_the_tag_list('<p class="meta">', ', ', '</p>') . '
<div class="cw-about-author">
	' . $photo_html . '
	<h4>About ' . $author_name . '</h4>
	' . wpautop($bio) . '
</div>
';

          That would add the tags immediately above.

          1. Wow, thanks so much! You’re really amazing at all this. ๐Ÿ˜› I really appreciate your help. ^.^

  5. Love your tips…I’m a recent follower. Thanks for the pinterest tip and the this one too. You tips for the about the author are specifically for WordPress. How would you do this with blogger. Thanks and keep the tips coming.

    Cynthia
    Happy Reading & Writingโ˜ฎ
    The Things You Can Read!
    Believe In Truth, Beauty, Freedom, Love, and the Power of Books & Writing!

    1. There’s not really an “easy” way to do it in Blogger. You’d have to edit your theme’s HTML code. Sorry but I don’t specialize in the Blogger platform since I don’t use it.

    1. Posts » Authors is a feature from UBB. You set up a user’s display name and bio in Users » Your Profile.

      1. You have to use custom CSS. I designed this to be really lightweight and not have bloated code, so people are expected to style it themselves.

        You can see my example for styling it in the post. That includes all the CSS class names you’d need and a few examples.

    1. This plugin doesn’t allow for that. It is possible through a few different methods, but it would require additional coding.

  8. Awesome! Thanks so much for sharing this – I’ve been curious about it for quite some time. It worked for me pretty easy too – I did the editing rather than the plugin (I’m proud of myself because I even knew how to get it to display my nickname instead of my first name lol). But I have two questions – if they’re too hard just let me know.

    1- I tried doing the custom CSS and nothing changes. I even just copied exactly what you have to see what it would do and it didn’t do anything. I added !important; and it did nothing. What’s wrong?

    2 – Is there a way for me to change where it lands? like above the related posts?

    Berls recently posted: #COYER Read-a-thon | Short and Sweet!

    1. 1. The styling examples I gave was actually just for the plugin version. For the theme version the class name is actually .about-the-author instead of .cw-about-author

      2. You can’t really change where it appears in the theme version I gave. You’d have to use different code. If you want to do that, I suggest using the plugin version. And if you want to change where it appears you can edit the last line of the plugin, which is:

      add_filter( 'the_content', 'cw_about_the_author', 200 );

      If you edit the number 200, that will change where it appears. A higher number like 200 will be further down and a lower number (even into the negatives) will be higher up.

  10. Pingback: Stacking The Shelves #55 & Weekly Recap | Istyria book blog
  11. Pingback: Weekly Recap| Aug 10-16, 2014 | Oh, the Books!
  12. Pingback: Sunday Post | 54th Edition - Fantasy is More FunFantasy is More Fun
  13. Pingback: August Wrap Up - Lose Time ReadingLose Time Reading

  14. do you know how to code this to work in another type of blog? I use LightCMS and am having difficulty trying to code this in the blog feature of it. We do not have a way to install plugins like wordpress. it uses html and css i just am not sure the best way to code this.

    1. Sorry but every platform is different so I can’t offer advice for anything other than WordPress.

Recent Posts

    Random Posts