The Second Menu

We have all seen the websites with a secondary menu at the top with the more boring page links, what we will do in this part is to create a secondary menu in our twenty ten child theme, lets stop and think about what we want the menu to look like, it would look silly if it had the same style as the main menu so it will need a style of it’s own.

If we follow the steps in this tutorial we will be able to add a second menu bar to a WordPress theme, have looked at theme locations, which is the code that injects the menu into a themes header, and the styling of a new navigation bar. 

We will need to do the following steps, let WordPress know we want a new menu location in the functions.php file, create a new and different style for this menu and add the menu to the header.php

Menu Location

In WordPress 3 there has been a change in the way the menus are constructed, we now have a lot of new ways to create unique menus and deliver options to our visitors, a part of the new menu suite is the menu locations.

To add a new menu location in our child theme we need to add a call in functions.php, we will add this call to be run after WordPress has run the theme setup.

As we do not have a functions.php file in our child themes folder, we will just open our favourite editor create the file in our child themes folder and add the code below and save our functions.php.

<?php

/** Tell WordPress to run child_theme_setup()
when the 'after_setup_theme' hook is run.
*/
add_action( 'after_setup_theme', 'child_theme_setup' );

/** This function will hold our new calls and over-rides */
if ( !function_exists( 'child_theme_setup' ) ):
function child_theme_setup() {

    /*
    We want a Second Navigation Bar right at the top
    This theme uses wp_nav_menu() in two locations.
    */
    register_nav_menus( array(
        'secondary' => __( 'Top Navigation', 'twentyten' ),
    ) );
}
endif;

The first part of the php code ‘add_action’ tells WordPress when to run the function and the functions name.

The second part tells WordPress if we have not already run the function ‘child_theme_setup’ in the parents functions.php then run it here, we have the call ‘register_nav_menus’ to add our secondary menu.

Styling our Menu

As we said in the introduction we want our top menu with a different styling, to do this our new menu will need it’s own identity and a place to live, we will call it pagemenu and it will live in a new div (container) in the header.php, all we have done is copied the menu section from the parents style.css and renamed the elements to accommodate our new navigation bar.

We will open our style.css in the child theme and add the following styles.

/* Start Second Menu support */
#pagemenu {
    display: block;
    float: left;
    margin: 5px 0px;
    width: 940px;
    height: 30px;
    border-bottom: solid 1px #333;
}

#pagemenu a {
    color:#000;
    line-height:30px;
    margin:0;
    padding:0 10px;
    text-decoration: none;
    text-align:center;
}

#pagemenu .page-header,
page-menu.menu {
    font-size: 13px;
    margin-left: 12px;
    width: 928px;
}

#pagemenu .page-header ul,
.page-menu ul {
    list-style: none outside none;
    margin: 0;
}

#pagemenu .page-header li,
.page-menu li {
    float:left;
    position: relative;
}

#pagemenu li:hover > a,
#pagemenu ul ul :hover > a {
    color:#FFF;
    background:#000;
}
#pagemenu ul li:hover > ul {
    display:block;
}
#pagemenu ul li.selected >a,
#pagemenu ul li.current_page_item > a,
#pagemenu ul li.current-menu-ancestor > a,
#pagemenu ul li.current-menu-item > a,
#pagemenu ul li.current-menu-parent > a {
    color: #777;
}

* html #pagemenu ul li.selected a,
* html #pagemenu ul li.current_page_item a,
* html #pagemenu ul li.current-menu-ancestor a,
* html #pagemenu ul li.current-menu-item a,
* html #pagemenu ul li.current-menu-parent a,
* html #pagemenu ul li a:hover {
    color:#777;
}
/* End Second Menu support */

It may look a bit complicated at first but all we have done is styles our pagemenu and the other elements, now we have the basic structure and we are working on a local copy, we can try out different colors sizes that suit our theme, and re-use this menu in our other themes.

Template Part

We could just add a code call to the header.php for our new menu, but we are going to look at using a template part, this new call in WordPress 3 is like the include call, but a little more sophisticated, we will create a new file called ‘navigation-2.php’ and add a little code to load our menu.

We can see in the code the new elements ‘page-header’ and  ‘page-menu’ we created on our style.css, we can also see the theme location is secondary, and a new argument in the array, ‘fallback_cb’ => ” this tells WordPress not to load the default menu if we have not created a new menu. 

<?php /* Start add our second page menu */ ?>
    <div id="pagemenu" role="navigation">
        <?php wp_nav_menu( array( 'container_class' => 'page-header', 'menu_class' => 'page-menu', 'theme_location' => 'secondary', 'depth' => 0, 'fallback_cb' => '' ) ); ?>
    </div>
<?php /* End lower page menu */ ?>

Now we need to add our new menu to our child theme, to do this we ‘copy not cut’ the header.php from the ‘twentyten’ theme folder to the ‘twentyten-template’ theme folder, open up the new header.php and find this line ‘<div id=”masthead”>

We will now add just two lines of code to load our new page menu, remember when we named our template part navigation-2, WordPress will use two parameters (navigation and 2) to find the file, we will be adding a third menu later in the series:

<?php /* Get our second navigation bar */ ?>
<?php get_template_part( 'navigation', 2 ); ?>

If we now run our theme we will not see the new menu, that is because we have not created it, login to your local WordPress and in the right hand menu, go to Appearance > Menus and create two menus, assign these to the Theme Locations like in this screenshot.

nav-1

Now when we visit our local website we will see our new menus.

nav-2

Notice

Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.

All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

We hope you will benefit from our tutorials Membership to this website is not required, however the downloading of some themes and files is restricted to site supporters.

You can register for a 10 year ‘Free Supporters Account’ from the members page which will give you access to the source files and free themes, as we introduce premium themes and content some of these these will only be downloadable with a subscription, any revenue from subscriptions is used to support the site costs.

This website is a tool to support and promote WordPress and Artisteer, please support, share and give credit for any benefits you gain from the tutorials on this website.

41 thoughts on “The Second Menu

  1. Thank you very much for this. I’ve wondered for a while how to add a second menu to the 2010 theme, and now I know. I didn’t even have to google for it. I just found your site by accident. I love when that happens, don’t you?

    Consider your site bookmarked by me. Thanks!

  2. Re: “We could just add a code call to the header.php for our new menu, but we are going to look at using a template part,”….I’m not clear on what you mean by this.

    Was there any reason why you chose to use the template over using the header.php? Does it give better functionality, or was it just a personal preference.

  3. There are a few reasons why we are using template parts:

    First: they are new and the tutorials are about exploring the WordPress functions.
    Second: template parts can be one or several lines and this way keeps the changes to a minimum
    Third: the template parts are easy transferable from theme to theme without having to search files.
    Fourth: if we name them well that will be easy to remember, navigation-2, navigation-3 etc:
    Finally: we can add a large collection of many template parts with a theme, and add any one of them with one line of code.

    So we could add hundreds of lines of with a handfull of calls, and reuse them without copying and pasting them between themes.

    David

  4. Pingback: Adding a Searchbox Image |

  5. Hey David,

    I am a self taught coder and on a mission to learn WordPress(wish I would have done this years ago) I have just started doing your tutorials and congratulate you on what you are doing.

    What I like to do if get right into the php functions so I read up on,

    get_template_part (), wp_nav_menu() and register_nav_menus()

    So my suggestion would be to add a link to the functions used in your tutorial to the list at WordPress so we can click and read about them in more detail. I know not everyone wants to do this but when I read about the functions in conjunction with your post I quickly learned how to add a menu anywhere and style it with css.

    Thank you and keep up the great work.

    //Greg – Australia

    • Hi Greg,
      Thanks for the feedback, I did not link back to the WordPress technical details of the functions, I did ask a few people if I should.

      The general answer was that people found the technical information hard to follow and this would often stop them from trying something, and may divert them from completing the steps in the tutorials.

      I am still working on the next sections and will add a reference page at some point, I am like you and will google for more information.

      When I started I did not like the WordPress codex answers as the examples were never what I wanted, but once you have an understanding of the structures they are more help.

      David

  6. Hi there, good stuff, not too tricky, yet. Here’s my feedback.

    The first snippet of code has a syntax error, it does not finish with ?>

    In the Template Part we are instructed to create 2 menus and assign locations. Menu already exists, it’s not intuitive to delete this and create a new one called MainMenu whilst adding TopMenu. Also, you make a huge leap the instructions! Nothing is said about going to the Pages section and adding pages (Contact Us, About, Support), let alone how to order them within the new navigation. Without these steps, there is no TopMenu navigation.

    I may be a bit picky in asking for everything to be explained, but this is the kind of frustration I run into when the leaps require technical steps that are beyond me.

    I am your lowest common denominator.

    Cheers,
    Brad

    • Hi Brad,
      Thanks for the feedback, the closing ?> is not required in the functions.php, if you check the end of the parents functions.php you will see the same.

      You can create any number of menus and assign them as you want, I did not think that the install came with any data other than one page and one post, which a lot of people will delete, I did not realise that the MainMenu was created when you install WordPress, I will update the post later.

      Thanks, as feedback is always welcome, I prefer that to anyone feeling they do not understand and walking away.

      I will look for a you tube video and add a link, rather than adding to the post, I try to keep them within scope.

      • Re: the menu, After doing some more tinkering with menus I find you are correct. I’ve been tinkering with other tutorials and I must have added a menu and forgotten. After reinstalling my local copy, there is no default menu.

        Re: the closing ?>. I forgot that it’s part of a larger entity and closed in another file.

        Cheers,
        Brad

  7. Hi. Great Tutorial and I got the menus to work as described.

    However, using the mainMenu, subpages seem to have been lost in the menu rollover.

    How do I get them to appear again?

    • Hi Frankie,
      Not sure why that would be happening, the main menu should have the dropdowns, the top menu is only top level items.

      If you visit the downloads page, left column there is a category ‘Tutorial 2’, download the ‘Tutorial 2 Starting Theme’.

      This is the theme from the first tutorial set, you will find all the working files in the download, so you can compare the placement of your code.

      HTH

      David

  8. thanks for the great tutorial, I successfully added it to one blog and it was a very simple process. I am trying to add it to my personal blog and it wont work 🙁

    It keeps adding my secondary nav to the primary nav. Do you have any ideas what would make it do that?

    • Hi David,
      Work back through the tutorial again, it is likely a syntax error, not sure what you mean about adding the secondary to the primary?

      The theme is downloadable from the downloads page, tutorial two starting theme.

      Regards

      David

      • ok Ill try it again, what I meant was all my pages are being added to my primary menu despite my creating the second menu. after I complete all the steps I do have the second menu option but when I create the second menu and save it it doesnt want to save, weird.

        • you were right! it was something in my css file I think. I made a new child theme with the original twenty ten css file and it worked. Thanks for this tut!

  9. Pretty Cool Guys!
    This step has gone quite smoothly, can’t wait to see what else you’ve got in-stored 🙂 Going there right now and I will let u know as I go… If this keeps on going, you’ll certainly deserve a gift at the end.
    Nice job!

  10. The last step didn’t work for me.

    I installed WP 3.01 today.

    Unlike your screen shot it came out of the box with a horizontal menu beneath the header picture.

    In Appearance > Menus my Theme Locations only had one menu : Primary Location

    When I created the two menus I was told that my theme only supports one menu.

    I didn’t have all of the things to add to my TopMenu that you did.

    When I went to look at the theme there was no second horizontal menu and the horizontal menu it came with was gone. When I swtiched to the child theme I had the out of the box horizontal menu

    • After switching to the child theme, when I go back to Appearance -> Menus I am getting the second menu in “Theme Locations”. I am getting the new menu on top, but the default horizontal menu vanished. Maybe you can add some written steps in addition to supplying the picture of Appeance->Menus?

    • Hi Max,
      I ama regular visitor to the WordPress.org forum, and this comment was the first I knew about it, they sure get through some questions every hour over there.

      It is often the way where something as simple as a missing space causes a problem, and you cannot see it for looking.

      Glad it is sorted.

      Regards

      David

  11. Got it working –

    I followed your instructions above exactly. You’ve made it easy. At first, however, it wasn’t working for me – not sure why, but I added the following to the first php command line in the template file “navigation-2.php”, which I then saved inside my child theme:
    /**
    *Template Name: navigation-2
    *Start add our second page menu
    */
    Because I figured maybe WP was having trouble to recognize it as a template. ??

    Next, I reviewed my functions.php in the child theme. I had simply added your code to already existing code I had placed there, which was:

    <?php

    function favicon_link() {
    echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”http://localhost/BHAKTIVEDANTAS-dev/public_html/favicon.ico” />’ . “n”;
    }
    add_action(‘wp_head’, ‘favicon_link’);

    ?>

    I noticed that your code was missing the php end tag after the ‘endif;’, so I added that.

    After saving my changes, I refreshed the home page and found that the second menu was showing up just beautifully. Very pleased.

    But after I added a couple of menu items to the new second menu and saved the menu, suddenly I was confronted with a blank page! Tried logging out and back in, and again faced a blank page! Had to log in via one of the child sites. Anyway, I decided I had tried to be too smart, so I deleted the php end tag from your code in the functions.php file. The blank page still appeared. Finally, I deleted that Template Name business from the navigation-2.php file, and the second menu is still showing up as it ought to, and now no more problems with blank pages on the admin side.

    Many thanks for the tutorial!

  12. I hate jump in but… I can’t get the menu above the twentyten header to show up. I am even more green than those here who say they are just starting. Thanks.

  13. WP3.1 – Everything seems to work OK. I created a bunch of pages, some with parent-pages. I wasn’t expecting cascading menu items to work on the Top Navigation Menu (they didn’t!). But in Primary menu, the expected cascading menu behavior stopped working.

  14. Just to clarify: the drop-down no longer works, and the child page menu item appears in the primary nav-bar alongside its parent instead of below.

    Now, if I remove the child-page from the menu, then it no longer appears alongside its parent. But it doesn’t appear in the dropdown either!

    What gives?

    • Solved (note to self: RTFM!)

      Okay… got it. I just learned that the WP3 custom menu system does not automatically apply parent->child menu items as defined when editing a page. The parent->child hierarchy must be explicitly redefined in the Menu Admin (by dragging the child placeholder just below and to the right of the parent placeholder.

      Now… to get the dropdowns working on my new top-nav menu!

  15. Thanks again. Thought I’d share what I did with it. I wanted to have three sections (to use Joomla terminology), each with it’s own page menu. Here are the child theme file mods

    in functions.php I register 4 new menus:

    register_nav_menus( array(
    ‘top’ => __( ‘Top Navigation’, ‘twentyten’ ),
    ‘section_1’ => __( ‘Section 1 Navigation’, ‘twentyten’ ),
    ‘section_2’ => __( ‘Section 2 Navigation’, ‘twentyten’ ),
    ‘section_3’ => __( ‘Section 3 Navigation’, ‘twentyten’ ),
    ) );

    …and add a function (self explanatory)

    function get_post_slug() {
    /* Function added to get current page/post slug
    * used in a switch to choose a specific menu */
    $post_data = get_post($post->ID, ARRAY_A);
    $slug = $post_data[‘post_name’];
    return $slug;
    }

    …in the child theme’s header.php (I didn’t use navigation-2.php)
    …the top menu:

    ‘page-header’, ‘menu_class’ => ‘page-menu’, ‘theme_location’ => ‘top’, ‘depth’ => 0, ‘fallback_cb’ => ” ) ); ?>

    …and choose the section menu depending on first char of slug

    ‘menu-header’, ‘theme_location’ => ‘section_1’ ) );
    break;
    case 2 : wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘section_2’ ) );
    break;
    case 3 : wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘section_3’ ) );
    break;
    default : wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ) ; /* Display the old twentyten primary menu */
    break;
    endswitch; ?>

    To use it, assign pages to menus in the usual way. But there has to be a reverse reference. That is why, in addition to assigning a page to a menu , we must find a way of assigning a menu to a page. For that we simply quick-edit the page and put a 1,2, or 3 in front of the slug. (not exactly elegant, but it is effective).

  16. Hi,

    This has worked great for me. I am wanting to change the color of the top nav bar to black but i must be having a silly moment because i can not find in any of the css code thats above any reference to the actual color of the nav bar? is it set to transparent or something?

  17. I would like to register a new sidebar (widget) that i will place on top of the content area just below the navigation bar for a banner ad. Can anyone please help me with this?
    Thanks in advance.

  18. Hi, Great tutorials. I am keen on learning how to create better websites with wordpress and was very interested when I found your lessons aimed at beginners like me. I am having trouble understanding where the following should go. I have tried many locations for it but nothing gives me the second menu.

    ‘page-header’, ‘menu_class’ => ‘page-menu’, ‘theme_location’ => ‘secondary’, ‘depth’ => 0, ‘fallback_cb’ => ” ) ); ?>

    I would love to get past this, I hate failure but just can’t get this right.
    (Thanks)

  19. Pingback: WordPress - Adding Second Menu - Designparc

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tutorials 2010

templates

For this series of tutorials we need to have a local WordPress setup, this will enable easy deployment of the theme files, this series will be added to over a few weeks, rather than one big set of files we … Continue reading

Read More