Add Different Menu to Different Pages in WordPress

How to Add Different Menu to Different Pages in WordPress

Are you trying to add different WordPress navigation menus besides the primary navigation menu from your page? You can do it without a plugin. In this article, You will learn about, How to Add Different menus to Different Pages in WordPress.

You will see lots of articles about this. But all of are prefer to use a plugin. It’s can be solved with a simple PHP algorithm. You don’t need to use a WordPress plugin for this. Even if don’t know about coding, You can also do it. We will share the full working code. Stay with us.

Create Metabox for Selecting Menu on WordPress Page

If you want to select another menu beside the primary navigation menu. Then we need a meta box field that can change the default menu. If you are a theme developer or plugin developer, It can be a simple feature for your theme and plugin. Or, If you want to add your existing theme.

Then, Just add the code below to your child theme function.php.

/**
 * Register meta boxes.
 */function wpk_register_menu_meta_boxes() {
    add_meta_box( 'wpk-custom-menu', __( 'WPK Custom Menu', 'wpk' ), 'wpk_menu_meta_boxes_callback', 'page' );
}
add_action( 'add_meta_boxes', 'wpk_register_menu_meta_boxes' );
/**
 * Meta box display callback.
 *
 * @param WP_Post $post Current post object.
 */function wpk_menu_meta_boxes_callback( $post ) {
    ?>
       <div class="wpk_box">
        <style scoped>
            .wpk_box{
                display: grid;
                grid-template-columns: max-content 1fr;
                grid-row-gap: 10px;
                grid-column-gap: 20px;
            }
            .wpk_field{
                display: contents;
            }
        </style> <?php $field_val = get_post_meta( get_the_ID(), 'wpk_custom_menu_select', true ); $menus = wp_get_nav_menus(); ?> <p class="meta-options wpk_field"> <label for="wpk_desc_title">Selact Menu</label> <select id="wpk_custom_menu_select" name="wpk_custom_menu_select"> <?php if (!empty($menus)) { foreach ($menus as $key => $value) { $condition = ($value->term_id == $field_val)? 'selected':''; echo '<option value="'.$value->term_id.'" '.$condition.'>'.$value->name.'</option>'; } } ?> </select> </p> </div> <?php
}
function wpk_save_menu_meta_box( $post_id ) { if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return; if ( $parent_id = wp_is_post_revision( $post_id ) ) { $post_id = $parent_id; } $fields = [ 'wpk_custom_menu_select', ]; foreach ( $fields as $field ) { if ( array_key_exists( $field, $_POST ) ) { update_post_meta( $post_id, $field, sanitize_text_field( $_POST[$field] ) ); } }
}
add_action( 'save_post', 'wpk_save_menu_meta_box' );

This code can create a Metabox select field at the bottom of the page. You can make the menu as you like from this field.

How to Add Different Menu to Different Pages in WordPress

We have created Metabox for selecting the menu. But it’s not working yet. It’s a simple system. When you have selected a menu from the Metabox field. Your selected menu will load, but The primary menu will not load. We have to change the argument by using the wp_nav_menu_args WordPress official hook.

Add this code to your function.php

function wpk_different_menu_for_different_page( $args ){
    $locations  = get_nav_menu_locations();
    if (!empty($locations)) {
        foreach ($locations as $key => $value) {
            $menu = get_post_meta( get_the_ID(), 'wpk_custom_menu_select', true );
            if ($key == $args['theme_location']) {
                $args['menu'] = $menu;
            }
        }
    }
    return $args;
}
add_filter( 'wp_nav_menu_args', 'wpk_different_menu_for_different_page' );

See the screenshot:

How to Add Different Menu to Different Pages in WordPress

Now you will get all the menu lists that you have created from this Metabox field. You can choose one. It will work 100%. 

Conclusion

This is not a critical problem to create this type of option for experienced developers. But for a beginner developer or webmaster, it’s a difficult one. You can use plugins but every plugin not only uses a single option but also lots of others options. It will impact server response time.

For a single use, You do not need to use the plugin. This code is professionally written. You can use it unconditionally. I think you already know “How to Add Different Menu to Different Pages in WordPress”.

I hope you like this article, If you have a problem contact us.  

See More:

How to Add Image Icons With Navigation Menus in WordPress Without Plugin

Leave a Reply

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