Adding extra menus to Customizr

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:

 

add_action( 'init', 'register_secondary_menu' ); // this registers your menu with WP
function register_secondary_menu() {
    if ( function_exists( 'register_nav_menu' ) ) {
        register_nav_menu( 'secondary-menu', 'Secondary Menu' );
    }
}
 
// Select the add_action you need, depending on where you want to add the menu and disable the rest:
add_action('__before_header', 'display_secondary_menu');     // use this line to add above header
add_action('__header', 'display_secondary_menu', 1000, 0);     // use this to add after header
add_action('__before_footer', 'display_secondary_menu');     // use this line to add above footer
add_action('wp_footer', 'display_secondary_menu', 1000, 0);     // use this to add before credits
 
// display function for your menu:
function display_secondary_menu() {
    echo ( has_nav_menu( 'secondary-menu' ) ? wp_nav_menu (
        array (
            'theme_location' => 'secondary-menu',
            'container_id'    => 'secondary-menu',
            'container_class'    => 'secondary-menu'
        )
    ).'
' : '' );
}

 

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.

#secondary-menu ul { text-align: center; list-style-type: none;}
#secondary-menu ul li {display: inline-block; padding: 0 5px;}

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:)

add_action( 'init', 'register_extra_menus' );
function register_extra_menus() {
    if ( function_exists( 'register_nav_menus' ) ) {
        register_nav_menus( array(
            'my-top-menu' =>  'Top Menu',
            'my-footer-menu' =>  'Footer Menu'
        ) );
    }
}
 
// Hook display functions for each of them on theme elements:
add_action('__before_header', 'display_my_top_menu');
add_action('wp_footer', 'display_my_footer_menu');
 
// Display functions:
function display_my_top_menu() {
    echo ( has_nav_menu( 'my-top-menu' ) ? wp_nav_menu (
        array (
            'theme_location' => 'my-top-menu',
            'container_id'    => 'my-top-menu',
            'container_class'    => 'my-top-menu'
        )
    ).'
' : '' );
}
function display_my_footer_menu() {
    echo ( has_nav_menu( 'my-footer-menu' ) ? wp_nav_menu (
        array (
            'theme_location' => 'my-footer-menu',
            'container_id'    => 'my-footer-menu',
            'container_class'    => 'my-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.

46 thoughts on “Adding extra menus to Customizr”

Comments are closed.