You are here | HomeThesis Theme Tutorials → Thesis Theme Customizations Made Easy with WordPress 3.0

Thesis Theme Customizations Made Easy with WordPress 3.0

in Thesis Theme Tutorials

WordPress 3.0 comes with a ton of new features that makes customizing Thesis and other themes easy. At press time, the Thesis Theme (Thesis 1.7) does not yet make use of new WP 3 features. The good news: It’s easy to enable new WordPress 3.0 features to work with Thesis and other themes.

The following Thesis Theme Customization Guide will allow you to:

Add these code snippets to your custom_functions.php (for Thesis users) or functions.php (for other theme users). If you use a theme other than Thesis and do not have a functions.php file, create a document in your favorite text editor called “functions.php”, add the following codes, and upload the file into the same directory folder that contains your theme files.

Enable WordPress 3.0 Navigation Menus in Thesis Theme

To enable the new WordPress 3.0 navigational menus to work with the Thesis theme (found, and controlled within, the admin dashboard), add this code to custom_functions.php:

// ADD SUPPORT FOR NAVIGATION MENUS IN WORDPRESS 3.0
add_theme_support('menus');

Adding menu support to your theme is just the beginning. Now you can add custom menus to sidebars and add additional Thesis navigation menus without (as much) coding – all from within your WP admin dashboard! Navigational menus are just one of the most exciting new features of WP 3.0.

Thesis Theme Customization Add Support for New WordPress 3.0 Features to Thesis and other Themes

Before WordPress 3.0’s new navigation menu feature, adding additional Thesis menus required either hard-coding links with a text widget (and even then, theme customizers had to build a widget for whichever area the navigation menu appeared in) or hard-coding nav menus in custom_functions.php and using Thesis hooks to hook them into place (if I’m speaking Geek here, don’t mind me – if you never had to do it, you won’t have to – and if you want to do it, I’ll tell you how to add additional menus to the Thesis theme – the easy way).

Now, you can add additional Thesis nav menus in WordPress 3.0 AND quickly modify and control them from within your admin dashboard (read: customize Thesis menus without hiring a coder). Enabling your theme to use WordPress 3.0 menus allows you to add links, categories and pages to your new navigation menu by using the drag and drop user interface within your WP admin panel.

WordPress devs hit the mark with custom menus by making WP 3 super user-friendly for beginning WordPress users, theme developers and casual theme tweakers.

Add and Customize Additional Navigation Menus in WordPress 3.0 for Thesis Theme (for Dummies)

To add additional Thesis nav menus in WordPress 3.0, this piece of code is all you have to know (first, I’ll give you the whole code and then explain it in detail). Make sure you place this code after the beginning  “<?php” in your custom_functions.php file.

Add another Thesis Nav Bar below Default Thesis Nav with WordPress 3.0 Navigation Menu

This code will add a navigation menu before the header of a default Thesis theme installation (but after the original Thesis nav):

add_theme_support('menus'); //if you already added theme support for menus, comment this line out.
register_nav_menu('primary', 'Primary Navigation');
function awesome_menu() {
wp_nav_menu( array( 'container_class' => 'menu-headerclass', 'theme_location' => 'primary' ) );
}
add_action('thesis_hook_before_header', 'awesome_menu');
:: Explanation of the Code ::
add_theme_support('menus');

This line tells the theme to add support for native WordPress 3.0 navigation menu features

register_nav_menu('primary', 'Primary Navigation');

This line tells the menu, that we call “Primary Navigation” (you can change it to something else) in the “primary” theme (you can change it to your theme name or just leave it as is), to show up in the WP admin dashboard user interface.

function awesome_menu() {
wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
}

This is a new function that we are creating called “awesome_menu” (you can change it to whatever you like) that will output our new nav menu. The “menu-header” (you can change it to whatever you like) is the div class that we will use to style the new nav menu in our custom.css file (or style.css for other theme users).

add_action('thesis_hook_before_header', 'awesome_menu');

This line tells Thesis to “hook” or add, our new nav menu, called “awesome_menu” to the position before the header.

I could go into more details on Thesis Hooks, but it has already been explained thoroughly by the following (You should bookmark these pages for future use):

Sugarrae’s Thesis Hooks for Dummies
Official DIY Themes Guide to Hooks
A List of Official Thesis hooks
A Visual Guide to Thesis Hooks

Now you can easily add as many nav menus as you want, wherever you want, by duplicating the code above and changing the following highlighted areas. Just for safe measure, we will do another nav menu that we will put at the top of our website:

Thesis Nav Bar Customization with WordPress 3.0

This code will add a nav menu (the web 2.0 style navigation that’s so popular) to the top of a page (before the header and/or default Thesis nav menu):

add_theme_support('menus'); //If you have already enabled your theme to support
//the new WordPress 3.0 menu, you do not have to add this line again, just comment it out
register_nav_menu('secondary', 'Secondary Navigation');
function another_menu() {
wp_nav_menu( array( 'container_class' => 'anothermenu-headerclass', 'theme_location' => 'secondary' ) );
}
add_action('thesis_hook_before_html', 'another_menu');

Wasn’t that easy? All we did was register (create) another menu called “Secondary Navigation” in our custom_functions.php that will appear in our WP admin dashboard, called the menu “another_menu” that can be styled with the css class “anothermenu-headerclass” and “hooked” (positioned) it before the html starts on the page (before everything else). The important thing to remember when creating navigation menus is that the “theme_location” (in this case, “secondary”) must match the register_nav_menu value (in this case, “secondary”).

These are just some basic and simple codes to get you started on customizing and adding additional nav menus to your theme within the new WordPress 3.0 dashboard. For more on functions and values that you can use to further customize your nav code, you can refer to the Function Reference for WP Nav Menu.

That’s all there is to it!

And if you thought that was hard, you should be happy. With WordPress 3.0, this is considered an “easy” way to create and customize nav menus from within the WP admin dashboard.

Setting up the Thesis theme to use WP 3 menus was the “hard” part. But you only have to do it once and you’ll be set to customize your new navigation menus however you’d like them. To change your navigation links, all you have to do is log in to your admin dashboard, go to the “menus” tab under “appearance”, and add/remove links, categories and pages. You will see the changes to your new nav bar(s) instantly on your website. Really. It’s that easy.

Add Theme Support for Post (Featured) Thumbnail Image

To add post and page thumbnail (now called “Featured Image” in WordPress 3.0) support to themes, just add this piece of code to your custom_functions.php file within your Custom Thesis folder. For most users, the file is located at: wp-content/themes/thesis_17/custom/custom_functions.php)

// ADD THEME SUPPORT FOR POST THUMBNAILS FOR WP 2.9.0+ AND THESIS 1.7
add_theme_support( 'post-thumbnails' );

Although adding featured post image support is not a WP 3.0 feature (it has been available since WordPress 2.9.0), the feature still has to be “turned on” for Thesis 1.7 and lower versions. This might not seem like an important feature if you are using Thesis’ native post thumbnail images to handle thumbnails, but it will become important for our next tutorial on creating related posts with images – without plugins.

Users can add a featured thumbnail image when adding or editing a post or page in the WP admin dashboard. For those who do not know what they are missing, here is a screenshot of the default WP admin UI to Add New Post without post thumbnail support in a theme (located on the right hand side of the add post view):

Default Thesis Theme Add Post Does Not Support Featured Post Image Thumbnail

And here is the Add New Post section with featured post thumbnail image supported added to a theme:

Add Featured Post Thumbnail Image Support to Thesis Theme

Enable Background support for easy Thesis Customization

Just add the following code snippet for the option to control background images and colors from within the WordPress admin dashboard:

add_custom_background();

If you found this post useful or if you find errors in the code, please let me know by commenting below. I love WordPress 3.0’s new user-friendly features. If you have more customizations to share, please do so below!

If you enjoyed this article, get email updates (it's free).

← Older Posts

Newer Posts →

Share |