29 Ocak 2014 Çarşamba

wordpress add author bio to posts

How to show author bio in wordpress post 
Hi dear bloggers! In this wordpress lesson we are gonna find out how to show author bio in a wordpress post. Showing author bio is a very cool option, so visitors will know by whom the post they read is written. Of course this will also higher up your reputation in reader's eye.

Before playing with your theme please back up style.css and single.php files.
 PHP Code:
<p><?php echo get_avatar( get_the_author_meta('email'), '48' ); ?>

                        <strong><?php the_author_posts_link(); ?></strong><br />

                        <?php the_author_meta( 'description' ); ?></p>

CSS Code:
/*Author Box */

.authorbox {
 background: #f9f9f9;
 border: 1px solid #e6e6e6;
 padding: 15px;

}

.authorbox img {

 background: #fff;
 border: 1px solid #e6e6e6;
 float: left;
 margin: 0 10px 0 0;
 padding: 4px;

}

.authorbox p {
 margin: 0;
 padding: 0;

}

.authorbox p strong {
 font-size: 13px;
 font-weight: bold;

}

Output:
Round borders off
I saw at some blogs that avatars of authors were circular. I liked them very much. I thought you may like it also. Would you like to round borders off? here is how...
just add below codes in CSS .authorbox {}
border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px;
New Output will be so:

Usage:
PHP code above given first should be in a div tag classed authorbox, i mean exactly it should like that:
<div class="authorbox">
delete this line and paste PHP Codes here
</div>
then you should go to Appearance >> Editor >> single.php and paste PHP code in div tag as you are shown where you want to appeare author bio.

the number 48 you see in PHP will determine size of image, you can increase or decrease as your desire. But remember this ('email') will get author image via email option if he has an avatar at Gravatar.com otherwise snippet calls wordpress' default avatar or null.
Adding CSS codes
in general CSS codes of wordpress theme is located in that path: theme/css/style.css or theme/style.css, so to initiate CSS codes that we are provided you above please find out where your theme's CSS file placed is.

0 yorum:

Yorum Gönder