Different menus on different pages WordPress, this is how to!

This article was written by in May 14, 2014, & may not be posted on other sites!
Original source url for this article: Different menus on different pages WordPress, this is how to!

Different menus on different pages in WordPress, this is how to!
Need one menu on one page and another on another page? This is how to add multiple menus in WordPress, and show them in different pages.

 

Different menus on different pages WordPress:

  1. Add this function to your functions.php to enable 2 different menus in your theme / child-theme in addition to the deafult primary menu. In this case we named the menus index-menu and page-menu, something like this:
    function register_my_menus() {
    register_nav_menu( 'first-menu', __( 'index-menu') );
    register_nav_menu( 'second-menu', __( 'page-menu' ) );
    }
    add_action( 'init', 'register_my_menus' );

    “index-menu” is the name shown in WordPress admin and “first-menu” is the machine name called in functions.
  2. Go to appearance > menus in WordPress admin to create 2 new menus and add whatever links you need in each menu, name them whatever you like for example menu-01 and menu-02.
    Different menus on different pages WordPress, this is how to!
  3. To connect your 2 new menus with the menu-names you created in the function.php you need to specify which one will be your index-menu and which one will be your page menu. This is done either by clicking the checkboxes while creating your new menus in WP or in the tab “Manage Locations” using the dropdowns.
    Different menus on different pages WordPress, this is how to!
  4. To show the menus in different pages use this function below. You could replace the default menu-function often located in header.php. The default menu function might look something like this:
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    Just replace it with:
    <?php
    $args = array();
    if(is_front_page() && is_home() ) $args=array( 'theme_location' => 'first-menu' );
    else $args=array( 'theme_location' => 'second-menu' );
    wp_nav_menu($args);
    ?>

    Your new function is saying if is “home and blogpost-page” show index-menu, else show “page-menu”. Of course you can change the preferences to suit your needs.

 

To add class “nav-menu” as in the default menu, just write:
<?php
$args = array();
if (is_page('home') ) $args=array( 'theme_location' => 'first-menu', 'menu_class' => 'nav-menu' );
else $args=array( 'theme_location' => 'second-menu', 'menu_class' => 'nav-menu' );
wp_nav_menu($args);
?>

Spread the word

Facebooktwittergoogle_pluslinkedinmail

One thought on “Different menus on different pages WordPress, this is how to!

Leave a Reply

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