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.
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.
The Discussion
Leave a Comment Read Again?← Previous Comments
Next Comments →
@toronto massage therapy: You can use compression if your webserver allows without any plugins.
@Alex: I am going to steal your custom info hack.
Great post. Thank you so much.
How about the theme of this blog? Where can I buy it?
.-= Anh2´s last blog ..CO.CC – Free Domains =-.
i have just now installed thesis theme; i am right in the middle of an ocean now
seems i shall have to forget blogging for a few days and learn thesis customization first.
.-= Kaushik´s last blog ..????? ???? ???????????? ?????? ??????? =-.
I am using the similarity plugin by david miller for displaying the similar post and it does a good job but the formatting is off (ralphplaskett.com). Could you help me move the links to the right a little so that they will appear neatly in the white space?
Thanks!
I am in the process of a revamp on my thesis theme since the upgrade to 1.7 these tips will really go a long way. Thanks so much for the great post I will be sure to share it.
Vincent Cameron
Newbie Marketer,
http://www.blogussion.com/talk is where all the tips are. Alex answered my question in there.
Ralph
thanks I will be sure to stop over and have a look.
is there any ways to learn thesis customization like ebook or other
I installed popular post plugin and apply the code you given. I also apply the clear id in css file but the outcome is different,not like yours. Why?
.-= PisangPanas´s last blog ..Mukjizat Di Sebalik Bismillah =-.
Hi alex,im waiting for a blogger-to-wordpress migration tutorial from you.There are lot of bloggers posting fake one and do you know about migration?
How do I make the Post Footer show up for the list of posts page and not just the single post page? Thanks.
Also if I add tags in the Post Footer it will double up the tags in the Post… the default ones from Thesis show as well as the Post Footer… how do I remove the default tags area and have it only show in the Post Footer?
Alex, Please turn off comments for this post… never mind, I will just unsub from this post.
@Eric @aaslin @pisangpanas et al – buy a REAL copy of Thesis and go to the forums for your questions.
ouch.
I do have a REAL copy of Thesis. Seems fitting to ask a question regarding this article within its comments, no?
@brian
Since you posted in May, the owner of the Thesis theme has finally agreed that it should follow GPL rules:
http://mashable.com/2010/07/22/thesis-relents/
So this is (and should be) as good a forum as any to discuss the theme.
And if Alex can make a few bucks promoting his version and make it easier for others to use it without learning all the hacks, then good for him.
I have an awesome 16 year old son – but wish he knew WP and Thesis like you Alex so he could help me out!
These great sites give me the inspiration to do better with my Thesis-themed sites. I want to get away from the generic Thesis look but it’s the graphics and overall design that I have problems with.
well done,good job.
this is a cool tips! newbies like really appreciate this. will try to customize my blog now
great tips, thanks for sharing.
I am currently trying to learn thesis customization because I hate seeing blogs with the same template as mine.
I hope I could make a great customization before I purchase the developer’s version.
I am also using thesis theme. How to make your teaser posts have images instead of the conventional texts?
Nice tutorial. Thesis themes is a superb theme but I can’t modify it on my owns.
My blog looks better when I add thumbnail on it.automotive news
Thanks, Alex. That helped a lot.
Alex,
You have truly mastered the Thesis theme. This is by far one of the most well-crafted Thesis themes that I have seen.
Thanks for the detailed instructions,
Richard
If you’re a blogger, it isn’t hard to figure out what you visitors came to your website for: content. And as a webmaster, it’s your job to give your visitors what they’re looking for. There are many ways to do this, especially under the world’s best and most expandable blogging platform, WordPress.
Really great post! #1 is definitely a customization I just added to my blog (thanks). But how do you add those custom images like you do all over your site? or is that more advanced?
Some great tutorial there on hooks. Thesis really harnesses the power of hooks. Have not tried custom fields yet, so thanks for the intro.
i tried to edit the custom_function.php i hit ctrl+A in the custom_function.php then i delete the existing code, so i copy the code from yours and i paste it there, but then i can’t open my web. what happen?? even to the admin page, it doesn’t open at all. all i see is the blank page of my web. i need your help to fix my web soon.
regards,
ricky
Thank you Alex!
Does anyone know what is up with DIYThemes.com? Their main pages listed on google go to error pages, and logging into the DIYThemes/Thesis forum failed (we own a developer version of Thesis – but are newbies).
I don’t see here a mention of “child” themes. I am not proficient at this – but I do see the need to do this kind of set-up so that when Thesis or Wordpress upgrades I don’t lose my tweaks – or is that not an issue with Thesis?
I was attracted to someone else’s website layout and found they used http://www.studiopress.com/themes/allure but their support is very expensive. I wonder if Thesis lends itself to a set-up like that without lots of work.
YOU SUCK! Man, when I was in Jr. high/ high school and was all into computers, all I had to work with as HTML and C++. Made a bunch of cool little games, and HTML sites, but that only took me so far. Right when I change my major and leave the computing world, THEN 16 year-old kids are making a living off of hacking Wordpress. Hence, YOU SUCK!
*sorry, this is one of those moments where life isn’t living up to what it’s supposed to be, so I’m taking it out on you. This is an amazing site, and just glancing at it is blowing me away! My HTML knowledge made getting to know wordpress a breaze, but I didn’t get far enough into Php to really get a grasp and understand all your coding thoughts. You’re brilliant, and I hope you really take this far. I’m sure you’ve heard the props before, but let me just affirm all of them.
I’d love to ask you a million questions about how you built the team, where your revenue stream is – it’s actually kind of nice not to see millions of ads everywhere! and a whole bunch more. But I wouldn’t be surprised if Alkismet or language screener has already deleted this comment. None-the-less, good luck!
Very nice site.
Do you know of a “carousel” widget for Thesis?
Thanks Paul
Thanks for providing custom function PHP code as a coder this is useful for me…
Thank you so much for sharing.
thnx for this post
i wants customize my blog
Hey Alex
I’m actually buying the theme next week, I always hear about how powerful it is, but I have really noidea on howto make full use of it, so thanks for these tips 
Great post Alex.
Is there any chance you can help me out with the actual code I need to insert in the similar posts or related posts section?
“Similar Posts Code Here”
Thanks.
Great post! Only one question: how to add custom images like you all over the site? Thank you!
Hi, great tips! How can I make Recent Comments showing gravatars instead of post thumbs?
I use Thesis on all my sites. Can’t make it sing quite like you guys but I do like it a lot and love the ease of use.
Excellent content. I’m impressed. You actually captivate your audience with your writing skills. Wish I could do half of what you do. Keep up the good work.
Congratulations!
You have given some very useful tips for customizing thesis. Thanks for sharing with us.
Love the thesis theme! I am thinking of changing my website to thesis theme also.
thanks for sharing, ill apply on my blog
Hey. great tips and codes
i will surely try it to my thesis. please keep update with some more codes
Thanks a ton for sharing this theme
Hi! Alex..
I tried adding cool post footer “cool post footer” code in custom_functions.
But i am getting this syntax error, saying
‘}’ expected on particular line, i don’t know a bit about php, i will be thankful if you help me to rectify this syntax error.
Thanks for providing custom function PHP code as a coder this is useful for me…
hi Alex,
can u or somebody pls help me how to display “popular post with thumbnail and excerpt” just exactly like your site . thanks for advance.
Hi Alex. Great work I did everything expect “Similar Posts Code Here” Where can I find similar post codes in thesis?
I love the template but it seems that the search box at the top is little misplaced. i am seeing it on firefox. Hope you may fix that. THank you..
Very cool. Thesis Rocks and you have done a great job customizing it.
Thanks for sharing.
This post helped me in unspeakable ways. Thanks a ton.
very useful information .. thankyou ..
← Previous Comments
Next Comments →
Comments on this entry are closed.