Chris Pearson’s Thesis Theme, which I currently use on this site, is rapidly gaining popularity. One of the reasons for this is that its appearance is so easily customizable. For example, just compare the difference in appearance of the following, all based on Thesis:
Pretty drastic differences to be based on one theme, eh?
The amazing thing is that a lot of this customization can be done from an options panel: select the width, how many columns (two or three), which fonts to use for each element, and so on. And if you want to customize the appearance further, you can apply your own CSS styles in the custom.css stylesheet.
Of course, you can also customize the sidebars using WordPress widgets. You can also use the custom_functions.php file, which lets you customize just about everything about the theme, not just the sidebars. This file, along with the custom.css file are the only two files you ever need to modify within Thesis: you never have to touch a core file. No need to mess with the single.php, index.php, header.php, or any other files to customize. (In fact, they don’t even exist within the Thesis framework.) So, when Chris comes out with an update, you don’t have to worry about going back into these core files and modifying them again.
Example 1: Promote e-book only on selected pages
I like to promote my e-book on most pages of this site, but there are a few pages where I don’t promote it. For example, it makes no sense to promote it on the page that actually serves up the e-book. So, within my custom_functions.php file, I have the following:
function custom_ebook_promo() {
?>
<?php if ( !is_page('downloads') && !is_page('contact') && !is_page('donations') && !is_page('archives') && !is_page('my-music') && !is_page('free-ebook-download') ) { ?>
<li class="widget">
<div class="widget_box">
<p>Download our <a href="http://www.keenerliving.com/downloads/free-ebook-download">Time Management eBook</a>. Filled with useful tips for technology users.</p>
</div>
</li>
<?php }?>
<?php
}
add_action('thesis_hook_before_sidebar_1', 'custom_ebook_promo');
As you can see, I have created a simple function that uses conditional logic to keep the function from being executed on certain pages. And, following the function is the “hook function” that executes the function. This takes the place of having to put the code that is inside the function block into a sidebar.php file, and I don’t have to worry about revising it if Chris ever modifies any of the core files that impact the sidebar. I have about a half-dozen sidebar-related functions (and corresponding add_action statements) in my custom_functions.php file.
The use of hook functions within WordPress became available sometime back, and became available within Thesis during version 1.2 or so. If you haven’t become familiar with any of the WordPress hooks, it would be prudent to spend a bit of time on the subject. They can come in handy. For example, if you wanted to keep spammers from seeing your WordPress version number, you just need to use the hook
remove_action('wp_head', 'wp_generator');
If you are using Thesis, you would put that hook action statement within custom_functions.php. If you are using some other theme, you would have to put it in an appropriate spot for that theme (most themes have a functions.php file that would serve for this).
Example 2: Enabling social bookmarking on single posts
When you look at the bottom of my posts you will see something like the following:
I prefer using this customized social bookmarking instead of a plugin because it seems to me that it’s easier for most readers to use, including those who are relatively new to social bookmarking. The code for it is really simple:
/**
* function custom_social_links() - outputs an HTML list of bookmarking links
* NOTE: This only works when called from inside the WordPress loop!
* SECOND NOTE: This is really just a sample function to show you how to use custom functions!
*
* @since 1.0
* @global object $post
*/
function custom_social_links() {
global $post;
?>
<?php if (is_single() ) { ?>
<p><b>Share & Bookmark This Story!</b></p>
<p class="social remove_bottom_margin"><a rel="nofollow" href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=<?php urlencode(the_permalink()); ?>&title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us">Bookmark on Delicious</a> • <a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">StumbleUpon</a> • <a rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">Google Bookmarks</a> • <a rel="nofollow" href="http://reddit.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">reddit</a></p>
<?php } // if is_single()... ?>
<?php
}
add_action('thesis_hook_after_post', 'custom_social_links');
The custom css code that goes along with this (and that goes into my custom.css file) is:
p.social { font-size: 1em; padding: 0.57143em 0.78571em; background: #e7f8fb; border: 1px solid #86c0d1; }
p.social a, p.social a:visited {/*text-decoration: none;*/}
p.social a:hover {color: #996633; text-decoration: none;}
Note that I use the is_single() conditional from WordPress and use the thesis_hook_after_post Thesis hook.
Example 3: Customizing the header
Thesis makes it very easy to customize the your header to include meta tags for Google site verification and so on, in that this can be done through the options panel: no coding at all. However, I like to customize my headers using some php logic, and the options panel does not accommodate that (not at present, at least). The way I do is through the following custom code:
function custom_header_meta() {
global $post;
?>
<meta name="verify-v1" content="google verification" />
<meta name="y_key" content="yahoo verification" />
<meta name="msvalidate.01" content="msn verification" />
<meta name="language" content="EN"/>
<meta name="copyright" content="Copyright 2007 to Present"/>
<meta name="rating" content="general"/>
<meta name="robots" content="noodp" />
<?php if( is_search() || is_page('contact') || is_page('donations') || is_page('credits') || is_page('sitemap') || is_date() ) { ?>
<meta name="robots" content="noindex,follow" />
<?php }?>
<?php if(is_page('testpage')) { ?>
<meta name="robots" content="noindex,nofollow" />
<?php }?>
<?php
}
add_action('wp_head', 'custom_header_meta');
Note that this uses a WordPress hook, wp_head, instead of a Thesis hook.
Wrap-up
In closing, I hope this helps you see how easy it is to customize Thesis to suit your needs. I enjoy the flexibility that Thesis gives me. Of course, it’s not the only WordPress theme that is available. Brian Gardner also has some very nice themes, as do some other developers. For me, Thesis best suits my needs and its powerful framework lets me continue to tweak my design for the best user experience, without having to knock myself out. Plus, Chris is always coming out with some new capability for Thesis, and you never have to worry about getting charged extra for it … your purchase of Thesis gives you lifetime upgrades and support.
I look forward to your questions and comments.
Update: You may also want to purchase my documented sample code (used on this site for a long while) for only $5.
Sweet stuff bro, thanks for sharing!
I’ll give it a try. Cheers,
- Miguel
Hey Bruce, where do you put the php for the social bookmarking at the end of each post? Thanks for sharing!
Hi Tsh,
I am not 100% sure I know what you’re asking, but let me try to answer by saying that I don’t think it matters where within the custom_functions.php file you put the function. I try to follow the order of a page by having my header functions first, followed by post-related functions, followed by sidebar functions, and so on. But, I don’t think it matters, except of course you want to order the sidebar functions in the order you want them to appear. I’ll email you a copy of my custom_functions.php file to see if that helps clarify.
Take care. I love your site!
Thanks for sharing!
Thanks, Bruce! Got your file, and I’ll take a look at it to see if it answers my question.
Thank you for this information.
Bruce, how would this *Example 2: Enabling social bookmarking on single posts* work with Thesis OpenHook (http://rickbeckman.com/thesis-openhook/)… any ideas?
Hi Robin,
I have not tried it, but I think all you would need to do is copy the following into “After Content” box, and then select the option to “Execute PHP on this hook.”
global $post;
?>
<?php if (is_single() ) { ?>
<p><b>Share & Bookmark This Story!</b></p>
<p class="social remove_bottom_margin"><a rel="nofollow" href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=<?php urlencode(the_permalink()); ?>&title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us">Bookmark on Delicious</a> • <a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">StumbleUpon</a> • <a rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">Google Bookmarks</a> • <a rel="nofollow" href="http://reddit.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>">reddit</a></p>
<?php } // if is_single()... ?>
You can let me know if that doesn’t pan out and I’ll do some further research, but I think that should do it.
Hi Bruce,
Thank you SO much for the information you give here.
I am new to WordPress and to Thesis (my main activity being stained glass painting), so can I please abandon worries about asking a silly question and ask you where I can find the widget_box widget that you refer to in your first example of code?
Thanks so much for any help that you can give.
All the best,
Stephen
Hi Stephen,
widget_box is a class that exists within the style.css file. It wraps a nice colored box around whatever content you use it with … in my example that would be the ebook promotion text.
Let me know if that doesn’t help you.
Hi Bruce,
You are a star! Thanks so much: that’s really got me moving again.
All the best,
Stephen
Thanks for the post it will be useful.
Taking your Example 2: Enabling social bookmarking on single posts, I would like to insert an aWeber opt-in form instead.
Bruce, I would appreciate for your help on how I can go about doing this? I tried but landed in a terrible mess so much so that I gave up.
Thanks in advance.
Philip, I’ll be glad to help you debug this if you’d like. Just send your code to me, and we’ll see what we can do.
Hey Bruce, great post. re example 3: am in the process of setting up my Thesis themed page. Where in the Options would I paste the meta tag that I’ve been given by Google as part of my Webmaster verification? I’m loathe to change the header.php as everything I’ve read seems to point to me (in general) only alterning the custom files…
Thanks
Tim
Hi Tim,
You would paste it in the circled area on this picture.
Alternately, just paste the following into your custom_functions.php file, substituting your own values for the verification keys from Google, Yahoo, and MSN:
Take care.
Bruce – Are you using a custom function or plugin to color your author comments? I can’t find the hook. UGH!
Hi Kevin, I’m not using anything special. It’s the default coloring that comes with Thesis. In looking at the Thesis main style sheet, style.css, the line that gives the color to the author comments is
Since you are not seeing the color in your comments, something else is probably wrong somewhere … have you tried validating your code at http://validator.w3.org/ to see if it shows odd validation errors? I suppose another cause could be a plugin that is interfering with Thesis (although I’ve never run into this), which would be a plugin that I would think would interfere with a lot of things (such as any design you used). Not sure, just thoughts.
I am playing with thesis (site is not live yet) and would like to do the same sidebar display that you’ve done on this site. Following sidebar_1 and sidebar_2, you have a div id called “bottomside”. How can I do that? I know how to style in css, I just don’t know how to get that div below the widgets in the two sidebars. Any help is appreciated – thanks!
Hi Mary,
Turns out that I explain that exact thing in another post: http://www.keenerliving.com/combine-single-and-double-sidebars-on-your-blog-thesis/
That post does mention one thing that I have since changed though. It mentions that I use a
right before the bottomside div, and I no longer do that … I added a clear:both to the bottomside div declaration instead.
Otherwise, that code should give you what you are looking for.
Take care.
Hi,
Using the custom functions file for changes is quick and easy and there are loads of tutorials and tips. Thanks for sharing your tips
My pleasure to share, George. Thank you.
Bruce–
I appreciate this tutorial. However, I was hoping you could help me with a specific situation.
I am trying to create a page within wordpress/thesis so that the client can edit the contents without my intervention. But it has some very specific requirements that must be accomplished:
1. Individual plugins (tweetthis, add2any, etc) have to be turned off for this page only, not other pages. Others, such as Wordpress.com stats, must stay on for this page.
2. The full sidebar with multimedia box must be presented on this page.
I have tried to custom_functions route, but was unable to get the sidebar to display correctly. I inserted the get_sidebar() function, but the sidebar was appearing inside the main content div tag.
Any help would be greatly appreciated.
–Daryl
Hi Daryl,
Wish I could help, but what you are trying to accomplish is a bit beyond my knowledge-level, at least at present. I suggest that you ask this on the DIYthesis forums, where there are lots and lots of smart folks who should be able to help.
I can say that I would not see a need to use a get_sidebar function call within a custom function, and that doing so would not even be a proper use of the hooking framework that Chris has set up. Beyond mentioning that, though, I can offer no other specific help. Best of luck to you on it.
excellent post, but I have another question, how did you get that Google Adsense add below your Related Post Blue Box, can you share that, thanks
Hi Jorge, you can just add something like the following to the related post code:
<br />
<br />
<center>
my google adsense code
</center>
i was looking for customized thesis theme..hope this post will help m a bit
Hi Bruce,
I found this while I was looking for a way to change the sidebar content for certain pages.
I tried including the code for the custom e-books promo, with my own content of course, but I keep getting errors.
Would it be possible for you to send me a copy of your custom_functions.php file, for me to compare with what I have so far?
Here’s the code I have on my site now that is not working:
function custom_sdclasses() {
?>
De San Diego Clases para Padres de registro ClicAqui
<?php
}
add_action ('thesis_hook_before_sidebar_1', 'custom_sdclasses');
Sorry, screwed the code in my first post, here it is again, hopefully formatted correctly now:
function custom_sdclasses() {
?>
De San Diego Clases para Padres de registro ClicAqui
<?php
}
add_action ('thesis_hook_before_sidebar_1', 'custom_sdclasses');
Thank you for any help you can give.