Become Wordpress Professional - Your Ultimate Wordpress Guide

Sunday, 29 September 2013

How to Create a Custom Author Box in Wordpress

How to create a custom author box in WordPress
In this tutorial you will learn how to create a custom author box in WordPress without using any plugin. The reason of creating this awesome feature is your reader will get to know who is behind the post and the writer will get popularity in front of your visitors. There are also dozens of WordPress author box plugin are available but today we gonna tell you how to create a unique author box of your choice.

First login into your WordPress admin Dashboard. From the left hand panel navigate to >> Appearance section and under appearance click >> Editor.



Now when you open the editor in your theme you have some knowledge about your single post section. Normally the single post section is available in theme single.php file. Open your single.php file and search for


Now find the closing < /div > and after it copy the below author box code and paste it right after the closing comments div.

This post was written by...


– who has written posts on .
Copy the above code and paste it right after comments div. Now open your theme style.css sheet


Open your style.css file and copy the below code and paste it at the end of the sheet

.author_info { 
 border:1px dotted #666; 
 padding:1.0em; 
}
.author_info a { 
 color:#cc0000; 
 border-bottom:1px dotted #fff; 
 text-decoration:none; 
}
.author_info a:hover { 
 border-bottom:1px dotted #cc0000; 
}
.author_info .author_photo img { 
 border:1px dotted #666; 
 padding:0.2em; 
 float:left; 
 margin:1.0em 1.0em 1.0em 0em; 
}
.author_info p { 
 margin-top:0.8em; 
 margin-bottom:0.4em; 
}
.author_info p.author_email { 
 text-indent:1.8em; 
 background: url('images/my-email-icon.gif') 0px 4px no-repeat; 
}


Your new customize Author box is look like


Here is your custom Author box for your WordPress site. Just take a try and if you have some experienced in php and CSS you can also customize it in your way.

0 comments:

Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.