How To Customize Your Thesis WordPress Theme
November 20, 2009 | Thoughts & Words By Oscar Del Ben | 13 Comments
Thesis by DIYthemes is one of the most used wordpress themes out there. The reason people like thesis is because it’s not just a beautiful theme per se, but also a smart framework that let’s you customize just everything on the fly. If you often do wordpress design for your clients or for yourself, you may find thesis to be the perfect choice for your needs. In this article I want to show you how to customize thesis like a pro. We’ll start from the basic customizations and then we’ll go deeper exploring hooks and advanced concepts.
THE BASICS
When you install the theme, your administrator panel will have three new tabs. Let’s see each of them in detail.
- On the thesis options section, you an customize things like meta tags, feed url, header and footer scripts, navigation and post images.
- On the thesis design options section, you can customize things like fonts, colors and layout. This section is extremely useful when your client want to change a color on the fly because he or she doesn’t need to call you every time.
- The last section that thesis created for us is the custom file editor section. Here you can modify your custom.cs file and custom_functions.php. The latter is used to add or remove elements to the theme. While it can be potentially dangerous to modify php files directly on the server (imagine a syntax error), it’s a useful functionality that can be very useful a lot of time.
A WORD ABOUT ADDING YOUR STYLE
Thesis lets you use a custom css file to customize the look of your theme. My advice is to use the admin panel when possible, and to use the css file only for advanced customizations. This way it’ll be easier to change things later, and you would only have a tiny css file even for advanced designs.
USING HOOKS
Hooks are a feature of thesis that lets you add or remove elements to your template. If you look inside the thesis folder, you’ll notice that there are no template files, instead you would only find dynamic functions to place the correct content on the correct pages. Hooks are very easy to use, and once you’ll learn how to use them, you’ll never want to use something else. The correct place to insert your hooks is on the custom_functions.php file. I will show you just a few common examples here, but you can find the complete reference on the thesis website.
REMOVING NAVIGATION MENU
Sometimes you simply don’t want to show the navigation menu that comes with thesis. If you want to get rid of it you just have to add this line to your custom_functions file:
remove_action('thesis_hook_before_header', 'thesis_nav_menu')
ADDING A RSS REMINDER
On my personal development blog, I wanted to add a RSS reminder at the end of each post. To do that, I created a function which contains the html code, and then I placed it a the end of each post:
function rss_reminder()
{
if (is_single())
{
?> <div class="rss_reminder"> <p class="note">Liked the post? <a href="your_feed_url">Subscribe to the RSS Feed</a> and get all the goodness.</p> </div> <?php
}
}
add_action('thesis_hook_after_post_box', 'rss_reminder');
CUSTOMIZING THE FOOTER
Customizing the footer is similar to adding the RSS reminder:
function custom_footer()
{ ?> <p>Copyright 2009 My Beautiful Blog</p> <?php }
add_action('thesis_hook_footer', 'custom_footer');
You can even remove the thesis attribution if you want (note: you should buy a developer version if you want to do this).
remove_action('thesis_hook_footer', 'thesis_attribution')
USING AN ENTIRELY DIFFERENT TEMPLATE FOR ONE OF YOUR PAGES
If you want, you can also use a different template for one of your pages:
function my_template()
{
if (is_home() || is_front_page())
{ ?> Your template <?php }
}
remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample'); add_action('thesis_hook_custom_template', 'my_template');
FINAL THOUGHTS
Thesis is an highly customizable, general purposes theme. Of course it wont be the perfect choice every time, but that shouldn’t stop you from trying it if you haven’t already. For those interested in buying the theme, get a discount coupon at thesis coupon.
Related Posts :
Grid patterns as backgrounds on websites are very hip and trendy. They instantly give the feel of a moleskin cahier or graph paper style sketch book, which is quite a coveted look. The bes ...
MyOws is one small step for man, but a huge step towards protecting your creative and intellectual copyrights, universally. Yes, you heard me right, It's universal people! And its free! MyOws le ...
At great risk of angering the web design overlords I need to get something off my chest, I can't stand the term "Bulletproof." When someone decides they have come up with a "sur ...
Interesting ideas. I always help my friends on Thesis and your article will help me do it more often. Hope to see more such articles
Jaky Astik´s last blog ..Microsoft Office 2010 (Beta) – Manual and user’s guide
Excellent choice of theme. I love Thesis. Frameworks and heavily-optioned themes are going to be the future of WordPress develpoment.
If you want more customization tips for Thesis check out one of my sites Theme Thesis, which has skins and some more dirty customizations available.
Hi – I am hoping you can help. I want to add a solid 1px border above and below my navigation bar (no right and left) and do the same as a styling for my h3 headers in the sidebars and blog posts, but can’t seem to get the code right in my custom.css file. Whenever I try any code nothing seems to happen. I know my custom.css file is activated and working because I have already customised my header. Very new at this, what am I doing wrong? I know this is probably a really simple solution. Many thanks in advance. JB
As an example, .menu { border-top:1px solid #000000; } will put a border on the top, you can do the same with border-bottom. But this is probably not what you want because it covers the whole page. If you just want to cover the tabs, try with .tab
Oscar – freestyle mind´s last blog ..Last Time I checked, 1 Step Per Day…
Thanks Oscar. Because I am working in the custom.css stylesheet, presumably it would be:
.custom .menu { border-top:1px solid #000000; }
You say if I add it to the bottom ( I assume. .custom .menu { border-top:1px solid #000000; border-bottom:1px solid #000000 } ) it will cover the whole page. Do you mean the whole width? This is what I am after – two lines, 960px in width, spanning the whole width. I am editing all this in wordpress using Thesis, hence the use of the custom.css stylesheet to over-ride the original.
Thanks JB
Yes, the whole width, sorry
Oscar – freestyle mind´s last blog ..Last Time I checked, 1 Step Per Day…
Code doesn’t seem to do anything when I add it to the custom.css file. What am I doing wrong???
It’s hard to tell here, probably try to play with firebug or try to omit .custom
Oscar – freestyle mind´s last blog ..Last Time I checked, 1 Step Per Day…
Thesis advises not to amend the main css file…would you go along with that? Tried Firebug, but so new to this game I’m not convinced it helps that much. lol. Thanks for your help though. Thesis is great but I would love more control – very frustrating.
I have read a lot of praise about the Thesis theme, and I absolutely love the look, but unfortunately since I’m still fairly new to blogging, I’m still trying to save money for my license. It sounds like the best theme out, but it is also expensive!
The coupon you’ve included is much appreciated.
Darvin @ Organic Food Coupons´s last blog ..Coupons UK