8 Thesis theme design tips to make your blog better

I always try to improve the look and usability of how to make a blog. If you are a regular reader, you will notice small tweaks here and there. I have done several changes lately and today I will explain what exactly I did and how I did it.

These customizations are relevant to Thesis theme as that is the WordPress theme that I use on my WordPress blog. For even more Thesis Theme tips see my previous 6 Thesis design customization tips.

Modern looking top navigation menu

Thesis theme 1.6 has nav menu customization built-in

I’ve changed the look of the menu line on my Thesis. You would think it takes a lot of work to customize the menu line, but actually it is just couple of lines of code that need to be added to the custom.css file. This code resets the default menu line and creates a much better looking one:

.custom ul#tabs {border-bottom:none; border-left:none; background:#EEEEEE;}
.custom ul#tabs li {margin-bottom:0; border:none; background:none}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {padding-bottom:0; background:#FFFFFF}
.custom ul#tabs li.rss {}
.custom ul#tabs li a {}
.custom ul#tabs li a:hover {text-decoration:none; background:#FFFFFF}
.custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {}
.custom ul#tabs li.current_page_item a:hover {text-decoration:none; background:#FFFFFF;}, .custom ul#tabs li.current-cat a:hover {text-decoration:none; background:#FFFFFF}

I only use white and gray on my menu but you may want to edit it to fit your blog colors. You just need to get html codes for different colors and insert them instead of the background color codes above.

New sidebar / content area background

Another simple change that can have drastic effect on the look of your blog is changing the sidebar and the content area background. The following code needs to be inserted in your custom.css file:

.custom #content_box {background-color:#EEEEEE;}
.custom #content {background-color:#fff;}

I use the default white background in the content area but have changed to gray background in the sidebar. Again get your preferred HTML color code and insert it in the code above.

New yellow box “Welcome” on the front page

To welcome new visitors, to explain them what the site is about and to inform them on how they can subscribe to my Thesis theme WordPress blog, I have now created a very visible note just before content on my front page. It looks like this:

Welcome to HowToMakeMyBlog. I am Marko Saric and I help bloggers succeed. Subscribe via RSS feed or email to receive my blogging tips!

To get this on your blog use the following code in your custom_functions.php:

function welcome_message() {
if(is_front_page())
echo '
<div class="format_text entry-content">
<div class="welcome_box">
<DIV ALIGN=CENTER><p class="alert">Welcome to YOUR TEXT</p></DIV>
</div>
</div>
';
}
add_action('thesis_hook_before_content', 'welcome_message');

And this code in your custom.css:

.custom div.welcome_box {
width: 90%;
padding: 0.571em 0.786em;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-top: 1em;
margin-bottom: 0em;
padding-bottom: 0em;
}

Change the color of article sub-headings

Another simple code, another simple change which makes the blog articles look better. Put this in your custom.css and change the color to what you prefer (you can also change article titles and other headings by changing h3 into h2, h1 etc):

.custom h3 {
color:#897E7C;
}

Remove “From the category archives” message

WordPress automatically displays “from the category archives” message on top of your blog categories. I removed that with a simple code in custom.css so the category pages look much cleaner now with Thesis theme teasers displaying only:

#archive_info {display:none;}

Seth Godin message without plugin

I’ve also included a “subscribe” message at the end of each article. I used to use What Would Seth Godin Do plugin for this but now I was able to replace the plugin with a piece of code in custom_function.php:

function seth_godin_stuff () {
if (is_single()) {
?>
<p><p class="alert" style="text-align:center;">Did you enjoy this article? Please subscribe to YOUR LINK to receive all the FREE updates!<p/>
<?php
}
}
add_action('thesis_hook_after_post', 'seth_godin_stuff', '1'); 

Tweet This / Stumble This without plugin

I’ve also added the Tweet This and Stumble This message at the end of each article without using a plugin. This is the code that needs to go into your custom_functions.php:

function add_social_media () {
if (is_single()) {
?>
<p><p style="text-align:justify;">Your message here <a rel="nofollow" href="http://twitter.com/home/?status=<?php the_title(); ?> - http://howtomakemyblog.com/?p=<?php the_ID(); ?>"><img src="IMAGE URL" alt="Tweet This" />&amp;amp;nbsp;Tweet this</a> or&amp;amp;nbsp;&amp;amp;nbsp;<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>"><img src="IMAGE URL" alt="Stumble This" />&amp;amp;nbsp;Stumble this</a> or <a rel="nofollow" href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;amp;title=<?php urlencode(the_title()) ?>"><img src="IMAGE URL" alt="Delicious This" />&amp;amp;nbsp;Delicious this</a></p>
<?php
}
}
add_action('thesis_hook_after_post', 'add_social_media', '2');

I’ve personally used these logos so you can download them and use them if you wish:

http://www.howtomakemyblog.com/pictures/tweet-this.png

http://www.howtomakemyblog.com/pictures/delicious.gif

Decide in what position related posts should be shown

As “Seth Godin”, “Tweet This” and “Related Posts” are all shown at end of my articles I wanted to be able to select in which positions they show. This is “related post” plugin code you need to put in the custom_functions.php file:

function after_posts_stuff() {
if (is_single()) related_posts();
}
add_action('thesis_hook_after_post', 'after_posts_stuff', '3');

Notice this line in each of the three codes:

add_action('thesis_hook_after_post', 'after_posts_stuff', '3');

At the end of that line you have a number in brackets. That number decides the position. So I have “Seth Godin” as ’1′, Tweet This as ’2′ and Related Posts as ’3′. You can change the number to fit whatever positions you want.

Time for you to work on your blog…

Simple 8 changes that do not take much effort to implement but have many benefits:

• A great potential to improve your blog and the user experience
• By using less plugins your blog should run faster
• By including your subscribe option in a prominent position you should get more subscribers
• By asking for a tweet or a stumble you should get more exposure in social media

Hopefully this post has given you some ideas and inspiration on how Thesis theme can be used to improve your blog. If you want more tips then take a look at 6 additional Thesis customizations I have done on my WordPress blog. Now is the time for you to go, learn how to install WordPress and do some improvements on your blog!

Image by Addictive Picasso

Share

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 April 10, 2009 in Popular Articles, Thesis Theme