Recently, we learned how to load styles and scripts the right way in WordPress. In this guide, ‘How To Create A Dynamic Menu In WordPress’, we will continue our development of a WordPress theme, by creating a dynamic menu. We will create a menu for our header and footer sections respectively and later on, we will look at how to enable multilevel navigation in a WordPress theme. I guess you are as excited as I am, so let us see How To Create A Dynamic Menu In WordPress.
How To Create A Dynamic Menu In WordPress.
We are going to take a step by step approach to make the understanding of how to create a dynamic menu in WordPress really easy.
First Step:
Enable menu at the WordPress backend. Obviously, our clients who purchase and use our theme will not be able to add menus to the theme dynamically at the moment, because there is the menu option is not enabled in our WordPress backend.
Visit https://localhost/business-site/wp-admin.
Enter your login credentials and once logged in, click on Appearance. But wait! I can’t see any menu.
Yes, that’s exactly what we need to correct now.
Go to your themes functions.php file with your code editor of choice. For me, this can be found at business_site => wp-content => themes => martins_business_one => functions.php
Add this code at your function.php file,
function martins_business_one_menu() {
register_nav_menus(
array(
‘martins_business_one_menu’ => ‘Martins Business One Menu’,
‘martins_business_one_footer’ => ‘Martins Business One Footer Menu’
)
);
}
add_action(‘after_setup_theme’, ‘martins_business_one_menu’, 0);
A Brief Explanation of our Code:
We created a function which includes our theme name ( martins_business_one_menu). This is so as to avoid naming conflicts with other themes navigation menus.
Next up, we called the WordPress function register_nav_menu and in this function, we have an associative array that associates the menu location slug with a descriptive name. In order words, our theme plans to use two locations for our menus and they are the header and footer. Thus, we used a slug of martins_business_one_menu and a descriptive name of Martins Business One Menu for the header menu location, and we also used a slug of martins_business_one_footer and a descriptive name of Martins Business One Footer for the footer menu location.
Then, we call a hook after_setup_theme that is fired after the theme is loaded. This hook is usually used when we want to register some basic theme features.
Now go back to the WordPress backend, and click Appearance, you should see your menu option visible.
SECOND STEP:
Now, create pages in the WordPress dashboard. These pages will be added to our menu.
To create pages, click on Pages and click Add New. Enter the name of your page. This will be exactly the name that you will want to appear in the menu. For me, I will create Home, About, Blog, Contact pages respectively.
Third Step:
Add your menus. Visit the WordPress dashboard, click on Appearance and then, click on Menus.
Give your menu a name. For me, I gave my menu the name of ‘Main Menu’. Then click create menu.
Now add the pages you have created earlier to your menu by ticking the pages in the add menu items box and then click on add to menu as shown below.
Did you notice the display locations? We will tick martins business one menu because we want to display this menu in the header location. Then click Save menu.
Fourth Step:
Display Our Menu On The FrontEnd. To display our menu on the frontend, please go to your themes header.php file. This can be found at business_site => wp-content => themes => martins_business_one => header.php
Remove all the ul that carries the link to the various pages and replace them with this code,
<?php
wp_nav_menu(
array(
‘theme_location’ => ‘martins_business_one_menu’
)
)
?>
The wp_nav_menu adds a class of menu-main-menu-container to the navigation. We can easily add styles to this class to make our navigation look better.
In your css add this:
.menu-main-menu-container{
margin-left: 400px;
}
.menu-main-menu-container ul{
list-style-type: none;
padding-top: 0.5rem;
}
.menu-main-menu-container ul li{
display: inline;
margin-right: 1rem;
}
.menu-main-menu-container ul li a{
color: #333333;
text-decoration: none;
}
As you can see, the ‘How To Create A Dynamic Menu In WordPress’ has helped us create a menu dynamically for our theme. Change the menu, add a menu, delete some menu, and the navigation in the front-end should reflect exactly what you have done on the back-end.
Take the time to add styles to your navigation and make it look as stylish as you would want to
You will, however, notice that you cannot add multilevel menus to your theme. In a later guide, we will look at how to achieve just that. But for now, let’s continue by enabling the customizer option, which will help us build our pages.
ASSIGNMENT: Please add the footer menu to its appropriate location using the methods described above. If you have any questions, please let me know.
