4 Great Ways I Customized my Thesis Theme

Quite recently, Blogussion was upgraded to the powerful Thesis WordPress Theme. After the release, I waited on getting some feedback on the theme. Most people loved it, some people hated it.

I got a lot of emails after the upgrade with questions on how to make some of the customizations I did, and some comments too. So I decided that because I am now addicted to Thesis and want it any blog I ever make, I now want to write about it. So I figured the first thing I would write about Thesis are the customizations I made on my own theme (which is very edited).

Before you read this…

Before you read this post, there are some things I suggest you read if you have never worked with Thesis before. More specifically, regarding the hooks system Thesis uses.

I’m not going to lie, the way Thesis works coding wise will be confusing at first with the hook system it uses. But once you mess around with it, it’s the easiest thing in the world.

Hooks for Dummies
Thesis Hook Reference List [Recommend you Bookmark this]
How to Customize Like a Pro with Theme Hooks
Default Hook Usage in Thesis [Also bookmark worthy]
Customizing Thesis with custom.css

DIYthemes Forum

After you buy Thesis, you are granted special access to a Support forum consisting of thousands of Thesis users. I could not have made my Thesis theme what it was today without reading some of the knowledge on that forum, so be sure to use the forum as your go-to place for any Thesis information.

1. Adding a cool post footer

The thing that got the biggest response about the theme was the post footer. Check out the content immediately after this article if you don’t know what I mean by “post footer”.

I am going to show you how to create the same stuff I have in my post footer, except for the Post Highlights box.

So paste this code into custom_functions.php

function post_footer() {
	if (is_single())
	{
	?>
	<div class="postauthor">
		<?php echo get_avatar( get_the_author_id() , 100 ); ?>
		<h4>Article by <a href="<?php the_author_url(); ?>">
		<?php the_author_firstname(); ?> <?php the_author_lastname(); ?></a></h4>
		<p><?php the_author_description(); ?></p>
		<p class="hlight"><?php the_author_firstname(); ?> has written <span><?php the_author_posts(); ?></span> awesome articles for us.</p>
	</div>

	<div id="similar">
		<h3>You May Also Be Interested In...</h3>
		<p>Similar Posts Code Here</p>
	</div>

	<div id="rightcol">
		<div id="subscribe">
			<h3>Subscribe Now</h3>
			<p>If you enjoyed this post, you will definitely enjoy our others. Subscribe to the feed to get instantly updated for those awesome posts soon to come.</p>
			<ul>
				<li><a href="FEED_URL_HERE">Subscribe to our RSS Feed</a></li>
				<li><a href="FEED_URL_HERE">Subscribe for Email Updates</a></li>
			</ul>
		</div>

		<div id="custom">
			<p>Put whatever you want here!</p>
		</div>
	</div>
	<?php
	}
}
	add_action('thesis_hook_after_post_box', 'post_footer');

Here is the CSS too, if you want to build off of my style. Paste this in custom.css:

/* AUTHOR BOX */
.custom #comments { clear: both; }
.postauthor { background: #F5F5F5; border-top: 1px solid #e1e1e0; border-bottom: 1px solid #e1e1e0; overflow: hidden; padding: 1.5em; }
.postauthor img { border: 5px solid #e2dede; float: left; margin-right: 1.5em; }
.postauthor h4 { color: #666; font-size: 2em; margin-bottom: 5px; }
.postauthor p { color: #515151; font-size: 13px; margin-bottom: 12px; }
.postauthor p.hlight { font-size: 11px; text-transform: uppercase; }
.postauthor p.hlight span { color: #CB3131; font-size: 13px; font-style: italic; font-weight: bold; letter-spacing: 0.8px; }
/* BOXES */
#similar h3, #rightcol h3 { font-size: 1.8em; letter-spacing: normal; padding-top: 15px; }
#similar { float: left; width: 50%; }
#similar p { margin-bottom: 15px; padding: 10px 2.5em 10px 10px; }
#similar a { font-size: 1.4em; border-bottom: 1px solid #CB3131; line-height: 1.5em; }
#similar a:hover { border: 0; }
#similar h3 { padding-left: 10px; }
#similar span.date { color: #888; letter-spacing: 1px; text-transform: uppercase; }
#rightcol { float: right; width: 50%; }
#rightcol p { font-size: 14px; line-height: 1.5em; padding: 10px 2.5em 10px 0;  }
#rightcol h3 { padding: 0; }
#rightcol ul { list-style-position: inside;  list-style-type: square; margin-left: 1em; }
#rightcol ul a { border-bottom: 1px solid #CB3131; font-size: 14px; }
#rightcol ul a:hover { border: 0; }
#rightcol li { margin-bottom: 10px; }
#subscribe { background: #FFFBCC; border: 1px solid #E6DB55; float: right; margin: 15px 15px 0 15px; padding: 19px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#custom { background: #E4F2FD; border: 1px solid #C6D9E9; float: right; margin: 15px; padding: 19px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

2. Custom Pages

If you want to edit the Thesis 404 page or Archives page like I have, check out the codes I used:

Archives Page

The default Archives page that comes with Thesis is great, but I want to do more with mine (still under construction by the way). Here is the code you can use to edit the Archives template from custom_functions.php

function new_archives() { ?>
	<p>New Archives Page</p>
<?php }

remove_action('thesis_hook_archives_template', 'thesis_archives_template');
add_action('thesis_hook_archives_template', 'new_archives');

404 Page

I got the following code from Rae Hoffman (Suggarrae).

function custom_thesis_404_title() {
?>
YOUR 404 PAGE HEADING HERE
<?
}

remove_action(’thesis_hook_404_title’, ’thesis_404_title’);
add_action(’thesis_hook_404_title’, ’custom_thesis_404_title’);

function custom_thesis_404_content() {
?>
<p>WHATEVER YOU WANT YOUR 404 PAGE TO SAY HERE</p>
<?
}

remove_action(’thesis_hook_404_content’, ’thesis_404_content’);
add_action(’thesis_hook_404_content’, ’custom_thesis_404_content’);

3. Add Custom Info to Featured Post

On the front page of the blog, there is one featured post followed by 14 teasers. I was able to add content to the bottom (such as the ShareThis button and Tweet This) of the featured post only, and this is how i did it:

function featuredpost_content() {
	if (is_home())
	{
	?>
		<p>Add whatever here</p>
<?php }
}
	add_action('thesis_hook_after_post', 'featuredpost_content');

This may or not be useful if you don’t use featured posts on your Thesis blog.

4. Add Thumbnails to “Popular Posts”, “Similar Posts”, “Recent Comments”, etc.

Note: You will need to use any plugin from Rob Marsh to be able to do this.

poposts-thumbnails I used Custom Fields for this. if you don’t know how to use custom fields, read this article at the WordPress Codex.

If you use the teasers Thesis has on your blog and have 66×66 images then most of the work will already be done for you. If not, create a custom field and paste your image URL’s into it.

So if you use Rob Marsh’s “Popular Posts” plugin for example, go to Settings → Popular Posts → Output and paste this code into the very first input box “Output Template”:

<p>
<img src="{custom:thesis_thumb}" width="50" height="50" alt="" />{link}
<div class="clear"></div>
</p>

You may also need to add this to your CSS, unless you already have it. You need a clear in the code, or the output won’t look right.

.clear { clear: both }

And to add that to the sidebar, you could either copy and paste it into your Widgets panel, or if you chose not to use Widgets you can use this code to do it:

function PopPosts() { ?>
	<?php popular_posts(); ?>
<?php }
	add_action('SEE BELOW OPTIONS', 'PopPosts');

Since Thesis has a variety of sidebar hooks, you can choose one of the below to replace with “SEE BELOW OPTIONS” above:

thesis_hook_before_sidebar_1
thesis_hook_after_sidebar_1
thesis_hook_before_sidebar_2
thesis_hook_after_sidebar_2

So Thesis really isn’t hard at all to mess around with, you just need to give it a little time for you to fully understand it. Hopefully by seeing the customizations I shared with you will make you realize that. And if you are looking for a great Premium Theme, I am telling you that you cannot go wrong with buying Thesis.

Go to top

customize thesis, diythemes, thesis theme, wordpress

Published: April 9, 2009
Filed in: Thesis
Read the summary

Article by Alex

Visit Alex's blog

I'm the 17 year old blogger & designer behind Blogussion. I live in New Jersey (but root for the New England Patriots), and am a Junior in High School. You can check out my rarely updated personal(ish) blog, Asnio, or connect with me on Twitter.

Summary

The Thesis theme for WordPress is by far the best Premium theme on the market. For some, it is hard to understand how the hooks system works. In this post, I give away 4 of the code snippets I used to code this theme that runs on Thesis.

Possibly Related Articles

190 Discussions

← Previous Comments

Metahuman April 16, 2010 at 12:40 am

@toronto massage therapy: You can use compression if your webserver allows without any plugins.

@Alex: I am going to steal your custom info hack.

Blog Categories

Popular Tags

4 Great Ways I Customized my Thesis Theme

Before you read this…

DIYthemes Forum

1. Adding a cool post footer

2. Cus­tom Pages

Archives Page

404 Page

3. Add Cus­tom Info to Fea­tured Post

4. Add Thumb­nails to “Pop­u­lar Posts”, “Sim­i­lar Posts”, “Recent Com­ments”, etc.

Article by Alex

Summary

Possibly Related Articles

From Planning to Earning

← Previous Article

Next Article →

From Planning to Earning

Popular

Active Discussions

Random Articles

Contribute a Post

About Alex

2. Custom Pages

3. Add Custom Info to Featured Post

4. Add Thumbnails to “Popular Posts”, “Similar Posts”, “Recent Comments”, etc.