Twenty Eleven Three Menus

This post has a WordPress child theme download and shows how to use three menu’s with the Twenty Eleven theme, we will often see themes with a top menu, main menu and footer menu, the changes to add another two menus are moderate.

We used two template parts for the navigation, created some styles so we have the active menu item highlighted, centred the footer menu and made it Internet Explorer 7 compatible

The Child Theme

We have made the child theme downloadable, in the download there is a copy of the Digital Raindrops child theme with additional files for the menus, the additional code is commented in the files so the functions can be copied to another child theme.

In the file:
functions.php – two lines to add the two new menus
header.php – two lines to add the top menu, one for ie.css
footer.php – two lines to add the footer menu
navigation-header.php – Top Menu new file template part
navigation-footer.php – Footer Menu new file template part
custom-styles.css – Styles for the new menus
ie.css – style to make a centered menu IE7 compatible
style.css – child theme stylesheet
screenshot.jpg

You may download the file here or visit the All Downloads page for other files.

Twenty Eleven Three Menus

Ok we have downloaded the theme so let us upload and activate it, we navigate to Admin > Appearance > Themes

three-menus-1

We select the [ Install Themes ] tab and upload and activate the downloaded child theme

three-menus-2

We can now see our active theme has changed to our child theme, nothing will have changed and our website will look just like the Twenty Eleven theme.

three-menus-3

Custom Menus

Since the twenty ten theme WordPress has built into the themes support for custom menus, in the next few steps we will look at these and setup some test menus for our theme.

We navigate to Admin > Appearance > Menus, we will see that no Custom Menus exists so we need to create one, we enter a new Menu Name called “Top Menu” and press Create Menu

three-menus-4

We will notice a new box on the left telling us we have three theme locations and our theme supports three menus, we have three locations, Top Menu, Footer Menu and Primary Menu, and a message to select menu items to add to our Top Menu.

three-menus-5

We select some pages to add to our top menu, press “Add to Menu”, we can drag and drop these item in any order we want, to create a child menu item we drag the item to the right, the parent page setting is ignored in custom menus, we “Save Menu”.

three-menus-6

Our Top Menu and Footer Menu will not show on our theme until we tell WordPress where we want our menu’s to show, so we add our “Top Menu” to the “Theme Location” that will show in the header area and “Save”.

three-menus-7

Now we can visit our theme to see our new simple menu, in the top right of our theme, this is styled in the file custom-style.css in the child theme.

three-menus-8

Main Primary Menu

We now have some of the same pages in our Top Menu and our Primary Menu, we want to add different item here so we create a new menu with different items, here we are using the main menu for categories, we can mix, pages, posts, categories and custom URL’s on any of our menus, we create a new menu and Save Menu, we add Categories and Save menu, we then add Theme Locations > Primary Menu > Main Menu, just like we done for our top menu.

three-menus-9

Lets now have a look at our two menus, top menu with site information, main menu with our categories

three-menus-10

Footer Menu

We wanted our footer menu to be centred below any widgets and above the footer notice, we added a border above to give the menu its own space in our theme.

three-menus-11

Here is our Footer Menu without any footer widgets, it sits nice below the post.

three-menus-12

Then we can see our footer menu below some footer widgets, added from the Admin > Appearance > Widgets

three-menus-13

We hope that adding additional menus will make our themes more flexible, where we are in charge of the menus and not restricted.

Notices

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

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://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

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

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

19 thoughts on “Twenty Eleven Three Menus

  1. Thanks for the post. It was a very simple process, and I’m v. happy with the results. My only wish now is to be able to add the search field to the top menu. Is that a possiblilty?

    J

  2. Hello,

    I really love this website, you have some great tips for those of us learning wordpress. Anyways, I was able to couple the three menu child theme with the social navigation child theme successfully, but I am running into a problem. How do I change the color of the top and bottom menus that are added with the three menu theme? Thanks for your help in advance.

    • Hi!

      I am glad I found your theme, as I wanted to have two menus. On question I have, though: As Richard, I wonder how to change the color of the topmost menu (now blue fonts)?

      In any case, thank you for the theme
      André

      • hi there,

        I ve just spent hours trying to work out how to change the font color in the three menus theme!

        Could get the color to change when hoovering over the menu….but not the basic color when doing nothing :-(

        u guay have had any luck yet?

        I am using the standard “wordpress twenty eleven” theme.

        Jan

  3. Thank you so much for the time and effort you put into this tutorial. It worked the first time I tried it. I’m new at developing a customized WP CMS site and I had been tearing my hair out trying to figure this out. All of the other tutorials I read always left something out.

  4. When I implement the top menu it ends up moving my main menu down about 10px when I hover over menu items that have sub menus. Any ideas on how to fix this? Oh and this only happens in Chrome. Displays fine in IE and Firefox

  5. Your Three Menus Theme is excellent. My website is primarily designed for viewing on Mobile phones. The TwentyEleven dynamic column re-positioning feature (side column displayed on right of computer screen – then displayed under main column when viewed on a Mobile phone) is perfect for viewing on Mobile phones. Your Three Menus enable me to display a good selection of menu buttons without wrapping the menu buttons on the Mobile screen. Are you able to recommend an e-commerce plugin that works well with your theme? The “wp e-commerce” works but does not display the “Checkout (review order) page” correctly. The data entry fields are extended off the page. The background is only half the width of the actual Mobile screen. The application is usable but does not look good. This may be a twentyEleven Theme problem. Select a Product = voucher then checkout on my site http://www.totalsupport.co.nz using a Mobile phone (I use a Samsung Galaxy 2).
    Your theme is perfect for mobile phones!

  6. Hi David,

    I truly appreciate your WordPress expertise and willingness to share it with WordPress lovers (like me). I especially like it that you use native WordPress and not shortcodes (I’m sure you’ve read Justin Tadlock’s article “Shortcode Madness”.

    I love this site.

  7. Hi David,

    I am glad to have found your time, for I really wanted to have multiple menus – thank you. I do have one question, it is the same as Richard’s: For someone with no knowledge of CSS, to change the colour of the menu on top (which is blue now) – what would I have to do? I tried to fill into the “CSS Class” field in the menu-settings something like “color:purple” etc, but signs like “:”, “;” etc. got automatically deleted – how can I change the colour, then?

    If you should have the time, maybe others might be interested in this information, too.

    In any case, thank you
    André

  8. Hi,

    I like the idea of having three menus! :-)

    However I do already have a child theme…..so how do I install it? Where do I need to push the files you are providing within the existing structure (using ftp)?

    Would be glad about an answer!

    Cheers,
    Jan

  9. …..I have copied all the downloaded file into my child-themes folder.

    The three menus – the two new ones! – are showing! :-)

    However they are not showing nicley :-(

    They are aligned at the left side and have no drop-down function.

    Basically the menu looks like a listing in “word” with those little “boxes” just in front of the text.

    any idea what I need to fix??

    Jan

  10. I know for a fact it requires a bigger effort to write a tutorial than answer a forum post [mainly because it's targetered to a diferent audience]

    I really enjoined this one and I’ll definetively will take a look to the rest.

    Thanks for your time and dedication.
    ———————————————–
    P.S. if someone knows a good translation of this in spanish please post back the URL… If not …

    is it ok that I translate it and publish it on my WP Blog making a reference to digitalraindrops?

  11. Great tutorial, just what I needed – thanks for taking the time to post it.

    Is there a small typo in ‘custom-style.css’, line 80 – should that read?:
    #footer-menu ul ul a {

    Anyway, I’m just starting out on WordPress and have bookmarked digitalraindrops.net for future reference.

    Thanks,
    Eoghan.

  12. hi
    i confused for creating two menu, i created a single menu in the top of my site but i wont make a another menu in the top. i need two menu in top of my site at the same time menu will display in separate lines.if any possibility to do that?

  13. Thank you so much for this tutorial. I’ve tried other tutorials but they didn’t work. This was very well explained and worked perfectly. Thanks again!

  14. Im using theme device-switcher-plugin and have created 2 themes “computer” and “mobile” is it possible have separate navs in the themes. Could anyone point me to some code to do this.

Leave a Reply

Connections

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

Related Posts

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More