navigation manu

Add Navigation Menu To WordPress in 3 Easy Steps

Many WordPress themes have pre-defined menu, locations and layouts. You can easily create custom navigation menus in these themes as well.

In this blog, we will share how you can effortlessly add more navigation menus in your WordPress theme.

Step 1 – Create a Child Theme

You’ll need to create a child theme so your changes aren’t lost once the theme is updated. You can create a child theme on WordPress on your own.

Step 2 – Creating Menu Location

You need to “register a menu” to add the selectable menu location option. You’ll need to add code to your functions.php, which is located in wp-content>themes>your-theme.

Now go to cPanel and click File Manager icon  in the Files section. Load your site’s document root through File Manager.

Do Not edit functions.php file in your/wp-includes/folder or you’ll end up with errors when adding the code.

Go to functions.php file in the theme you are using.

Click on your functions.php file and then click on the edit button.

function location

If you haven’t disable pop-up, click Edit button at the bottom, right-hand side as shown.

popup

Add the following code on a new line if you want only one menu (here menu for header):

/*
Register Menu
*/
function register_my_menu() {
register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

Now,  Navigate to Appearance -> Menus  then create a new menu , give your menu a name and then click on create menu as shown:

create menu

Here, New Menu will appear in the admin dashboard’s menu page as shown.

show-location

To add multiple menus to your site, add this code:

function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'another-menu' => __( 'Another Menu' ),
'an-extra-menu' => __( 'An Extra Menu' )
));
}
add_action( 'init', 'register_my_menus' );

Now you can add as many new menus as you want. Save the changes and all we have to do now is add the new menu to the site.

Step 3 – Adding Menu to Created Locations

Firstly, decide where you want your menu to be placed. For example- you’ll need to edit header.php file, if you want the menu to appear at the top of your page or to display the menu on the sidebar edit sidebar.php file.

Basically, you can add your new menu where ever you want. To do so, you’ll need to add this code to any of the locations:

wp_nav_menu(
array(
'theme_location' => 'header-menu',
'container_class' => 'header_menu_class'
'items_wrap' => '<ul id="%1$s" class="%2$s navbar-nav ml-auto">%3$s</ul>',
)
);

Replace header_menu with Your WordPress readable name you want, style your menu with CSS to make it visually appealing.  Also replace the class with your class here we are using header_menu_class.

Now Navigate to  Appearance>Menus in the dashboard and as shown:

create menu

Styling and Responsive Menus

Once you have created the new menu, you can style using CSS. You can do this with the help of plugins, which creates responsive menus according to your theme’s styles.

Visit our web design Mississauga location for a free consultation and quick WordPress website setup.