How to Customize the Thesis Wordpress Theme – Header, Hooks and Social Media Icons

To download my Thesis Wordpress custom stylesheet and custom_functions.php file (as well as icons), click on the download folder.

A few weeks ago I mentioned my love for the thesis theme as I was implementing it on my blog. At the time I was a bit confused as to how to use the custom hooks in Thesis. I have some knowledge of HTML and CSS, and do understand some PHP, but eh I’m no programmer. Still, I’ve experimented quite a bit with the hooks and can now say that they are cleverly constructed. Anyone willing to get their hands (somewhat) dirty can achieve great levels of customization within two easily configurable elements: the custom.css style sheet and the custom_functions.php file. I’ll guide you through the modifications I’ve applied on this blog (with code and source files). This should get you going on your own Thesis customization.

Customizing the Thesis Header

The first thing I wanted to modify in the Thesis theme was the placement of the nav_area (menu and pages) as well as the logo and tagline. Within Wordpress, start by enabling the custom stylesheet:

Design > Thesis Options > Customize your Thesis Design

Also, make sure Full-width Framework is enabled:

Design > Design Options > HTML Framework

Now we can start coding.

Open up custom_functions.php within an HTML editor (I use Dreamweaver), which is located within your Thesis > Custom folder. This file will be used to code your own custom functions that will be inserted within the Thesis framework. In most Wordpress themes, you would need to add your custom code inside each .php page. For example, to modify the header, you would open up header.php and add your code to the existing code. Not only is it time-consuming to manage multiple code files but the risk of messing up core code can make it intimidating for people not used to programming. Thesis is built around hooks. Before going any further, look at the image below (it comes from the Thesis Help Forums):

Hooks are basically placements around your Thesis theme. You can attach code to any of these hooks. For instance, if I wanted to add some code before a blog post, I would use this hook:

thesis_hook_before_post

Hooks enable the customization of code from one .php page (custom_functions.php). So let’s start digging in.

In order to change the nav_area placement, we will have to create a custom function. Start by adding this piece of code at the bottom of the custom_functions.php page:

/* To clear up the header */


remove_action(’thesis_hook_before_header’, ‘thesis_nav_menu’);
remove_action(’thesis_hook_header’, ‘thesis_default_header’);


/* Adds the navigation menu above the Title */


function full_width_header() { ?>
<div id=”nav_area” class=”full_width”>
<div class=”page”>
<?php thesis_nav_menu(); ?>
</div>
</div>
<div id=”title_area” class=”full_width”>
<div class=”page”>
<div id=”header”>
<?php thesis_default_header(); ?>
</div>
</div>
</div>
<?php
}


add_action(’thesis_hook_before_html’, ‘full_width_header’);

The first two lines of code clear up the header for the custom navigation. Then comes a function called full_width_header() which adds the navigation menu above the Title. Finally, the third line of code attaches that function to the thesis_hook_before_html hook. That’s it for this part of the .php code!

I have taken some snapshots of Firebug in action in order to help you understand which piece of code does what. By the way, if you haven’t installed Firebug for Firefox yet, I highly encourage you to do so. It is a very helpful add-on to have.

Here you can see the <div id=”nav_area” class=”full_width”> highlighted in Firebug, with pages hierarchy underneath. On the right hand side, CSS styles for this particular Div are listed. Notice the way the full_width_header() function uses this same hierarchy to call the thesis_nav_menu() and thesis_default_header().

Now let’s style the header. As you can see, I’ve attached an image on the right-hand side of the logo and tagline. I have also eliminated the line that was going across the nav_area, underneath the tabs. These elements have all been styled using the custom.css file. Again, the Thesis theme provides one global stylesheet that can be configured to your liking. Since it overrides only the duplicated styles of the style.css sheet (the one you SHOULD NOT modify, NOT located in the Custom folder), you won’t be messing with the core styles in an irreversible way.

You can download my custom.css stylesheet for the Wordpress Thesis theme here. It is also part of the download file I’ve prepared (you can find it at the beginning of this post).

Add this bit of code at the bottom of your custom stylesheet:

/*To make nav styles disappear and style the new nav*/
.custom #header_area{ display: none; }


.custom #nav_area ul { border-bottom: none; border-left: none; }


.custom #nav_area ul li { border-width: 0; margin-bottom: 0; padding-bottom: 0; background: none; }


.custom #header { border-bottom: 5px; }


.custom #header_area{ display: none; }


.custom #nav_area { background: none; padding: 0.5em 0; border-bottom: none; }


.custom #nav_area ul { border-bottom: none; border-left: none; }


.custom #nav_area ul li { border-width: 0; margin-bottom: 0; padding-bottom: 0; background: none; }


.custom #title_area { background: none; padding: 1em 0; border-bottom: none; }


.custom #header { border-bottom: none; }

This will give some padding to your header and get rid of some of the borders. To attach an image inside the header, next to the logo and tagline, add this bit of code:

/*Attaching an image/logo in the header*/
.custom #title_area { background: none; padding: 1em 0 0.5em; border-bottom: none; }


.custom #header { border-bottom: none; height: 140px; padding-top: 0; padding-bottom: 0; background: url(images/logo.png) top right no-repeat; }

Put your image in the Custom > Images folder, and change logo.png for the name of your logo under background: url(images/logo.png). The height attribute will determine how big your header will be. Avoid using too big of a header as you want to leave as much space real estate for content as possible. In this case, I’ve attached a small image in the top right corner of the header. By changing these attributes, you’ll modify the positioning of your image. This Firebug snapshots shows the code hierarchy of the header section:

If you want the logo and tagline to disappear, you can add this code:

.custom #header #logo { display: none; }
.custom #header #tagline { display: none; }

Personally I like the tabs look and wanted to keep them. I’ve added this code to restyle them without the long border that was going across the page:

.custom #nav_area ul { border-bottom: none; border-left: 1px; }
.custom #nav_area ul li { border-width: 1px; margin-bottom: 1px; padding-bottom: 0; background: none; }
.custom #nav_area ul li.rss { border-width: 0px; margin-bottom: 0px; padding-bottom: 0; background: none; }
.custom #nav_area ul#tabs { border-left: 1px; }
.custom #header { border-bottom: none; }
.custom #header { border-top: none; }


/*—:[ nav menu styles ]:—*/


.custom #nav_area ul#tabs { list-style: none; border: 1px solid #999999; border-width: 0 0 0px 1px; }


.custom #nav_area ul#tabs li { margin-bottom: -0.1em; background: #FFED60; border: 1px solid #999999; border-left: 0; float: left; }


.custom #nav_area ul#tabs li.current_page_item, ul#tabs li.current-cat { padding-bottom: 0.1em; background: #fff; border-bottom: 0; }


.custom #nav_area ul#tabs li a { display: block; line-height: 1em; color: #111; text-transform: uppercase; letter-spacing: 2px; }


.custom #nav_area ul#tabs li a:hover { color: #111; text-decoration: underline; }


.custom #nav_area ul#tabs li.current_page_item a, ul#tabs li.current-cat a { cursor: default; }


.custom #nav_area ul#tabs li.current_page_item a:hover, ul#tabs li.current-cat a:hover { text-decoration: none; }


.custom #nav_area ul#tabs li.rss { padding-right: 0; background: none; border: none; float: right; }


.custom #nav_area ul#tabs li.rss a { padding-right: 16px; background: url(’../images/icon-rss.gif’) 100% 50% no-repeat; float: right;}

This is it for the header tutorial. I’ve added more resources at the end of this post if you’re interested to read more or push your customization a few steps further.

Adding Social Bookmarking Links at the End of your Posts

Social bookmarks help in getting authority from search engines. It’s actually quite simple to add your own bookmarking icons. We will have to start by adding some more functions to the custom_functions.php file.

At the bottom of the page, we will add a function to link Stumble Upon and del.icio.us. It goes like this:

/* Adds Stumble Upon and del.icio.us bookmark links after each post */


function add_social_media () {
?>
<ul>
<li id=”stumbleupon”><a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>”>Stumble Upon </a></li>
<li id=”delicious”><a href=”http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>”>Bookmark this on del.icio.us</a></li>
</ul>
<?php
}


add_action(’thesis_hook_after_post’, ‘add_social_media’);

The function consists of a list of 2 elements: a “<li id=”stumbleupon”>” and “<li id=”delicious”>” tags. Notice I’ve added some id to both tags. I did this because I want to style both list elements without it affecting all the “<li>” tags on my blog. I also want to attach bookmarking icons next to each link. This is all the code you need in the .php page. If you wanted to add Digg or any other service to your posts, all you would need to do is add another list element with proper link and id. Now to style both tags and attach icons, you’ll need to add this code at the bottom of your custom.css stylesheet:

/*Adds Social Media icons next to Stumble Upon link and del.icio.us underneath each post*/


.format_text ul li#stumbleupon { list-style: none; padding-right: 0; background: none; border: none;}
.format_text ul li#stumbleupon a { padding-right: 25px; padding-left: 25px; padding-bottom: 5px; background: url(’images/stumbleupon.png’) 100% 50% no-repeat; float: right; }


.format_text ul li#delicious { list-style: none; padding-right: 0; background: none; border: none; }
.format_text ul li#delicious a { padding-right: 25px; padding-bottom: 5px; background: url(’images/delicious.png’) 100% 50% no-repeat; float: right; }

This will get rid of the bullet points, will align links onto the right hand side, will add some padding to it all, and finally it will attach the bookmarking icons next to your links. I have added the Stumble Upon and del.icio.us icons onto the download file at the beginning of this post. Make sure you save them onto your Custom > Images folder. Again, here is a snapshot of Firebug showing the code placement within your Thesis theme:

Must-have Plugins for your Thesis Wordpress Theme

Google XML Sitemaps Plugin
This great (and free) plugin generates XML sitemaps of your blog and submits them to Google, Yahoo! and Live Search. The Thesis theme is constructed in such a way that pretty much all your content should be indexed easily, and some of you might wonder what’s the point of generating sitemaps. When submitting your sitemap to Google when a new post is up or content has been changed, the time it takes for bots to visit your site will be greatly reduced, which means faster indexation.

WP-DB-Backup Plugin
This plugin creates backups of your database. There isn’t really a point in discussing the virtue of backing up, we all know what losing valuable materials is like. It’s also good to run a backup before updating Wordpress (like upgrading to version 2.7! By the way, the lastest version of the Thesis theme, 1.3.3., is also out. It supports the latest version of Wordpress).

Askimet Plugin
Askimet is preinstalled in Wordpress, but for it to be functional you need to first activate it and then get your API key from Wordpress.com (unless you already have one). It is a spam filter for comments that is quite effective.

Mint for Analytics
Mint analyzes server data and produces tons of analytics data on user behaviors, visits and plenty more. A 30$ very well invested. Easy to install, it can be done from within Thesis.

Voil