Many of you are having multi author blogs and may feel the need to show the author details on every posts published, some of you may have simple author but then also you’d like to add author details coz it looks kinda cool. Most of the premium professional themes comes with the added bonus but as i’m a free theme lover and hope you’re too, we can easily add it to our blog. I’ll show you how i added it in this blog and show you the different ways you can add it in your blog.
The Code
<div id=”post_author” class=”clearfix”>
<?php echo get_avatar( get_the_author_email(), ’80′ ); ?>
<div class=”author_desc”><h4>Author : <?php the_author_posts_link(); ?></h4>
<p><?php the_author_description(); ?></p></div>
</div>
This will create a author info like i have in my every post. Lets analyse the code,
get_avatar(get_the_author_email(),’80′) , imports the avatar from gravatar, 80 is the size you can change it if you want to.
the_author_posts_link(), imports the link to which all the posts of author are shown, you can also change it to some other options like author sitename, IM etc, checkout the functions listed below.
the_author_description(), its self explanatory it imports the description added by the author in users option in admin panel.
Some other functions you can try can be found here : Template Tags ( Check Author Tags)
The CSS
Ofcourse everyone knows the output have to be styled, heres the default CSS i use for my site, you can change it to what ever suits your need.
#post_author {
border: 1px solid #E8E8E8;
background: #EBF6FB;
padding: 10px;
margin: 20px auto 20px auto;
}
#post_author img {
float: left;
border: 1px solid #E8E8E8;
}
#post_author h4 {
font-size: 1.4em;
margin-bottom: 5px;
font-family: Arial, Helvetica, sans-serif;
}
#post_author p {
margin: 0;
padding: 0;
}
.author_desc {
padding-left: 95px;
}
If you don’t understand the CSS and need any type of help with modification of style ask in comment, me or some other users will surely answer or you can also try some basic tutorials on internet on CSS.
How To Add
The biggest question aint it, if your a geek you already figured out if not heres the process,
- Open style.css in your template and at the end of all CSS codes just paste the CSS lines in red above.
- Open single.php and find <?php the_content( ” ); ?> now if you want the author description to appear at the start of every post just paste the PHP Code high above in red, just before the line <?php the_content( ” ); ?>, if you want it to appear at end of every post paste it below the line <?php the_content( ” ); ?>
Please Check The Following Images For Example :
CSS Example
PHP Example
And your professonal author description is ready, add more details in the php using the other functions and change it to suit your needs its all upto you.
lawrence77
wow!
Cool tips for beginners!
lawrence77’s last blog post..Daily Inspiration #3
sbq
thanks, just what I was looking for (i dropped a word for you on the wp forum)
BrandonSch
Great post , You hit the
mark with this, I just don’t understand why people quite get what you’re saying.
I don’t know how many individuals I’ve talked to about this very
thing in the past month, and they just can’t get it.
, Excellent post!
~ew
Hello,
Do note that, as of WordPress 2.9, the recommended way to query the author’s mail is by calling
the_author_meta('user_email');Subhadeep
Thanks for the info..
LarryLove
Hey very nice blog!!….I’m an instant fan, I have bookmarked you and I’ll be checking back on a regular….See ya
DailyTechPost
Great info…i was wondering how to add author info….it has surely helped me a lot….thanks for sharing
pankil
i m just looking for this
Vinay Jhedu
Hey thanx for this post i was looking for this post
Vinay Jhedu
where to find these files styles.css and single.php
Subhadeep
you can find them in your theme files, which is located in wp-content/themes/
Brandon
My question is how do you make the author description an excerpt. There does not appear to be any way to control the length of the author desc. In my case I am working on a site with 40+ contributors and cant afford to police peoples description length. Do you have any ideas how to do this, ala post excerpts?
Subhadeep
try this thread http://activeden.net/forums/thread/wordpress-limit-description-characters-lenght-/46607
Heather Wood
I used the code you provided. I have applied the php code to the bottom of each of my posts using a hook. The gravatar and descriptions show up just fine.
For some odd reason, my css doesn’t show up? Although, all my other hooks with css in the same area are working just fine. I haven’t a clue. its been driving me crazy for the past few hours now.
I’ve tried using firebug to help me debug the issue with no luck. It just doesn’t show up. Please Help!
http://www.ravenousravendesign.com/marketing/how-to-sell-yourself-as-a-designer/
Subhadeep
Hi, this is not shortcode, so you don’t have to put it below every post, just add it in single.php theme file, if you are unable to do it contact techsip.com, they can do it for you for minimal charges.
Heather Wood
Please, I still need help. My CSS is not connecting with my author information. I have it set in each post, but css doesnt work. Copy and pasted exactly what you have. All my other css is working.
Subhadeep
add the css in style.css and php code in single.php in your wordpress theme files and it wiill work.
Heather Wood
Thanks for replying. I figured it out. Something odd was happening because I copy and pasted the code from your site.
For some odd reason, it was adding double quotes to my id’s and classes. even though there weren’t double quotes within what I pasted.
All I did was retype the exact code I had pasted and VIOLA! it finally worked! Strange.