Customizing Thesis Theme For WordPress

Customizing Thesis Theme For WordPress

DIYtheme’s  Thesis Theme for WordPress is one of the best overall themes you can use in your WordPress applications. Thesis offers  all the SEO elements you need, incredible design flexibility, and because it is completely CSS driven, a WordPress site running Thesis provides  lightning-fast loading times. It’s only downfall? It’s pretty plain looking out-of-the-box.

This post will reveal some simple steps one can take to customize Thesis, providing your WordPress driven web site a custom look and feel.

Before you can customize anything in Thesis, you will need to change the name of the folder where the ‘custom.css’ and ‘custom_functions.php’ reside. These two files, when customized, help determine how Thesis functions as well as how it appears. By default, the folder which resides in the theme folder itself (i.e. /wp-content/themes/thesis_18/) is named ‘custom-sample.’ Simply change it to ‘custom’ and you will be on your way to customizing Thesis.

Additionally, I recommend adjusting three default settings within the Thesis Design Options admin panel within WordPress itself.

1. Under the HTML Framework option, select “Full-width framework”

2. Under the Outer Page Padding option, select “0.0″

3. Under the Body (and Content Area) option, uncheck the “Show interior layout borders” option

Header Above Navigation / Custom Footer

One of the very first things that needs to be done, at least in my opinion, is to fix the scenario where the navigation appears above the header. This is poor usability in my mind’s eye but easily fixable. At the same time, we will also allow you to customize the footer area of your site.

Within the Thesis / Custom File Editor option within WordPress, select the custom_functions.php file and click on the “Edit selected file” button. Once you do this, you will see the default code of that file.

Do not delete any of the existing code but rather on a new line at the bottom, add the following:

remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
remove_action(‘thesis_hook_footer’, ‘thesis_attribution’);
add_action(‘thesis_hook_footer’, ‘custom_footer’);
function custom_footer() {
?>

<p><b>Your Company Name</b> | 1234 Anywhere St., Any Town, Any State | (555) 555-5555<br>
<br>
Copyright &copy 2011. All rights reserved.</p>

<?php
}

The first two lines reverse the navigation appearing before the header while the next three remove Thesis attribution and allow for a customized footer. Finally add your customized html which will populate the footer area of your site. You may copy the code above directly but be sure to add your own details to the footer html (i.e. company name, address, etc.).

Thesis Before Change

Thesis After Change

Embed a Flash Header

If you would like to incorporate a Flash file (.swf) in your header area as opposed to a boring .jpg or .gif image, add some additional code in the custom_functions.php file. The code looks like this:

function fancy_pants_flash() {
?>
<object width=“980″ height=”140″>
<param name=”movie” value=”header.swf”>
<embed src=”http://www.yourdomain.com/wp-content/themes/thesis_18/custom/images/header.swf” width=”" height=”">
</embed>
</object>
<?php
}

add_action(‘thesis_hook_after_title’,'fancy_pants_flash’);

Be sure to change the <embed> section above to include your domain and the actual name of your Flash file as well as the correct size (areas in bold).

Also be sure to add the following code to your custom.css file:

.custom #header #logo { text-indent: -9999px; }
.custom #header #tagline { text-indent: -9999px; }

This will move the default WordPress ‘Site Title’ and ‘Tagline’ off into oblivion.

Add Custom Header (non-Flash)

If you simply want to add a graphical header to your Thesis theme, first develop the graphic and save in either .jpg, .png or .gif . Remember the size of the image itself as you will need that information when modifying the custom.css file in Thesis.

Then add the following code:

.custom #header {padding-top: 0; padding: 0;}
.custom #header #tagline { text-indent: -9999px; }
.custom #logo a {display: block; width: 900px; height: 140px; background: url(‘images/header.jpg‘) no-repeat center; text-indent: -9999px}

Remember to change the actual size and location of image (areas in bold).

Here are a couple of sites we developed using Thesis and Flash headers:

Custom Background

While Thesis allows you to choose your sites main background color, it does not allow you to upload a background image. Insert the following code to accomplish this.

body.custom {background: url(‘images/bg.jpg’) 100% 0 no-repeat;}

Remember to change the actual location of image (areas in bold).

Here is an example of a Thesis-themed site using a custom background:

Navigation Menu

With some simple edits to the custom.css file, you can better control the Thesis navigation menu bar. Thesis itself allows you to control the color, text style and size as well as hover effects, however if you want a main color to run the full width of the site, you’ll have to add the following line of code to the custom.css:

.custom .menu {padding: 0 0; font-weight: bold; background: #FFFFFF;}

Notice that I am also able to set the padding and font weight here, something you cannot do within the Thesis controls. Change the background color settings to your preference.

Content Box

“Content Box” in Thesis refers to the area where your main content appears. There are several things you can do to customize as well as improve this area.

Left Padding

For starters, I hat how close Thesis places text the the left edge of your theme. You can adjust this by adding the following code to the custom.css file:

.format_text {padding-left: 1.0em;}

Adjust the ‘padding-left’ to your liking.

Background

Another problem I see with Thesis in Internet Explorer (no I do not use IE) is that it does not display the background color properly if you are using a different site background color or image. This is especially true if your sidebars are a different color than the content area.

To remedy this, I create a .gif image that serves as the background color for both the content box and sidebar. I make the image about 5 pixels in height and then the length is determined by the total width of the site. I then insert the following code into the custom.css file:

.custom #content_box {background: url(‘images/cabg.gif‘) repeat-y right top;}

Remember to change the actual location/file name of the image to your own (areas in bold).

Header/Heading Tags

If you want to control how your headings (i.e. H1, H2, etc.) appear, simply add the following code to the custom.css file:

.custom #content h1 {font-size: 16pt; font-weight: bold; line-height: 1.1em; color: #000000;}
.custom #content h2 {font-size: 14pt; font-weight: bold; line-height: 1.1em; color: #000000;}

Add as many or as few as you like.

Link Hover Colors/Effects

If you want to have different hover effects and colors for hyperlinks withing content, simply add the following code to the custom.css file:

.custom #content a {text-decoration: underline; color: #FEFEFE;}
.custom #content a:hover {text-decoration: none; color: #FFFFFF;}

Adjust effects and colors to your preferences (areas in bold).

Sidebars

Like the link hover color/effects tweaks for the content box in Thesis, here is some code to accomplish the same thing in the sidebars.

.custom #sidebars a {text-decoration: underline; color: #FEFEFE;}
.custom #sidebars a:hover {text-decoration: none; color: #FFFFFF;}

Footer

Hover color/effects tweaks for the footer:

.custom #footer a {text-decoration: underline; color: #FEFEFE;}
.custom #footer a:hover {text-decoration: none; color: #FFFFFF;}

Additionally, if you are like me and want to have control over the background color of your footer as well as text alignment, utilize the following code in the custom.css file:

.custom #footer {padding-bottom: 1.1em; text-align:  center; background: #000000;}

Adjust text-align and background colors to your preferences.

Finally, something that really bugged me about hyperlinking to anything in the footer would place an underline under the linked text, even if I designated ‘none’ in the text-decoration field. I finally found a simple line of code that removes the underline.

.custom #footer a {border-bottom:none;}

=====================================

I’m sure there are many additional ‘tweaks’ that can be done to customize this amazing WordPress theme and would love to hear about them in the comments section of the post. What I have included here are simply some I have utilized in my own sites.

David Wallace

David Wallace, co-founder and CEO of SearchRank, is a recognized expert in the industry of search and social media marketing. Since 1997, David has been involved in developing successful search engine and social media marketing campaigns for large and small businesses. Follow +David Wallace on Google + as well as Twitter.

More Posts - Website

Follow Me:
TwitterFacebookPinterestGoogle PlusStumbleUpon