Friday, September 13, 2019

Create Custom Multiple Menus in WordPress [Without Plugin]

Last Update:

Creating custom multiple menus in WordPress Theme without plugin is VERY EASY!

You can do it, if you know how to edit WP Theme PHP files. 

For multiple navigation menus, using Plugin isn't better decision. Because, stuffing excess plugin slow down Websites. 

Whatever, Let's start to create your own WordPress Customized Menus! 

3 Steps to Create Custom Multiple Menus in WordPress Without Any Plugin:

1. Register Navigation Menus in function.php File

  • Login your WordPress Website. 
  • Go to Appearance ⇾ Theme Editor and open function.php files from Theme Files.
  • Now paste the following code at the end of function.php file.
  • // Menus Register Start
    function register_my_menus() {
      register_nav_menus(
        array(
          'primary' => __( 'Primary Navigation' ),//It is your primary nav menu
          'top-menu' => __( 'Top Navigation' ), //It is your Top nav menu
          'footer-menu' => __( 'Footer Navigation' ) //It is your Footer nav menu
        )
      );
    }
    add_action( 'init', 'register_my_menus' );
    // Menus Register Stop
  • Save to completed registering menus.
N.B Here we have registered 3 Menus: Primary Navigation, Top Navigation & Footer Navigation

2. Publishing Menu

We have just registered menus. Now we have to call the specific menu to publish in our WordPress Theme.

Suppose we want to appear Top Navigation in our header.php.

We have to just paste the following code in header.php file exactly where we want to appear the this menu.
<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container_class' => 'top-menus-wrapper','menu_class' => 'ul_menu'  ) ); ?>

Explanation:
  • 'theme_location' => 'top-menu' defines to call the Top Navigation Menu in this location (Header Section).
  • 'container_class' => 'top-menus-wrapper' defines the wrapping/container class name of this menu.  Example: <div class="top-menus-wrapper><ul>....</ul></div>
  • 'menu_class' => 'ul_menu' defines the class name of <ul> of this menu. Example: <ul class="ul_menu"> 
Now Save the header.php file.

After doing those two steps, The Menus option will be appeared in your WordPress Dashboard.

Clicking on Menus ⇾ Manage Locations, you will see look like -
Appeared Multiple Menus in WordPress Dashboard
Appeared Multiple Menus in WordPress Dashboard

Now you can create multiple menus from your WP Dashboard.

You can define the location as you want.
Multiple Menus Location in WordPress
Multiple Menus Location in WordPress


3. Styling Your Menus

You can make different look and behavior with CSS & JS.  It depends on your own choice and requirements.

That's it!

Let me know your opinion on this Tutorial.


About me


Elliyas Ahmed
Elliyas Ahmed

Hi, I am Elliyas Ahmed, the founder of COMPROMATH. I try to share what I learn.

Work With Me - My Premium Services

Lets Start The Discussion on This Article

Blogger Existent Comments

Blogger Comment Feature is disabled intentionally for protecting Spammy Comments.

No comments:

Submit your COMMENT here