Blog

Blog Updates

Enable WordPress 3.0 Features for the Thesis Theme

June 21, 2010 · 44 comments

If you haven’t heard, Wordpress 3.0 dropped the other day with a bunch of new features.

Although there’s no news on a Thesis update, Thesis 1.7 seems to work fine with WordPress 3.0 but unfortunately doesn’t cash in on any of the new features. I’ve decided to tackle a few of those features to make them available right away:

Use the WordPress 3.0 Custom Background Option with Thesis

Let’s start small. Open up your custom_functions.php file (found in the custom folder) and add the following code at the end of the file:

add_custom_background();

Wordpress 3.0 Custom Background with ThesisNow if you pop in your Dashboard, drop down the Appearance tab you should see a Background option where you can set a background colour or image. I’ve heard plenty of people looking for this sort of customization so hopefully it helps!

Use WordPress 3.0 Navigation Menus with the Thesis Theme

I’ve seen a few tutorials on this already out in the wild- however they don’t provide full functionality like I had expected, so I worked in my own. Again, open up custom_functions.php and paste this code there:

add_theme_support('menus');
register_nav_menu('primary', 'Primary Navigation');
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_header', 'new_menu');
function new_menu() {
   	wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
}

WordPress 3.0 Navigation Menus with ThesisThis will allow you to use the Menus option found under the Appearance tab in your Dashboard. Also (and this is where other solutions fell flat) you can create different sets of menus and switch them out as you please. Check the screen shot to see what I mean. Furthermore, you can see how you can use the code above to create different menus in different areas (say a menu in the footer area).

Use WordPress 3.0 Custom Header Images with Thesis

I’ll finish this round of WP 3.0 tricks off with a long set of code that gives functionality to change out the header background image for Thesis. This one is a bit “hacky” but I’ve tested it out with a bunch of different options and it seems to work fine.

So like usual, fire up your code editor and open custom_functions.php. Add this set of code to it:

global $thesis_design;
$layout = $thesis_design->layout;
$width_one = $layout['widths']['content'];
$width_two = $layout['widths']['sidebar_1'];
$width_three = $layout['widths']['sidebar_2'];

if ($layout['columns'] == 3) { $width_full = $width_one+$width_two+$width_three+79; }
elseif ($layout['columns'] == 2) { $width_full = $width_one+$width_two+57; }
elseif ($layout['columns'] == 1) { $width_full = $width_one+22; }

define( 'NO_HEADER_TEXT', true );
define('HEADER_IMAGE_WIDTH', $width_full); // Width will change automatically (depending on your Thesis options)
define('HEADER_IMAGE_HEIGHT', 110); // If you need a taller header image change this value

function header_style() { // Gets included in the site header
	?><style type="text/css">
    	#header { background: url(<?php header_image(); ?>); }
    </style>
<?php }

function admin_header_style() { // Gets included in the admin header
    ?><style type="text/css">
        #headimg { width: <?php echo HEADER_IMAGE_WIDTH; ?>px; height: <?php echo HEADER_IMAGE_HEIGHT; ?>px; }
    </style>
<?php }

add_custom_image_header('header_style', 'admin_header_style');

Wordpress 3.0 Custom Header Images with Thesis

What this does is allow you to set a background for the Header element (which contains your Site Heading and Tagline). You can use the WP 3.0 crop tool as well. Check out the screenshot to see a (small) header that was easily uploaded and changed with this procedure.

Source File

I’ve packaged all three bits of code and have it available for download here. If you copy all of these functions over you should see three new options when you drop down your Appearance menu in your WP dashboard. If you don’t, make sure you have the latest version of both Thesis and WordPress and that you copied everything over correctly.

Let me know if you find any issues or anything wrong with my code!

Bonus: Even More WP 3.0 and Thesis Tutorials

  • Looking to work in new WP 3.0 Custom Post Types and Taxonomies? Check out Kristarella’s post here.
  • Problem with the custom file editor when updating to WordPress 3.0? Find the fix here.

{ 39 comments… read them below or add one }

Adam Baird June 21, 2010 at 10:03 am

Thanks for posting this. Good stuff as always.

I will say that I think the header image is a bit of overkill…seems quite a bit easier to add 2-3 lines of css instead, but the menu stuff is great.

Done anything with custom post types yet?

Reply

Matt Hodder June 21, 2010 at 10:14 am

You’re right, it’s a lot less code to set up a custom header image with CSS. I think a real benefit might come from setting it up for someone else like a client, so that they can easily upload, switch out, and crop header images without help.

I’ve played around with custom post types and they definitely look useful. I may post something on them in the future, but I think it would end up being a pretty in-depth tutorial.

Reply

Ken June 21, 2010 at 3:09 pm

Thanks Matt. Would the menu code you suggest also work if you are running a Thesis skin? I am using “The Times”.

Thanks!

Reply

Matt Hodder June 21, 2010 at 3:14 pm

As far as I know it should unless Greg is using some different functions. Might want to ask here to be sure.

Reply

Ken June 21, 2010 at 5:12 pm

Thanks for the quick reply Matt. I did pose the question in The Times forum a few days ago but Greg has not responded yet. I am new to using skins and am a little confused as to how they work.

In general, what is the skin functions.php file relationship to the Thesis custom_functions.php? Does one take precedence over the other?

In looking at the functions.php file for The Times skin I see where the thesis_nav_menu is disabled and new menus defined and hooked into place. Maybe all I need to do is add “add_theme_support(‘menus’); ” to the Thesis custom_functions.php

Sorry for thinking aloud here – hopefully someone on The Times forum will reply:)

Reply

Greg Rickaby June 21, 2010 at 9:06 pm

Matt and Ken… please refer to this post on the forum. http://thesisthemes.com/forum/topic/wtf-greg-where-have-you-been

Ken – I’m working on integration and thank you for your patience.
.-= Greg Rickaby´s last blog ..WordPress 3.0 “Thelonious” is here =-.

Reply

Greg Rickaby June 21, 2010 at 8:54 pm

Matt – this is awesome. I was going to dive into exactly the above items (this week), but now I don’t have too! Thank you! 😀
.-= Greg Rickaby´s last blog ..WordPress 3.0 “Thelonious” is here =-.

Reply

Kimberly Castleberry June 21, 2010 at 10:35 pm

Where in the header code would I need to switch up to enable a second menu bar? Thanks for a awesome tutorial!
Kimberly
.-= Kimberly Castleberry´s last blog ..WordPress 3.0 & Thesis 1.7 Custom File Editor Conflict =-.

Reply

Aaron Barnhart June 22, 2010 at 12:10 am

Hi Matt. I’m finding that the background image is truncated to half its normal height when I uncheck “Show site name in header” and “Show tagline in header” under Display Options > Header. Of course, when I leave those boxes checked, the text overlays the image. (And leaving the boxes checked and fields blank doesn’t work.)

Reply

Aaron Barnhart June 22, 2010 at 12:11 am

Sorry, I meant to say Header image.

Reply

Matt Hodder June 22, 2010 at 7:49 am

Yeah, if you want to control your header height you’ll have to use custom css.

If you open up custom.css and add something like:

.custom #header { height: 110px; }

You’ll have a taller header.
.-= Matt Hodder´s last blog ..Enable WordPress 3.0 Features for the Thesis Theme =-.

Reply

Hoodgrown July 29, 2010 at 7:40 pm

I added that line to the custom.css page but there was no change.

Reply

Hoodgrown July 29, 2010 at 7:44 pm

My bad.. it does work..

Paul June 22, 2010 at 3:10 am

Thanks for the menu fix Matt. I was wondering how long it would take for someone to jump on that.
I’m running a custom menu in the sidebar widget, but it seems to style horizontally instead of vertically. Do you have any ideas how this can be worked around? cheers

Reply

d3so June 22, 2010 at 5:31 am

I had a hell of a time trying to upgrade to 3.0. First, I try to do it automatically, I get timed out and get hit with the white screen of death. After I get everything functioning, I find that my theme doesn’t work completely. I’m thinking about switching to thesis, nice to know it works with 3.0

Reply

Matt Hodder June 22, 2010 at 7:44 am

Yep, apparently there’s been only one issue with the Custom File Editor (fix here) which I never end up using anyway.

Reply

Business June 30, 2010 at 1:04 am

Thesis is wonderful for web developers because this do-it-yourself theme is made to make inserting code easier and highly customizable. Since there are various layers of coding organized in separate folders, this ingenious structure allows for building beautiful sites with higher SEO ranking. For this (and other) reasons, much of the guesswork and heavy lifting is taken out of the equation. Web developers and those who are apt to learn the coding process save a lot of time in building their sites.
.-= Business´s last blog ..Company Logos =-.

Reply

George Serradinho July 1, 2010 at 3:22 am

Thanks for this although thesis alrady has an option for the background colour, but does not cater for an image.

I added the background link and all is ok.

Reply

Jon Brown July 1, 2010 at 6:00 am

These are great Matt thanks for sharing (found via Kristarella BTW).

I discussed in the DIYthemes forums several weeks ago how to bypass Thesis thumbnails and use Wordpress thumbnails instead with WP 2.9. If I can spiff it up and write something for 3.0 I’ll add a link in the comments it’d fit nicely with what you have written.
.-= Jon Brown´s last blog ..Hello world- =-.

Reply

Matt Hodder July 1, 2010 at 8:08 am

That would be great if you could! I’ll link it up in the article if you ever get around to writing it.

Reply

Steven Eng July 1, 2010 at 12:35 pm

I use 3.0 with multi-network, and found an interesting thesis/3.0 multi-user incompatibility – things like column width settings for one additional blog will be forced onto the next blog with thesis loaded. Doesn’t appear thesis settings can be individualized per new blog.
.-= Steven Eng´s last blog ..Sony Cybershot TX5 Underwater Camera =-.

Reply

Cyndi Fink July 3, 2010 at 11:09 pm

Dear Matt,
Thank you so much! You’ve made me very happy and it’s been a pretty lousy week. Thank you for this gift!

I’m not a coder but I know enough to get into trouble and I am so happy with these snippets that you’ve shared. How generous of you.

I want to give you something back. Consider yourself hugged.

Reply

Cyndi Fink July 3, 2010 at 11:38 pm

I hope that you have a second to stop by:
http://www.cfink.com

I wrote about you.

Thanks again,

Cyndi
.-= Cyndi Fink´s last undefined ..If you register your site for free at =-.

Reply

Matt Hodder July 4, 2010 at 3:25 pm

Thanks Cyndi! I really appreciate that.

Reply

David Radovanovic July 6, 2010 at 9:22 pm

Thanks Matt! Added more menus has to be added as you described above by registering new hooks?
.-= David Radovanovic´s last blog ..Grocery Ad Design =-.

Reply

Kopepasah July 8, 2010 at 4:04 am

Excellent tutorial Matt. These features will surely come in handy for the coding beginners.

Reply

topiary July 23, 2010 at 5:46 am

Hi — I swapped out the Thesis nav menu for the WP 3.0 menu — and your code worked like a charm — BUT the drop down menu for child pages is no longer working! How do I get this functionality back using the WP menu???

thanks for your help!!

Reply

Hoodgrown July 29, 2010 at 7:55 pm

Hello,
I have 8 different sections to my site. Each section contains multiple pages. How would I have the header change depending on what section of my site someone is in?

Reply

Richard Brown August 9, 2010 at 1:40 pm

Great tutorial!

My only questions are about changing the length of the menu bar and the color.

Are either possible? If yes, how?

Reply

Issac Pelt August 14, 2010 at 6:07 am

Good post, keep it up!

Reply

Lenin October 7, 2010 at 8:18 am

Really amazing hacks you have mentioned here. I got them even before I was looking for these.
But one problem, I am not being able to show tagline with the custom.css it generates but doesn’t show with the indent.

You can have a look at the site: http://kauaicrossfit.com/

Reply

Lenin October 7, 2010 at 8:23 am

#header #tagline { text-indent: 0; height:1}
#logo {height:50px}

Were what I used at my custom.css but its not taking effect.

Reply

rob | relocate to atlanta October 31, 2010 at 9:27 pm

Like this one

add_custom_background();

and just added it to one of my Thesis sites.

Not concerned about header images. They whole design is played: big fat header image, navigation, etc., bla bla.

I’m investigating designs now with minimal headers and more images embedded in the content for aesthetics.

Reply

anuj February 17, 2011 at 10:21 am

hey thanks i am looking for that 🙂

Reply

Martin Thomas May 27, 2011 at 9:04 pm

Thanks!
The Background came in handy. Uhh, i like your footer-seperator zig-zag. damn.
The Menu i might try later.

cheers
Martin

Reply

cute bhavana menon August 3, 2011 at 2:44 pm

the trackback option is not visible in my thesis after upgrading word-press how does make it visible

Reply

anuj@SEOTIPS October 10, 2011 at 3:52 am

I’ve just started blogging (having converted my existing static site to Wordpress), and I’ve been following your advice very closely. I admire your model of providing high quality content as the basis of everything you do, and will try to emulate this approach on my blog.

Reply

thang November 4, 2011 at 2:10 am

I have error problem when click Appearance -> Menu is disable this function.It’s only display THEME LOCATIONS and CUSTOM LINK but i can’t choose it.I hope somebody help me! Thanks a lot!

Reply

John C November 24, 2011 at 8:33 am

Hi,
I’ve just bought Thesis and I’m just starting out on the learning curve.

So I’m bookmarking particular tutorials on Thesis to build up a reference file to use as I develop my first site with Thesis.

One question – your source file was made for a Thesis version in June last year, so is the file still valid for Thesis version 1.8.2 that I have?

As I’m new to coding as well, I’m a bit nervous about using older material unless I know it still works. I’ve already sent a test site into the ether by using faulty code.

Hope you can reply sometime.

Cheers,

John C

Reply

{ 5 trackbacks }

Leave a Comment