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 the functions.php file in your/wp-includes/folder or you’ll end up with errors when adding the code.
Go to the functions.php file in the theme you are using.
Click on your functions.php file and then click on the edit button.
If you haven’t disable pop-up, click Edit button at the bottom, right-hand side as shown.
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:
Here, New Menu will appear in the admin dashboard’s menu page as shown.
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:
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.
