6 ways I customized my WordPress blog theme and how

After my article yesterday, I got a couple of questions about the different customization I did on my Thesis. In this article I will include the 6 blog design additions I did on top of the default options of the WordPress Thesis theme.

If you want more WordPress Thesis info, see my video review of latest Thesis version and see even more Thesis design tips.

I forgot to mention earlier but when you buy Thesis WordPress theme you get access to the member’s forum. There you have different users posting customization they made on their blogs, that is where I get most of my design ideas from and that is where the credit for the following customization goes.

Two files you need when customizing Thesis blog theme are located in the “custom” folder: custom.css and custom_functions.php. Nothing else is needed. Simply copy/paste my codes into the file, wherever in the file you want, and save.

Place menu underneath header

Thesis comes with the menu above header look as default. I have changed that to have my menu placed underneath the blog header. Simply put this code into your custom_functions.php file:

remove_action('thesis_hook_before_header', 'thesis_nav_menu'); add_action('thesis_hook_after_header', 'thesis_nav_menu');

Put a clickable image in your header

As I explained before your blog header is the most prominent feature on your blog and it is very important to have unique image to brand your blog with. That is why I have decided to have a blog header image instead of the default blog title option.

You need to upload your header image to /Thesis/Custom/Images folder on your server. Then place this code in your custom.css file (remember to insert your file name and the file height / width):

.custom #header #logo a { display: block; height: 180px; width: 800px; background: url('images/IMAGE-FILE-NAME') no-repeat; outline: none; }
.custom #header #logo, .custom #header #tagline { text-indent: -9999px; }
.custom #header #tagline { height: 0; }
.custom #header {border-bottom:none; padding:0}
.custom #header { padding: 0; }

Place your avatar beside each post

Having your avatar show next to each post you write is a good way of branding yourself. You can for example use the same avatar as you use as your Gravatar or same  avatar you use as your Twitter profile picture. This way you get the total and consistent branding. Insert this code into your custom_functions.php file (remember to insert the URL of your avatar – image size 50×50 works best):

function author_avatar() {
if (is_single()) {
echo '<img src="IMAGE-URL-HERE" alt="" class="title-avatar" />';
}
}
add_action('thesis_hook_before_headline', 'author_avatar');  

And this code you have to insert in your custom.css file:

.custom .title-avatar {float:left; width:5em; margin-right:1em;}

Customize Twitter field in your comments

As I spend time on Twitter and use it for promotion of my blog, I included the Twitter username field in my comments and customized it for a clean and simple look on Thesis. What you need to do is install WP TwiTip ID plugin, activate it and put this into your custom_functions.php file:

function custom_Twitter_ID() {
if(function_exists(wp_twitip_id_show)) {
$atf_id= wp_twitip_id_show("return");
if($atf_id){
echo '<p>Twitter: <a rel="nofollow" href="http://twitter.com/',$atf_id,'">@',$atf_id,'</a></p>';
}
}
}
add_action('thesis_hook_after_comment_meta', 'custom_Twitter_ID');

Have a prominent sponsor spot below content

I used to have Google Adsense block between my content and comments, but because of inefficiency I decided to do something different. Now I have a very prominent and eye-catching block there and I plan to make announcements or put my recommendation messages there.

This has to be done in two steps, first step in custom_functions.php and second step in custom.css. Insert this into custom_functions.php (remember to customize your own message):

function thesis_promo() {
if (is_single()) {
echo '
<div class="promobox2">
<h3 align="center">HEADLINE HERE</h3>
<p>YOUR MESSAGE HERE</p>
</div>
<br />
';
}
}
add_action('thesis_hook_after_post', 'thesis_promo');

And this code you have to insert into your custom.css file (you can customize it by including different colors, borders etc):

.custom div.promobox2 { border-top: 6px solid #2361A1; border-bottom: 6px solid #2361A1; background-color: #CCE1F5; color: black; padding:1em; margin-bottom: 0.5em;}
.custom div.promobox2 H3{ margin-top:0em;}
.custom div.promobox2 a:hover img {border:3px solid #bebebe;}
.custom div.promobox2 a img {border:3px solid #CCE1F5;}
.custom div.promobox2 img {padding: 0px; }

Prominent popular posts in the sidebar

I have done some customization to get the popular posts to be more prominent and eye-catching in the sidebar. What you need to do is you have to install Popular Posts plugin and activate it. In Appearance - Widgets put the “Popular Posts” widget into your sidebar. In “Format of the links” field place this:

<div class="callout"><a href='%post_permalink%' title='%post_title_attribute%'>%post_title%</a></div>

In your custom.css file place this code (you can customize it with different color and border):

.custom li.widget .callout { padding: 0.846em; line-height: 1.385em; background: #e3f0f2; border: 0.077em solid #addde6; }

I hope this gives you some ideas on how easy it is to customize Thesis theme and helps you customize it and make it your own. Did you do any Thesis customization yourself? Why? How? Feel free to share your experience in the comments.

If you want more WordPress Thesis info, see my video review of latest Thesis version and see even more Thesis design tips.

Join thousands of bloggers and get all my blogging tips for FREE! Subscribe to HowToMakeMyBlog via RSS or via e-mail.

If you liked this article, you may also like:

Post written by Marko Saric on January 30, 2009 in Popular Articles, Thesis Theme