For our LifeSignPress.com web site we have used a nice template by cssmayo.com called Creative by Nature.
Recently we wanted to add a link in the navigation menus so we opened up the Custom Menus for the site and then saw that it did not support the new WordPress 3.0 custom menus.
All is not lost – it is easy to add in the same functionality to this older template without doing many changes and with no CSS style changes.
Here is how I changed the Creative By Nature v0.1 template to use the WordPress 3.0 custom menus,
1) Open your site and select the menu in a browser and then right-mouse and view selection text. Print this out. This is to just get an idea on the div, ul, il, a and spans that are used.
The template we’re using had a div wrapper that was an id of “navigation” and then a ul and then all the a hrefs but the link text was in a span. Now this navigation ID and the span is important as you need to mimic this in the new WordPress 3.0 custom menu unless you plan on changing the CSS style sheet.
2) Firstly find where the navigation menu is located. It will probably be in your template in a file called header.php or a similar name and now find where the menu is generated. It will be a function that is echoed or something similar e.g. we had,
<div id="navigation">
<ul>
<?php echo _generate_navigation(); ?>
</ul>
</div>
The “_generate_navigation” is in the theme’s functions.php file. The menu generation will be between these two files i.e. your theme layout code file and your theme functions code file.
3) Now comment or remove the old code that generated the navigation menu and add in your replacement as below, setting the container_id to be the same as the div ID and if needed also wrapping the link text in a <span></span> by setting the link_before and link_after variables e.g.,
<?php wp_nav_menu(array('menu' => 'header_menu',
'container_id' => 'navigation',
'link_before' => '<span>',
'link_after' => '</span>' )); ?>
In our example that mimics the html that is generated for the same CSS to be used thus no need to change the CSS stylesheet for the theme. For the defaults for this wp_nav_menu() function see here – http://codex.wordpress.org/Function_Reference/wp_nav_menu
4) In the functions.php file for this template you will have to add the following code,
add_action('init', 'register_custom_menu');
function register_custom_menu() {
register_nav_menu('header_menu', __('Header Menu'));
}
You can add as many menus as you like though you would use register_nav_menus() e.g.
...
register_nav_menus( array( 'header_menu' => 'Header Menu',
'footer_menu' => 'Footer Menu'));
...
and you can edit out the old _generate_navigation() function if you want. Note that if you want to keep both < 3.0 navigation menus and 3.0 custom menu features at the same time then keep everything and in the header file or in the functions.php you could add a test e.g. if ( function_exists( ‘wp_nav_menu’ ) ) and then use the new 3.0 menus or else use the theme’s old code if that function_exists() returns false.
