Add Second Menu to Twenty Eleven Theme

Adding a secondary menu to Twenty Eleven theme is really easy. This feature is available in my NomNom Child Theme and I’ll show you how I did it. We’ll be doing this by making a child theme and creating 3 files.

second-menu-twenty-eleven-theme

Create a folder and pick a name for your theme.
Create a style.css file
Create a functions.php file
Copy header.php from Twenty Eleven theme and add it to your theme folder.

Upload everything to wp-content/themes, all files should be inside your new theme folder.
We will start off by adding the function to create a new menu. Open functions.php and add this to it.

Save and close functions.php. This bit of code registers a second menu.
Next we need to add the code to the header in the proper place to display the menu, so open header.php that you copied from Twenty Eleven and around line 76 find

Below this line add

Save and close header.php. This is basically a copy of the primary navigation code with the ID access2 used instead of just access. We’ve also used fallback_cb which as it says on the codex “Given a theme_location parameter, the function displays the menu assigned to that location, or nothing if no such location exists or no menu is assigned to it. ” This will prevent the new menu from listing pages as most people will not want the top and bottom menus to show the same menu items. If we create a menu and add items to it, it will display them, otherwise it will not appear.

The last thing for us to do is style the menu, so open your style.css file. Since we’re creating a child theme add this top the top of the file.

This tells WordPress that this is a child theme of Twenty Eleven. You’ll probably want to select a different name and URL for yourself.

Now below that add the CSS below for the menu and save style.css. This is basically the same CSS the original menu uses, but using our new #access2 ID.

Log into your admin, appearance > themes, select your new child theme and check appearance > menus, create and add a new menu to your new menu area.

62 thoughts on “Add Second Menu to Twenty Eleven Theme

      1. Erin

        Thanks for your reply. I activated the second menu and refreshed the page (duh) and it showed up with the proper css styles BUT it looks like I have hidden it behind the header somehow… I’m pretty sure that’s the problem. I guess I just need to sort through the css until I find what I did…

  1. Pingback: Rex » How to add 2nd menu in twenty eleven theme

  2. Andre Perez

    Hello. Thank you so much for this! The menus look great but when I plugged it in, the image in my head moved over so that now there is only white between the top and bottom menu and the header image i to the right of both menus. What did I do? and How do I fix the placement of the header image?

  3. Pingback: How to add 2nd menu in twenty eleven theme | REx

  4. Clive Hetherington

    Hi Zeaks, thanks for this page. I’m trying to get the second menu to work at the very, very top of the page. I can get it placed there but it’s not responsive as a menu. Menu items don’t respond to being clicked and sub menu’s don’t open. I’d appreciate any help thanks.

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*