Add second menu to Twenty Twelve theme

Here’s a step by step guide to adding a second menu area to a Twenty Twelve child theme. This menu will act the same as the default menu on mobile devices and display below the header area.

If you don’t know what a child theme is you can read more about it on the WordPress Codex or read my own article on how to Create a WordPress child theme

Prepare the child theme

  • Create a Twenty Twelve Child theme or you can download a blank one Here (make sure to edit the top of the style.css file to reflect your own name and theme name)
  • In the child theme folder, create a directory called “js” (without quotes)
  • Copy from the Twenty Twelve folder, header.php and inside the js folder copy navigation.js
  • Create a file called functions.php
  • Upload functions.php to your child theme folder
  • Upload header.php to your child theme folder
  • Upload navigation.js to your child theme folder inside the js folder

Your child theme now contains the proper files and directory structure for the next part. Follow these template modifications for the files in your child theme folder.

Template modifications

Open functions.php and add this. This code dequeues the original Twenty Twelve navigation.js file and queues our ownIt also registers our second menu area.

Save and close functions.php

Add the menu to the header

Open header.php and around line 48 find this line

Directly above that line add the following code. This adds a second menu call to the header.

You can change the name of the menu that appears on mobile by changing “Lower Menu” to whatever you prefer in this code.

We’re going to use the fallback_cb menu parameter so the new menu won’t list your pages in case you decide you don’t want to have it active. But remember, this will require you to create a new menu in Appearance > Menus and activate it before you’ll see the menu.

Save and close header.php

Add the javascript for mobile

Open /js/navigation.js, scroll to the very bottom and add the following code. We’re simply adding a copy of the current javascript but using a different ID #lower-navigation for the new menu. This will make the menu act the same as the default menu on mobile devices.

I’m not very good with javascript so there might be a better way to use a second ID for getElementById, if you know of one please let me know and I’ll update this.

Save and close navigation.js and activate your new child theme. Now visit Appearance > menus, create a new menu and add it to the new lower menu area.

If everything went well you should see a second menu in your Twenty Twelve child theme. Be sure to resize the browser and test the menu.

Bonus

Some of you might want to only display the lower menu, but you can’t because Twenty Twelve displays your pages if there isn’t a menu active. Here’s how to do it.

Open header.php and find around line 42

Change it to

Now visit Appearance > Menus and remove the menu from the top menu area and save. Adding the fallback_cb menu parameter prevents the menu from displaying your pages when there is no menu active.

If you want to remove the margin above the header and bring the header image closer to the top, you can add this to your CSS.

Enjoy your new menu and let me know how it worked out for you!

64 thoughts on “Add second menu to Twenty Twelve theme

  1. premmarga

    Hello Zeaks, now I´ve got it working, I only don´t get it what I have to change to get the second menu on the top, above the header like in http://babybirds.de/. You already gave Paul an answer on this, but I don´t know where to move the position of the menu, and I would like to call it topmenu, written already in the function.php, but where to change this the other files.
    I hope you can help me. her is my website http://www.ahoi-kultur.de

    1. Zeaks

      Hi Premmarga, there is already a menu area above the header. If youw ant to add another one on top of that, simply move the menu call

      To just abover the menu that’s already there. if you can;t figure this out, open a forum post and link your header code to pastebin.com

  2. ravi

    HI Zeaks
    A big thanks to you, I am using wordpress from last 1.5 years and whatever i have learnt in wordpress is only because of your blog. thanks a lot buddy.

    I am using 2 menus in my website and i have copied your code to my child theme but the problem is only one menu is able to toggle when screen gets smaller. other menu does not toggle.

  3. David

    Nice tutorial. Works great. My client wanted a second menu, but at the footer so this was perfect. I put the code at the top of footer.php and renamed the menu titles to “footer menu”. Works like a charm.

      1. davidborrink

        Zeke, I’ve got another situation like above. I placed the script and modified header file (both menus are in the header on this other site), and the main menu button is not responding in mobile, and the second added menu button is visible but the menu items are listed below it on this one. It doesn’t toggle, either. This site is in development so I’ve got no link to share for this one.

        So the site above in the previous note has the new added menu working fine. The second site has the menu “on” with no “off”.

        Any idea what’s going?

  4. davidborrink

    On the second site, if it’s any help, I renamed the div for the added menu to “upper-navigation” instead of “site-navigation” because this menu needed different styling that the other.

    That means I took all the styles of “site-navigation”, made copies and renamed them “upper-navigation” so the menus could look different. Is it possible that I’m missing a key piece of CSS that has the menu in the “on” state since I created a new div in the menus? I’m not seeing it in the parent TwentyTwelve CSS at first glance. Maybe you can tip me off to something I’m overlooking.

  5. davidborrink

    I removed the script from the first site and turned off my second menu. It would appear that it’s the script to add the mobile functions to the second menu is the problem. The first menu is working fine again with the default script. I’m no javascript expert, but I’m tossing out a guess that the latest version of TwentyTwelve is conflicting with your script?

    1. davidborrink

      Ho boy. Double goofs.

      1. I just discovered tonight that I used your javascript example by itself and never tacked it on to a copy of the full javascript file from the parent theme. [facepalm] No wonder it didn’t work.

      2. I didn’t have the mobile menu’s CSS files from the parent theme in the child theme. Since I restyled the new menu differently than the main menu—and both have their own class—I needed to have an additional copy of the mobile CSS files with the class alterred. That made the menus closed as they needed to be. And gave them full function.

  6. davidborrink

    Zeak, I figured out a MAJOR reason why this suddenly wasn’t working and you need to know about it. It has to do with the updated Twenty Twelve theme (version 1.5) released with WordPress 4.0.

    There is a key line in the menus that changed. See this forum post: https://wordpress.org/support/topic/mobile-menu-doesnt-work?replies=24 for the details. The h3 class has become a button class.

    You will need to change the code in your javascript from “.getElementsByTagName( ‘h3′ )” to “.getElementsByClassName( ‘menu-toggle’ )”

    That completely solved my problem.

    (AND PLEASE feel free to delete all my comments above except the first one on August 30! People don’t need to read all my struggles with my goofed up attempts to not follow your instructions

  7. Pingback: ein zweites Menü für Twenty Twelve | Oh nein!

  8. Wakki

    Hello Zeaks

    I am very glad I found your tutorial and it worked fine. Thank you very much.
    I have a question though.
    On small screen, like it should, your method creates 2 toggle buttons for 2 menus.
    I would like to have just 1 toggle button that opens the 2 menus listed under each other. Do you know a way to create that?
    I was experimenting but didn’t succeed.
    Thanks in advance.

Leave a Comment

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

*
*