Register WordPress navigation menu and insert in theme

Navigation menu is an important part of any website. Without navigation menus a website doesn’t look good and it looks like the website is not properly arranged.

WordPress already comes with a nice navigation system that you can find in Appearance>>Menus of the dashboard panel. From here you can add menu to your navigation. Almost all the WordPress theme has already registered navigation menus.

WordPress allows developers to register navigation menus in a nice way. WP always stands as a developer-friendly CMS application and in the case of navigation menus also there are no exceptions. You just need to put a few lines of code and your menu location will register successfully. So how you can register navigation menus in your own WP theme?

In this tutorial, I am going to show you the code that will register a navigation menu and you will be able to show it on the front-end via the theme.

Register Navigation Menus

register_nav_menus is the WordPress function that will let you register menus in your theme. Registers multiple custom navigation menus in the new custom menu editor introduced in WordPress 3.0. This allows WordPress developers for the creation of custom navigation menus in the dashboard for use inside theme. Below is the usage of this function:

<?php register_nav_menus( $locations ); ?>

The piece of PHP code for creating a single navigation menu is given below:

register_nav_menu( 'primary', __( 'Primary Menu', 'theme-slug' ) );

But you can also put an array of menus for multiple menu locations. Here is the code below which will register a new navigation menu in the theme:

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Insert the above code in your theme’s functions.php file and you will be able to see the menu in the display location under Appearance>>Menus like you can see in the image below:

Was that not really so easy? Adding just a little bit of PHP code inside functions.php displays a theme location.

You can add more menu locations as an array. Here is the modified code to show you how to add more than one menu location:

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
    'footer' => __( 'Fix footer', 'THEMENAME' ),
) );

Now you will see two menu locations like the picture given below:

Add Registered Navigation Menu In Theme

Now you may be thinking about how to display the navigation menu on the front-end through the theme used for WordPress.

You need to provide a code into your theme’s template file which will display the navigation menus. In most of the themes, the code for displaying navigation menus is inserted inside the header.php file of the theme. Here is the PHP code below that you need to put in your theme’s template:

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

It will add menus on your WordPress site through the theme. Now you will be able to see it on the front-end.

To make it looks good, you can play with your own CSS style for this navigation menu.

WordPress is really so nice. Isn’t it? WordPress has a nice environment for developers and it allows them to do many other things that are really so interesting to know.

Leave a Reply

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