Adding extra menus to Customizr 17


You may use the code below to add a secondary menu (actually you could add more than one) above the header, under the header, before footer or under the footer. Here’s the code, that should be added in your child theme’s functions.php:

 

 

You will also need to style your menu a bit. This is a very basic starter, which only centers the elements, removes the bullets and adds a bit of right/left padding.

Keep in mind that if you want a multi-level menu you need to build the CSS yourself, I just wanted to show you how to add one or more menus to the theme, styling is not covered here. As you might have guessed, the CSS needs to be added in style.css of your child theme or in Dashboard > Appearance > Customization > Custom CSS panel.

Please note the functions above only creates new menu locations in the layout. In order to see your menus you need to go to Dashboard > Appearance > Menus, create/manage your menus and assign them in the newly created locations.

 

Example: adding more than one menu
When you need to add more than one menu, you should add them as an array, not use register_nav_menu() for each of them. Here’s an example of how to add both top header menu and footer menu:)

 

I do not recommend this snippet to people who are not comfortable understanding and editing PHP and CSS code at an intermediate to advanced level, as it’s not an “out-of-the-box” solution. It’s just a starter kit for people who know coding but are not yet familiar with WP functions.


About Andrei

I'm the designer who's been told by coders "It can't be done". So I taught myself coding and did it. Learned CSS, PHP in the process and fell in love with WordPress. Meeting Customizr really meant a lot. Not only have I found an awesome theme, but it also made me want to start giving back, in return for all the times I've been helped myself.


17 thoughts on “Adding extra menus to Customizr

  • Reply
    Sumit

    How can I make a good looking stylish menu in this theme, I have build my website with this theme, but not able to make the menu look stylish (like separated in boxed etc). Is there any pluggin available I can use?

  • Reply
    UD40

    Created a second menu thanks to this snippet. But what I’d like to do is use this secondary menu for my subitems of my main menu. Is this possible? To get a secondary menu instead of the dropdown menu?

    • Reply
      Andrei Post author

      Yes, it’s possible, but you have to code the css styles for it yourself. Or search for css menu and find one you like, copy/paste the styles in your stylesheet and assign the needed classes with walker nav function or from the wordpress menus admin page.

  • Reply
    Terry Chadban

    Hi Andrei,
    I am trying to set up Customizr using a child theme with three menus, the main menu as-is, with a smaller menu on top-right above the header area for just Contact and Find pages, and another menu above the footer attributes for the necessary legal pages. But so far Customizr is still only allowing one menu. Here is what I have so far — my functions.php (in the child theme):

    and my style.css:

    Yes, I am a beginner when it comes to CSS, but I am struggling to learn because it is important for me to know it. Any ideas where I am going wrong?
    Terry

    • Reply
      Terry Chadban

      Okay, the functions.php got screwed up. Here is attempt two:

      Terry

      • Reply
        Terry Chadban

        For some reason the functions.php is not displaying correctly, but it is the same as your second example above, down to the ‘secondary-menu’ code, which was changed from your ‘wp-footer-menu’ code.

        Terry

  • Reply
    Terry Chadban

    Last attempt before I give up and try another theme:
    When I copy and paste the first code snippet into Customizr v3.1.6 and Child theme v1.0.0, everything works fine and I get my choice of two menus. But when I copy and paste the second snippet, for multiple menus, which is what I need, I get the following errors:

    “Warning: Missing argument 2 for register_nav_menu(), called in C:\Program Files (x86)\InstantWP_4.3.1\iwpserver\htdocs\wordpress\wp-content\themes\customizr-child\functions.php on line 11 and defined in C:\Program Files (x86)\InstantWP_4.3.1\iwpserver\htdocs\wordpress\wp-includes\nav-menu.php on line 106

    Warning: Illegal offset type in C:\Program Files (x86)\InstantWP_4.3.1\iwpserver\htdocs\wordpress\wp-includes\nav-menu.php on line 107″

    which would indicate that the problem is NOT my stupidity, but a problem with the second code snippet! Has anything been changed in the nav-menu code since this snippet was released?
    Terry

    • Reply
      Andrei Post author

      The code you’re posting is missing the first part of the code, which is quite important. Please eliminate all the code you added and try to copy paste everything this time. Also, please note that the functions.php file of your child theme should have <?php
      on first line, just like any other pure php file. Also note that it is considered a good practice not to exit php mode before end of file.

      • Reply
        Terry Chadban

        @Andrei,
        I am AWARE that the code did not copy correctly into this forum! I will make this as simple as I can for you. I copied and pasted your second functions.php code into my test WordPress install and I got the following errors:

        “Warning: Missing argument 2 for register_nav_menu(), called in C:\Program Files (x86)\InstantWP_4.3.1\iwpserver\htdocs\wordpress\wp-content\themes\customizr-child\functions.php on line 11 and defined in C:\Program Files (x86)\InstantWP_4.3.1\iwpserver\htdocs\wordpress\wp-includes\nav-menu.php on line 106

        Warning: Illegal offset type in C:\Program Files (x86)\InstantWP_4.3.1\iwpserver\htdocs\wordpress\wp-includes\nav-menu.php on line 107″

        When I copy and paste the first functions.php snippet into the same WordPress install it works fine, so what is the problem with the second multi menu snippet?
        Terry

  • Reply
    kstandley

    I’m trying to get the secondary-menu to only appear on the home page. I tried adding

    at the if statement. Is that the right direction?

    • Reply
      Andrei Post author

      The exclamation mark in your expression means “not”. So you’re only displaying the menu on pages that are not home. Correct should be:

      • Reply
        kstandley

        Thank you for the help,
        I tried both __is_home and __is_front_page but the second menu still shows up on all pages. Do I need an else statement?

  • Reply
    kstandley

    The answer was to move the __is_home if statement to the display function at the bottom of my code.

    So now the secondary menu only shows up on the homepage.

  • Reply
    James

    I’ve followed these instructions and can place a menu in the four different locations provided.

    Is there anyway to put the buttons where the site tagline goes?

  • Reply
    Lee

    I need 3 menus, one you already have which is the main one at the top. The other 2 menus I need to target specific pages that is under the main menu.

    In my website, I have 2 products and the 2 products I would like to have left side menu for them. Could you help with suggestion.

    Thanks.

  • Reply
    Emily

    I added another menu with the code snippet which allowed me to create a new menu but it is not functional. I wanted it to be external links but even if I had pages within the site to the menu you can’t click on them; it’s just text.

    What am I doing wrong?

Leave a Comment

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

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">