How to add menu to your WordPress theme?

How to Register Menus?

The navigation menu allows you to add different links in the Menu. You can add internal links such as Pages, Posts, Categories, or external links like any website URLs to the menu.

When you are developing a theme, you need to register the menus in order to create a navigation menu. Once it’s registered using a functions.php file, it will appear at Appearance -> Menus.

You can use register_nav_menus() to register the menu.

This code will add two locations, “Primary Menu” and “Secondary Menu”.

function register_theme_menus() {
  register_nav_menus(
    array(
      'primary-menu' => __( 'Primary Menu' ),
      'secondary-menu' => __( 'Secondary Menu' )
     )
   );
 }
 add_action( 'init', 'register_theme_menus' );

A good rule of thumb is to make sure the function doesn’t exist. As you know, in a large functions.php file, it might break your code if the function already exists.

Let’s change the code above slightly:

if ( ! function_exists( 'register_theme_menus' ) ) {
  function register_theme_menus() {
    register_nav_menus(
      array(
        'primary-menu' => __( 'Primary Menu' ),
        'secondary-menu' => __( 'Secondary Menu' )
       )
     );
   }
  add_action( 'init', 'register_theme_menus' );
}

How to Display Menus?

Once you register the menus, you’ll need to add code to display that menu. Use wp_nav_menu() to display the menu at a specific location.

This is how you can add our primary menu, from the code above, to your header.php file.

wp_nav_menu(
  array(
    'theme_location' => 'priimary-menu'
  )
);

How to add a container class with display menu?

All you need to do is pass another argument with a class name.

wp_nav_menu(
  array(
    'theme_location' => 'primary-menu',
    'container_class' => 'primary_menu_class'
  )
);

Share this post