StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

WordPress post author description

Lots of words these days about WordPress, people are getting more and more interested in high quality themes with lots of features, so ussual thing to have became post author info very useful if you have more writers. There was a guest post a bit earlier how to make a post author info outside main loop.

Now here's a tutorial how to make a author description with link, image and everything in two ways. You can see similar thing for example on Gemini Theme

Vector people

Let's get started! You'll use this on single.php and the usual structure for it goes something like:

  1.  
  2. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  3. ...
  4. <?php the_content('Read the rest'); ?>
  5. ...
  6. <?php comments_template(); ?>
  7. <!--
  8. <?php trackback_rdf(); ?>
  9. -->
  10. <?php endwhile; endif; ?>
  11.  

And now we'll add some template tags to show author description (small note, there are probably some plugins for all this, so fell free to look for them). Most common things you would like to show are author image, name, url and description. Here's new code

  1.  
  2. <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  3. ...
  4. <?php the_content('Read the rest'); ?>
  5. ...
  6.  
  7. <div class="author">
  8. <?php echo get_avatar( get_the_author_id(), '65' ); ?> <strong><a href="<?php the_author_url(); ?> "><?php the_author(); ?></a></strong>
  9. <p> <?php the_author_description(); ?> </p> </div><!-- author -->
  10.  
  11. <?php comments_template(); ?>
  12. <!--
  13. <?php trackback_rdf(); ?>
  14. -->
  15. <?php endwhile; endif; ?>
  16.  

If you have used "get_avatar" you will notice that we are using a different parameter than in comments ("get_comment_author_email()"). 65 is an image size, and here's how get_avatar function works (you can read more about it on codex)

  1.  
  2. <?php
  3. echo get_avatar( $id_or_email, $size = '96', $default = '<path_to_url>' );
  4. ?>
  5.  

So, this will generate and image with author info, and of course you should give that image some styling, in this case you can't use class because of the functions so you'll have to define it in CSS, something like .author img { border, float.... }

Here's another way if you are not using gravatars and you want to use some custom images made by kailoon http://themetation.com/2008/07/08/how-to-display-author-photo-in-wordpres/
Of course there's a third way by using custom fields, but we'll do it some other time

Further reading WordPress codex, and further idea, you can put some if-else so if there is not description to show some text etc..

Leave a comment on Stylized Web Have some feedback? Leave a comment

14 Comments So Far

  1. Pingback: WordPress post author description

  2. Is there any fancy code that can move the start of the article text ABOVE the huge ad block?

  3. Yes, u can put the slag, and make the post that way so theadds code will be after it.

    And yes, it was a beatifull article :_)

  4. By mary posted on October 15, 2008 at 4:25 pm

    very nice article, thanks for sharing!

  5. Pingback: Best Of Design - October :: Elite By Design

  6. Pingback: Wordpress Updates » Blog Archive » Author Profiles for Posts

  7. Can you tell me what plugin use for this nice display code?

  8. Thank yuo

  9. oiaygl Touchdown! That’s a raelly cool way of putting it!

  10. raely good that you said put if-else

  11. wow
    Pinoy Ako amazing i love it….perfect.

  12. wow amazing i love Pinoy Ako remendous….

  13. It is possible to limit the biografical info ? to 30 character for ex…

  14. please do the right thing and spread the lies about syria and iran and iraq and afghanisatan and September 11th 2001 (NYC 9/11) and July 7th 2005 (LDN 7/7)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>