How to add Backwards Compatible WordPress 3.0 Features to Your Theme

Posted in WordPress • Posted on 5 Comments

backwards compatible wordpress 3.0 menu nav backgroundIf you’re looking for a way to take full advantage of the new WordPress 3.0 custom menu and background features, then keep reading. Learn how to integrate the WordPress 3.0 custom menu and make it backwards compatible for older WordPress versions. Also learn how to implement the new “header background image”; all with detailed examples, codes, and pictures.

Add WordPress 3.0 Menu Navigation (and make it backwards compatible!)

I’ve read a couple different tutorials on how to implement the new menu navigation, but none of them have been detailed or shown how to write backwards compatible code. So let’s do this right. Let’s start with the code, this should be pasted inside the “functions.php” file inside of open PHP code.

if (function_exists('wp_nav_menu')) {
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
'Your-Menu' => __( 'Your Menu' ),
)
);
}
}

First, we have WordPress check to see if the function “wp_nav_menu” exists. We do this essentially to check if they’re using a WordPress version that supports the custom menu function, 3.0+. If the function does exist, the rest of the code registers your new menus. This makes your code backwards compatible for people still using older versions of WordPress. Although there are more steps you have to take to make your theme completely backwards compatible, but I’ll cover those steps in a second.

Next, if you look at the line that says ‘Your-Menu’ => __( ‘Your Menu’ ), this is where you will assign the name for your menu. You can also register multiple menus for different areas in your WordPress theme. For instance, if you have a “page menu” and a “category menu”, you would want to register two separate menus. This is done by simply duplicating the “Your-Menu” line, here’s an example:

if (function_exists('wp_nav_menu')) {
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
register_nav_menus(
array(
'page-menu' => __( 'Page Menu' ),
'category-menu' => __( 'Category Menu' ),
)
);
}

As you can see from this example, we’ve registered two different menus. Now, when a user logs into their wp-admin page and clicks on “appearance / menus” they’ll see this box, where they can create and add menus to each registered and named menu location.

register multiple=

How To Integrate Custom Navigation Menus Inside Your WordPress Theme

In the following example, the code will first check if the user is using WordPress 3.0, if so it will use the “Page-Menu” 3.0 menu that we’ve registered previously in the functions.php. If not, it will default to the standard “wp_list_pages” syntax. You can also use this for a category bar by replacing “wp_list_pages” with “wp_list_categories”. Place this bit of code inside your theme wherever you want your specific menu(s) to appear:

if(function_exists('wp_nav_menu')){
wp_nav_menu( array( 'theme_location' => 'Page-Menu', 'container_class' => 'menuclass') );}
else{
wp_list_pages('title_li=&depth=0');
}

If you look at the area of code that says ‘container_class’ => ‘menuclass’, this is where you can set the CSS class ( “menuclass” in this case ) for the menu.

Using this code will ensure that you’ll have custom menus for WP 3.0 + users, and default to older WordPress standards if they’re using a sub 3.0 version. This is essential for anyone planning to release a theme to the public.

Adding Custom Background Images And Colors To Your Theme

custom background wordpress 3.0 feature

The background feature in WordPress 3.0 lets you easily change the hexadecimal color of the background of your theme, or upload an image as the background. It also allows you to set how the background image is displayed. For instance, you can set the image to repeat horizontally, vertically, align left, center, right, scroll or fixed. This new functionality is awesome and very easy to implement into your theme. This code is fully backwards compatible with older versions of WordPress. If you were to just use “add_custom_background();” then your theme will error with any other version than 3.0. Add this code into your functions.php

if ( function_exists('add_custom_background') ) {
add_custom_background();
}

That’s it! Now when you log in, if you’re using 3.0+, you’ll see a “background” link under the Appearance tab. I hope you can take full advantage of these new WordPress 3.0 features, making them fully functional AND backwards compatible for all of your users.

2 Written ArticlesWebsite

I'm Josh Katherman from ThemeSheep. We love creating beautiful WordPress themes. Follow us on Twitter or subscribe to our RSS to get notified when we release new themes!

5 Comments Best Comments First
  • Chris

    Monday, October 11th, 2010 21:50

    1

    I’m trying to incorpotare my own sprites menu after activate the wp_nav_menu() function but it does not appear. What can I do?Doing the example you post here It must to work? becouse in my case is not possible.
    Thanks and I’m sorry my English.

    0
  • Drew

    Thursday, March 31st, 2011 00:45

    2

    Hi I am no php expert…

    I’m having trouble adding this code:

    if(function_exists('wp_nav_menu')){
    wp_nav_menu( array( 'theme_location' => 'Page-Menu', 'container_class' => 'menuclass') );}
    else{
    wp_list_pages('title_li=&depth=0');
    }

    Is this meant to be put in container as well like so:

    'Page-Menu', 'container_class' => 'menuclass') );}
    else{
    wp_list_pages('title_li=&depth=0');
    } ?>

    Because this broke my site and made it just a white blank page. However when I don’t use the then it literally shows the text I have entered… Would you share how to add this code? (I have it in the right place – the text is appearing right where my menu should appear). Thanks :)

    I appreciate it.

    Best Regards,

    Drew

    0
    • Drew

      Thursday, March 31st, 2011 00:49

      3

      Sorry the code didn’t appear in the comment properly.

      0
  • Abhash Bikram Thapa

    Sunday, August 7th, 2011 20:28

    4

    Thanks for the helpful article. I just generated myself new menu which was of no use in my old theme.

    0
  • auntypizza

    Tuesday, March 20th, 2012 05:20

    5

    Thanks, but this chunk of code just gives an error

    0
  • auntypizza

    Tuesday, March 20th, 2012 05:20

    5

    Thanks, but this chunk of code just gives an error

    0
  • Abhash Bikram Thapa

    Sunday, August 7th, 2011 20:28

    4

    Thanks for the helpful article. I just generated myself new menu which was of no use in my old theme.

    0
  • Drew

    Thursday, March 31st, 2011 00:45

    2

    Hi I am no php expert…

    I’m having trouble adding this code:

    if(function_exists('wp_nav_menu')){
    wp_nav_menu( array( 'theme_location' => 'Page-Menu', 'container_class' => 'menuclass') );}
    else{
    wp_list_pages('title_li=&depth=0');
    }

    Is this meant to be put in container as well like so:

    'Page-Menu', 'container_class' => 'menuclass') );}
    else{
    wp_list_pages('title_li=&depth=0');
    } ?>

    Because this broke my site and made it just a white blank page. However when I don’t use the then it literally shows the text I have entered… Would you share how to add this code? (I have it in the right place – the text is appearing right where my menu should appear). Thanks :)

    I appreciate it.

    Best Regards,

    Drew

    0
    • Drew

      Thursday, March 31st, 2011 00:49

      3

      Sorry the code didn’t appear in the comment properly.

      0
  • Chris

    Monday, October 11th, 2010 21:50

    1

    I’m trying to incorpotare my own sprites menu after activate the wp_nav_menu() function but it does not appear. What can I do?Doing the example you post here It must to work? becouse in my case is not possible.
    Thanks and I’m sorry my English.

    0

Comments are closed.

54.166.65.9 - unknown - unknown - US