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.

<?php
// Add a second menu
register_nav_menus( array(
	'secondary' => __( 'Top Menu (Above the Header)', 'yourtheme'),
	'primary' => __( 'Primary Menu', 'yourtheme' ),
 ) );

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

				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>

Below this line add

	<!-- Begin secondary menu #access2 -->
	<nav id="access2" role="navigation">
		<?php // This is where the menu is added
			wp_nav_menu( array('container_class' => 'menu-top',
			'theme_location' => 'secondary', 'fallback_cb' => '') ); ?>				
	</nav><!-- end of #access2 -->

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.

/*
Theme Name: My Menu Theme
Theme URI: YourThemePage.com
Author: Your Name
Author URI: YourSite.com
Description: A Twenty Eleven child theme secondary menu 
Version: 1.0
License: GNU General Public License
Tags: dark, light, white, black, custom-header, custom-menu
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");

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.

/*------------------------------------------------
The second navigation menu
------------------------------------------------*/
#access2 {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#252525, #0a0a0a);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
	background: -webkit-linear-gradient(#252525, #0a0a0a);
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 0;
	width: 100%;
}
#access2 div { margin: 0 7.6%; }
#access2 ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 -0.8125em;
	padding-left: 0;
}
#access2 li {
	float: left;
	position: relative;
}
#access2 a {
	color: #eee;
	display: block;
	line-height: 3.333em;
	padding: 0 1.2125em;
	text-decoration: none;
}
#access2 ul ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 3.333em;
	left: 0;
	width: 188px;
	z-index: 99999;
}
#access2 ul ul ul {
	left: 100%;
	top: 0;
}
#access2 ul ul a {
	background: #f9f9f9;
	border-bottom: 1px dotted #ddd;
	color: #444;
	font-size: 13px;
	font-weight: normal;
	height: auto;
	line-height: 1.4em;
	padding: 10px 10px;
	width: 168px;
}
#access2 li:hover > a,
#access2 ul ul :hover > a,
#access2 a:focus {
background: #efefef;
}
#access2 li:hover > a,
#access2 a:focus {
	background: #f9f9f9; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
	background: -o-linear-gradient(#f9f9f9, #e5e5e5);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
	color: #373737;
}
#access2 ul li:hover > ul { display: block; }
#access2 .current_page_item > a,
#access2 .current_page_ancestor > a {
font-weight: bold;
}

62 thoughts on “Add Second Menu to Twenty Eleven Theme

  1. Andy DeBrunner

    Thanks so much for this! Super-easy with your help. I did break my site, however (no backups either!!), but it was my own stupid fault. After I got it back up again, I followed your directions exactly and have the menu working fine on my site. Now all I gotta do is develop a boatload of content. Thanks again for taking the time to do this. It was a HUGE time-saver.

  2. Pingback: Jak dodańá drugie poziome menu w szablonie Twenty Eleven | WPBloger

  3. Lizm

    This is excellent and clear, thank you!
    I put a second menu at the very top right, above the Searchbox in Twenty Eleven, and I’ve been having some weird spacing issues in the way it renders on the iPhone. Either it makes the contents a bit too wide, or it gets bumped down to sit right above the main menu!

    It’d be great if you could write about iPhone rendering in Twenty Eleven sometime :)

    1. Zeaks

      Thanks Lizm, glad you found it useful. Unfortunately I’m one of the few people that don’t own a cell phone of I pad to test it out on. Maybe there’s a website that can render the theme for testing though, I’ll look into it.

  4. Fernando

    Hello! I have follow your instructions and added a secont menu to my page (www.naogu.es). I have then edited some of the css code in order to customize the secondary menu but I must have broken something because now, when I get to the site using Chrome there is some white space between the header’s image and the main menu which wasn’t there before. Sometimes you don’t even see the space I am talking about, but when you mouse over the menu it suddenly appears.

    As I said before, it’s only happening with Chrome. I have inspected the code but I am far of being an expert so any help would be greatly appreciated.

    I look forward to hearing your comments,

    Thank you very much!

  5. Fernando

    Nop…the second menu is still there. Top right of the header you can read “Mi cesta” (My cart).

    If you use Google Chrome, you see it right most of the time, but when you place the cursor over the main menu, it goes down opening a white space and making the header higher.

    If you can’t see it let me know and I will try to send you a printed screen.

    Thank you very much for your help!

    1. Greg

      Hi,

      Thanks for the tutorial. I’ve found it a great help. I am having this problem also in chrome. A space opens up when you rollover one of the menus.

      Has a solution been found or what to look for to rectify this?
      It seems fine in Safari, but not in Chrome…

      Many Thanks,

  6. Hethr

    Hi

    Try as I might I can’t get past the first step (functions.php code insert).

    Where ever I copy your code onto my functions.php I get this message “Parse error: syntax error, unexpected ‘<' in /export/home/httpd/sites/216.213.18.2/htdocs/wp/wp-content/themes/allisongroup/functions.php on line [insert line number for first piece of pasted code <?php]"

    Code here: http://bit.ly/xPcmqM

    Any suggestions about specific placement for your code or what's wrong with my functions.php? My ability is with html and css not php.

    Thanks!! I hope to hear back from someone as this would be really useful.

    PS.
    I've already created a child theme of twenty eleven called "allisongroup". I assume you want us to edit 'yourtheme' with our child theme name. For newbie php coders this could be made clearer.

    1. Zeaks

      Hi Hethr. I was unable to find any code given from this post in the functions you linked. It’s also much easier to post to http://pastebin.com/ but, this code is meant to be in a child theme, from the looks of your functions, thats the functions.php from Twenty Eleven, or a copy of it.

      Otherwise, remove the

      1. Hethr

        Yeah, you didn’t see your code because I had to remove it. So like I said – anywhere I put it I end up with an error parse. I also tried removing the “<", "<?" and "<?php" but keep getting error parse.

        Now – this function.php part of a child theme but I didn't do any editing to it, I just copied the original twenty eleven functions.php into my child theme…. so what does one have to do to make their functions.php a child theme php?

        Thanks for your quick and insightful thoughts!

  7. Zeaks

    @Hethr your child theme functions only needs to contain what you want. It will already do everything the parent theme does. Create an empty functions.php and past the code as shown into it and use that for your child theme.

    I’m surprised you were able to copy the original functions.php and not get errors since you would have duplicate functions.

    1. Hethr

      Thanks Zeak

      Well, I got a second menu up but I’ve lost “background”, “header”, “sidebars”….a lot of functionality and custom work.

      I guess there is some deeper conflict with my child theme.

      Thanks for all your help and I’ll let you know if I sort it out.

      H

      1. Zeaks

        Hi Hethr. Your theme should not loose that functionality by removing the content from functions.php.

        After taking a look at your site (if it’s the one linked to your name) it looks like you basically copied twenty Eleven theme and renamed it , I don’t see the import call in style.css. This is not the proper way to create a child theme. and the reason your theme broke when you removed the code from functions.php.

        http://zeaks.org/child-theme-basics/

    1. Zeaks

      Hi Manas, this was meant to be used in a child theme. I see you are using NomNom on your site, which is a child theme, but it also uses the same code I’ve posted here for its second menu.

      If you are trying to add a third menu, just replace all occurrences of access2, with access3, and change the name of the menu. The position of the menu depends where you place the code in header.php. You can even add it to your footer if you want.

      1. Hethr

        The position of the menu depends where you place the code in header.php. You can even add it to your footer if you want.

        Really glad you asked about this Manas. I had assumed it was a CSS thing. Zeaks thanks for your thoughts above, working on it.

        H

  8. Charlotte

    Great tip!

    I have managed to get the functions.php ok and the header.php maybe ok, but I do not know where to get the styling=placement of the new menu correct in the layout.css. There are so manu statements regarding menus and I do not know how much I need to replicate. I just need to get a few menuitems at the very top of the page, with no submenus.
    Please check if I need a separat DIV to cover the new menu in header.php:

    ‘menu-header’, ‘theme_location’ => ‘topmenu’, ‘fallback_cb’ => ‘digi_no_nav’ ) ); ?>
    ‘menu-header’, ‘theme_location’ => ‘primary’, ‘fallback_cb’ => ‘digi_no_nav’ ) ); ?>

    Because right now the old and the new menu are just placed at the same palce on the page…
    Thanks
    Charlotte

    1. Zeaks

      Hi Charlotte. You should create a forum topic so I can help you better. The tutorial is pretty straight forward, made so you can copy/paste.

      Please read the note above on posting code in comments, and there is a button for posting code on the forums. :P

  9. britain

    thank you for this tutorial, but if you want a second menu under the menu first, how, I would like to put in the icons social.
    http :/ / digitalraindrops.net/2011/08/twenty-eleven-social-icons-in- navigation /
    Thanks

  10. Tony

    I have tried this several times but I cannot get the menu to show up. I am getting it to register. I have assigned some pages to it, but it is not appearing anywhere on the page.
    Anyhelp you can offer would be MOST welcome! Thanks.

      1. Le

        Hi Zeaks,

        Yes, I added pages to all 3 menus. Only the footer menu items are displaying on the website. Here’s a pic of the wp admin menu area:

        I’m using a digitalraindrops.net child theme and I wanted to add the 3 menus codefrom http://digitalraindrops.net/2011/09/twenty-eleven-three-menus/ to the child theme I’m using. However, when I went to add the 3 menus code to the .php files, the code was already present. I will say that I did not check ALL of the files that needed modifying in order to make the 3 menus display on my site.

        Still, in wp admin>Appearance>Menus I have the option for 3 menus was loaded so I believe that the child theme I’m using already included the 3 menus coding on my site but only the footer menu is displaying.

        1. Zeaks

          Hi Le. The menus can still show up in Appearance > Menus, but if you haven’t added the menus to the template files, then they won’t appear on the front end.

          Please use the forums for questions that are not directly related to the post.

          I will say that I’d need to see your theme and code in order to answer your question.

    1. eeekoy

      Hi I think you are missing something,
      … after you activated the child theme there is one more step and that is to go to the appearance > menu and add your menu
      on this select box.. ( Top Menu (Above the Header) )

      also this is the code to display your menu anywhere on your page
      ‘menu-top’, ‘theme_location’ => ‘secondary’, ‘fallback_cb’ => ”) ); ?> ..
      and one last thing. this step by step tutorial is only effective if your theme/folder name is twentyeleven. if you have different file name you will need to tweak a little this copy paste tutorial.

      I hope it helps.

      1. Zeaks

        Hi Eekoy

        I did say “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.”

        The theme can be called almost anything except Twenty Eleven because the tutorial explains how to add it to a child theme of Twenty Eleven which is the proper way to make changes.

        Simply adding that line “anywhere on your page” would not work.

        Thanks for your input.

      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…

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

  12. 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?

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

  14. 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 *

*
*