How to Add Author Bio to WordPress Without a Plugin

12 Flares Filament.io 12 Flares ×

WordPress.org If you been reading my blog over the last month you may have noticed some design changes on my post pages. Today I wanted to tell you about one of those changes. That change is the author bio box at the end of the content of the post. I added the box to give a little info about the author and links to their sites. I installed this feature for anyone who wants to guest post for us.

So How Do I add an Author Bio Box to WordPress?

There are several different ways to add an author bio box to WordPress, The two easiest ways is through a plugin and manually adding the code to single.php and to the style sheet. Both options have their pros and cons.

Using the plugin is the easiest way but you are limited to the authors design and their design may interfere with your website’s theme. I tried several different plugins but each one had issues with my theme.

When added the code to your site manually there are pros and cons as well. With manually adding the code to, you need some basic PHP, CSS, and HTML skills to add the code. You need code, you can find it through research, create the code yourself or have someone create the code for you. You will need to change the CSS for the author box to match your site. It could take some time to perfect this. But in the end, you will have your own code, that is custom to your site, if it is coded correctly then it will run smoothly and your new bio box has been designed around your site so it looks like it suppose to be there and not an after thought.

After testing the different plugins, I decided that since I was trying to remove as many plugins as can I and use my own code, I figured this would be the best opportunity to add my own code. So I started the research. After several days of research and testing I asked for some help from Hisham from Famous Bloggers for some coding help.

Once he looked into the code we came to the conclusion that we needed needed to add some code to the single.php code to pull the author bio box and some CSS to style the bio box to fit and to match my theme without issues.

Once you have the code, its relatively easy to add the code your WordPress driven site. The first thing you want to do is back up your single.php and your style sheet. If you do not have access to backing up your work, then just copy paste each page into separate text documents and save them so you know what you have. Once everything is backed up then you can start the process of adding the bio box to your site.

Inside your WordPress Dashboard, go to the Appearance section and click on editor. After the editor opens, look for and click on the single.php file and open it up.

Next you will need to copy the code to the end of the post code files. You will need to change the link to your site. You can also change the wording here as well.

<div class=”postauthor”>
<?php echo get_avatar( get_the_author_id() , 100 ); ?>
<h3>Article by <a href=”<?php the_author_url(); ?>”>
<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h3>
<p><?php the_author_description(); ?></p>
<p class=”hlight”><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> awesome articles for us at <a href=”http://www.evolutionarydesigns.net/blog”>Evolutionary Designs</a></p>
</div>

The code below is what you may find at the end of the code to post content at the bottom of the code you will see , put past the code here. If you do not have this feature let me know, and I can take a look at your code see where to add the code to make it work. You may also have some other custom code added such as Facebook fan pages or bookmarking code their, you can either add it above it or below it.

<div class=”details<?php if($share):?> share<?php endif; ?>”
<?php
printf(__(‘This entry was posted by %1$s on %2$s at %3$s, and is filled under %4$s. Follow any responses to this post through %5$s.’, ‘mystique’), ‘<a href=”‘. get_author_posts_url(get_the_author_ID()) .’” title=”‘. sprintf(__(“Posts by %s”,”mystique”), attribute_escape(get_the_author())).’ “>’. get_the_author() .’</a>’, get_the_time(get_option(‘date_format’)),get_the_time(get_option(‘time_format’)), get_the_category_list(‘, ‘), ‘<a href=”‘.get_post_comments_feed_link($post->ID).’” title=”RSS 2.0″>RSS 2.0</a>’);echo ‘ ‘;

if ((‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)):
// Both Comments and Pings are open
printf(__(‘You can <a%1$s>leave a response</a> or <a%2$s>trackback</a> from your own site.’, ‘mystique’), ‘ href=”#respond”‘,’ href=”‘.trackback_url(”,false).’” rel=”trackback”‘);

elseif (!(‘open’ == $post-> comment_status) && (‘open’ == $post->ping_status)):
// Only Pings are Open
printf(__(‘Responses are currently closed, but you can <a%1$s>trackback</a> from your own site.’, ‘mystique’), ‘ href=”‘.trackback_url(”,false).’” rel=”trackback”‘);

elseif ((‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)):
// Comments are open, Pings are not
_e(‘You can skip to the end and leave a response. Pinging is currently not allowed.’,'mystique’);

elseif (!(‘open’ == $post-> comment_status) && !(‘open’ == $post->ping_status)):
// Neither Comments, nor Pings are open
_e(‘Both comments and pings are currently closed.’,'mystique’);
endif; ?>
<?php edit_post_link(__(‘Edit this entry’, ‘mystique’)); ?>
</div>
</div>
</div>
<!– /post –>

Once you have added and modified the code as needed, Save it and open the Style.css file. After opening the file, go to the bottom of the code and copy the follow code to the style sheet.

}
.postauthor { background: #F5F5F5; width:650px; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 10px; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; text-align:justify;}
.postauthor p.hlight { font-size: 11px; text-transform: uppercase; }
.postauthor p.hlight span { color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px; }

When finished save it and preview your work. If it pulls the correct text then then you are finished with the single.php file but if your bio box does not match with your theme or the box is to big or to small for the column, then you will need to edit the style sheet.

After you get your bio box styled correctly you will need to go to the user tab and update the user information. You will need to have all if your users update their profiles and add a bio to their profile. The field that needs to be updated should look like the picture below.

Filling WordPress User Bio Box

When you have completed your bio and tested, you are finished. Do you have an avatar in your bio box? You can have one, the code will call for your avatar if you are registered with Gravatar. Just head over to their site and register for one. Anyone that uses Gravatar on their site, will give you an easy way to add your avatar to their site.

Conclusion

After installing and modifying the code as needed, I found that it was actually simple to set this up, but it does take some time. If you have no issues, it should take about ten or fifteen minutes. If you have issues with the styling it could take a little a longer if you have to figure out what you need to match the box to your site. For my site my only real issue was getting the comment box to line up with the other boxes around it. It took me about an hour to get it lined up the way I wanted it.

If you enjoyed this post, make sure you subscribe to my RSS feed!

EvolutionaryDesigns.net runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

About James

James spends most of his free time using social media and loves to teach others about design, web development, CSS, SEO, and social media. He is addicted to Wordpress, social media, and technology. You can reach him on his, personal website, Do not forget to follow him on Twitter @element321

Comments

  1. The author bio box looks cool.
    Also I noticed that the comment fields didn’t appear and in place of that my name appears. Thats super cool. Thats a major incentive to comment. How did you do that?

  2. I agree with Selurus, author box looks cool. I do not have one on my blog but should get one. I think I will see if a plugin will work but if not thanks for the coding tutorial, it will come in handy if I need to go there.
    My recent post The great debate continues..

  3. Hi,
    This is a great post. I have been looking for something like this long time ago and I will have to go and implement it on my blog.
    Thanks
    PS: do you know if there is a plugin for this.
    Thanks
    My recent post Blogging your passion

    • Hi Onibalusi,

      Yes there are several different plugins you can use. You can find them by doing a search through the admin panel> install new plugins > and do a author bio box search. Just a reminder, these plugin are very limited and may not work and are not as highly customizable as doing it yourself. Plus if you code it yourself, your site will load faster than runing it at as a plugin.

      My recent post 110+ CSS Resources and Tutorials

  4. What I meant to say was the first comment I posted required me to enter name, email and url. But that didn’t appear while posting the 2nd comment.
    Instead a message is displayed Welcome back, Selurus. Change>>
    Why?

  5. Hello? You’ve not replied to my question. I would really like to implement this on my blog too if you’d tell me how you do it.

  6. O I understand what your saying now. I that should be part of intense debate comment plugin. When I comment on some of the other intense debate sites I see this same message. Are you using intense debate on your site?
    My recent post Daily Delicious Links April 8th 2010

  7. The stylesheet code doesn't work for me.In fact,i tried some other css styles which i found in different blogs but neither of them work.
    What can be the problem

    • Hi Arshad,

      I had a lot of issues with one of my themes as well. A buddy and I had to go in and play with the code until we found the right look and feel. You will have to go in and edit the code to match your theme.

  8. Great tut , I shall be referring users of the WP Platform to this article . Good clean code :) I had recently written an article on How to Implement an Authors Box for the Blogger Platform .
    On the Blogger platform , one cannot install anything via a plugin – the codes must be installed manually . I had styled a few Author Boxes , since everyone liked my own and kept requesting of me to post a tut on how to go abut creating one – so… I just created a few myself for readers to use. Now I'm being asked to write up a tut on how to install them on the WP Platform. However, I will now simply point users wishing to implement them here to your Tut ! :D ( Hopefully I will be let off this assignment :D )

    Thank you for your effort in putting this together :)
    Best Regards !

    Mia 
    My recent post Links for 2010-04-16 [del.icio.us]

  9. Great info…i was wondering how to add author info….it has surely helped me a lot….thanks for sharing :)

  10. I was looking for this badly for my new blog, thanks james!
    PR recently posted..Addicted To Facebook Brace for Asthma attacksMy Profile

  11. Thanks man, I was just ooking for tips on how to pull the author box content to post “pages”.

    I’ll try the codes on my blog.
    Stella recently posted..High Page Rank Article Directories – My Traffic Experiment And Insightful ResultsMy Profile

  12. This is exactly what i needed, thank you!
    Tom Lambert recently posted..The 7 Ultimate Online April Fools Jokes of 2011My Profile

  13. This is something I’ve been wanting to incorporate into my blogging, but up to now, have not had enough confidence with my ability to edit the php and css.

    With your directions and code inserts, I’m going to give it a shot and see if I can make it work on at least one blog first.

    thanks for providing the step by step

  14. Didn’t realise this was possible without installing a plugin – I tried a few and they all seemed to be incompatible with WP3 or overkill.

    So thanks!

  15. hello, I would like to ask.. could you help me on my codes.. I am using Atom by Digitalnature also.. I have already an Author Bio appearing on my post and this is because it is included on the settings of my theme..

    If you will see on my page, the author bio is extending on my sidebar.. so I want to resize it or reconfigure the words. Where will I see it.. I have check the single.php and css and I see nothing to edit.,

    please help
    The Chef recently posted..KITCHEN DESIGN 101My Profile

    • Hi, I took a look at one of your articles. It looks like the whole author box is off. This actually a different theme from mine. Digital Nature offers two themes right now, yours and mine.

      You have two options to fix this.
      1. The easiest to switch to a two column look and that can be done through your theme options, if this theme is offered.

      2. The second option is a lot harder and since I am not familiar with your theme, I can tell how to fix this. But this issue should have been resolved by digital nature. So you might want to ask their support staff as to fix it. If they won’t you will have to dig into the code and change the size of the author box. You will need to open up your editor section via the admin dashboard. Once open, you will need to file for your theme. Since I am not familiar with your theme I can tell you what the name of the file is. Then look for section that is name something like author box or author bio. Then you will see the box size. You will need to change this size.

      I would NOT make these changes without having a developer do it or getting help from digital nature. Any changes to the code you make, before you make those changes, make sure to make a BACKUP of the original file.

Trackbacks

  1. Element321 says:

    RT @element321: How Add Author Bio to WordPress Without a Plugin http://bit.ly/b7ChLk #wordpress

  2. RT @element321: How Add Author Bio to WordPress Without a Plugin http://bit.ly/b7ChLk #design #css #php

  3. RT @element321: How to Add Author Bio to WordPress Without a Plugin http://bit.ly/b7ChLk

  4. RT @WebTechWise: RT @element321: How to Add Author Bio to WordPress Without a Plugin http://bit.ly/b7ChLk

  5. Social comments and analytics for this post…

    This post was mentioned on Twitter by Element321: RT @element321: How Add Author Bio to WordPress Without a Plugin http://bit.ly/b7ChLk #wordpress…

  6. Mia Zoe says:

    How to Add #Author Bio to #WordPress Without a #Plugin – http://bit.ly/aNlmNo (via @element321)

  7. Karthikeyan says:

    RT @Vegagirl5: How to Add #Author Bio to #WordPress Without a #Plugin – http://bit.ly/aNlmNo (via @element321)

  8. Rahul Banker says:

    RT @digisecret: RT @Vegagirl5: How to Add #Author Bio to #WordPress Without a #Plugin – http://bit.ly/aNlmNo (via @element321)

  9. DesignGizer says:

    RT @FamousBloggers: RT @element321: How to Add Author Bio to WordPress Without a Plugin http://bit.ly/b7ChLk

  10. RT @FamousBloggers

    RT @element321: How to Add Author Bio to WordPress Without a Plugin http://bit.ly/b7ChLk

  11. [...] Boxes provided here in this post ) – then what I will recommend for you is , to go over to Evolutionary Designs blog site , hosted by James Johnston [...]

Speak Your Mind

*

Loading Facebook Comments ...
12 Flares Twitter 1 Facebook 1 Pin It Share 0 StumbleUpon 10 Google+ 0 Buffer 0 Email -- Filament.io 12 Flares ×