9 Quick and Easy Ways to Spice Up the Thesis Theme

Note: This is another post stolen from my web design blog.

This article could also be called “How I Designed the Words Skin” because this is a list of almost all the modifications I made to the default Thesis install. Please don’t just take all of my customizations, but rather learn from them. After reading through all of these you should get a basic understanding of Thesis hooks, custom functions, and your custom.css file and also the knowledge to make some basic (and more advanced) hacks.

So without further ado, here are 10 ways to quickly make your Thesis site stand out from the rest:

Add a Background Image

One line of code can have you differentiating your Thesis site very quickly. Just add this to your custom.css:

body.custom {background-image:url('image');}

That’s the code for a perfectly tile-able image. You can use CSS to change the which axis it tiles on.

Make a Full-Width Header

I like the using and customizing the page framework over the full-width. Staying in the page framework meant that I had to get rid of the header completely so that it’s not wrapped in a container, and put it back spanning the whole page. This requires a custom function.

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

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’);

Source: Francis Raymond

That also moves the navigation area below the header, so if you don’t want to do that then just remove the relevant code.

Make a Clickable Header Logo

Ah yes, the clickable header logo. Such a sought-after and useful customization and yet so easy to do.

.custom #title_area {background:#000; padding:0; border-bottom:none; color: text-indent: -9999px;}
.custom #header #tagline { height: 0; }
.custom #header {padding: 0; border-bottom: none;}

.custom #logo a { display:block; height:100px; width:100px; background:url('yourimagesource') center no-repeat; text-indent:-9999px; }

Make sure to change the background, height, width and image source to their appropriate values.

Add Adsense to Top of Post

This is a really easy way to add Adsense into your blog without manually doing it or using a plugin.

Put this in your custom_functions.php:

<pre>
function add_adsense() {
if (is_single()) {
?>
/// ADSENSE CODE
<?php
	}
}
	add_action('thesis_hook_after_headline', 'add_adsense');

Thesis makes advertising really easy as you can change the hook to place the code almost anywhere in your blog i.e after your posts, in the sidebar etc.

Create an After-Post Box

You can put anything in this box you’re about to create. I like to advertise my RSS feed and Twitter account, but you can put an advertisement or an “about the author” or whatever else you’d like.

function post_footer() {
	if (is_single())
	{
	?>
<div class="footerbox">
Put whatever you'd like in here.
</div>

	<?php
	}
}
	add_action('thesis_hook_after_post_box', 'post_footer');

Notice I wrapped it in a Div. Go to your custom.css and add #footerbox{} with some styling inside if you’d like.

Use Custom Teasers

I wanted my teasers to be sort of unique. I didn’t want a preview of the post, I just wanted the headline. Accomplishing this in Thesis is quite easy. First you’ll have to make changes to the Post Teasers section of the Design Options to set what you’d like to include. I chose just the title and date.

Then open up custom.css and add

.custom .teaser {
   width: 100%;
   margin-top: 2em;
   padding-top: 2em;
   border-top: 1px dotted #bbb;
   text-align: justify;
}
.custom .teasers_box {
   padding-top: 0;
   padding-bottom:0;
   border-top: 0;}

You can also change the headline style by using .custom .teasers_box h2 {whatever}
Reference: DIY Answers

Change Sidebar Colour

This is one of the easiest changes to make. In order to make the sidebar and post content different colours, you need to add a background to the whole container and add a background to the post content. The sidebar will be the container colour, and your regular content will stay white (or whatever you’d like).

.custom #content_box {background-color: #eee; }
.custom #page { background: #fff; }

Use a Different Link Colour in Sidebar

When you have your sidebar in a different colour than your posts, having a single link colour won’t always vibe. Luckily it’s one-two lines of code in your custom.css to make everything pretty again.

.custom .widget a, .custom .widget a:visited {color: #191919;}

Change the Post Title Background Colour

This is one of my favourite customizations. It’s very easy to do and can really spice up a theme. It adds a background bar behind the post title and makes it very easy to find the next post.

.custom h2 {background: #000; color: #fff; font-size: 24px; padding: 7px;}

You’ll probably want to change the header links to match now, especially if you’re using a contrasting bar.

.custom h2 a, .custom h2 a:visited {background: #000; color: #fff;}
.custom h2 a:hover {color: #999999; text-decoration: none;}

To make it follow through to individual post pages just adjust .custom h1.

If you’re interested in a fully-customized Thesis skin with lots of awesome options and features, then check out Thesis Magazine. If you don’t have Thesis and read through this post and think it’d be awesome to be easily enhancing your WordPress site like this, make sure to go and pick up the theme.

photo by teamgriggs