Adding extra menus to Customizr 28


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.


28 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
      Ariela

      I would love to know that aswell… Did you found an answer in all these days?
      I’m kinda driving mad to know why new menus doesn’t show up on the Navbar next to the default one (like it’s seen on the Demo).
      The best solution I came up to was the following:

      But the styling of the new menu was different than the one shown on the primary menu: there was no dropdown menu, no alignment, different color and such.

      • Reply
        Ariela

        Aaaaand… nevermind :-|

        Like always, right after I asked for help (And after almost 4 hours of trial-and-errors, web searches, many cigarettes and tons of frustration) I realized that I totally misunderstood the whole menus thing. The answer to my problems was right under my nose, so simply that I have to admit I feel ashamed of myself.
        What I was looking for just needed the menu inserted into the theme by default, no need of secondary ones (Erm… I actually added eight menus, you don’t really want to know how much I messed the Website layout :-P). I just ran into an issue once and thought I had to tweak the theme, while I probably had to pay more attention to what I was doing and maybe try a second time before finding another solution…
        Ah, women and their need to make things more complicated than they actually are!

        Anyways… Cheers for the theme, I really loved (aside from this “inconvenience”) restyling my site with Customizer, and I had the pleasure to see how much your support is great and professional, that is -sadly- definitely not a common thing these days.
        Keep up the good work!

        • Reply
          Nicolas

          :-D I understand very well what you feel! The “right under my nose” thing is something I’ve experienced (and continue to) so often!
          Thanks for your feedback and enjoy the theme Ariela.

  • 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?

  • Reply
    Siva Suresh

    Hi,
    I created a secondary menu using this snippet. It is working well.

    How can I make it responsive like the main menu ? I mean, how to make it shrink to 3 bar on small screens?

    • Reply
      Nicolas

      Hi Siva,
      This would require to code something like the tc_menu_display() method located in inc/parts/class-header-menu.php. I might come with something simpler as a snippet and / or a theme improvement.
      Cheers

  • Reply
    Aymen

    Hello,

    I would like to the change my main menu on my home page but I don’t know how.
    Well, I’m definitey not a pro in WordPress, I started to work on my website 3 months ago and i’ve never downloaded a child. (Is it too late ? I will loose all my job if I download one ?).

    I want to know if somebody can help me and tell me how can i delete my menu to put a new one ( “more beautiful”) . A free and nice menu.
    Thank you so much guys and sorry if I made some mistakes in english, I’m french.

    This is my header php page :

    <?php
    /**
    * The Header for Customizr.
    *
    * Displays all of the section and everything up till
    *
    * @package Customizr
    * @since Customizr 1.0
    */
    ?>

    <link rel="stylesheet" href="” type=”text/css” media=”screen” />


    <html class="ie ie7" >


    <html class="ie ie8" >


    <html >
    <!–

    tc_head_display()
    do_action( ‘__before_body’ );
    ?>

    <body >

    <header class="
    ” role=”banner”>

    tc_logo_title_display(), TC_header_main::$instance->tc_tagline_display(), TC_header_main::$instance->tc_navbar_display()
    do_action( ‘__header’ );
    ?>

    tc_slider_display()
    do_action ( ‘__after_header’ )
    ?>

    • Reply
      Nicolas

      Hi Aymen,
      You can remove the built-in customizr menu with the following code :

      Then add any menu you need in the __navbar hook.If you are new to WP development, you might be interested by this quick guide on how to use WordPress hooks.

      Hope this will help !

  • Reply
    Richard Force

    What CSS code would I need to add to make my secondary menu look just like the primary. The only change I would actually make to the CSS is the font size and have it floating to the left with the primary floating to the right about 50px down.

  • Reply
    Sherry

    I have encountered another problem. No matter what I do, I cannot create a menu navigation bar. It does not appear on the site.

    When I create a menu nothing happens. What I do notice is that when I go to pages, the front page does not appear, so there is no way to make it the home page.

    I have attempted to delete all pages and the Customizr theme and reloaded it.

    Any help would be greatly appreciated. I love this them and badly want to use it.

  • Reply
    Patrick

    I’m wondering if there is an easy way to display 2 menus within the header menu-container.

    Basically show the main nav menu slightly higher than it is by default and then directly below it display a different menu, all within navbar-inner row-fluid, using the same CSS for the menu structures and same responsive capabilities for both.

    I do not see any straightforward way to accomplish this. Any help would is appreciated!

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="">