How To Create A Dynamic Menu In WordPress

How To Create A Dynamic Menu In WordPress

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.

no menu in worpress dashboard

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);

enable menu in functions file

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.

register_nav_menus()

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.

add menu option in wordpress theme

 

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.

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.

add pages to menu

 

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.

menu display location

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’
)
)
?>

navigation menu in frontend

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.

Learn more about wp_nav_menu

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.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Leave a Comment

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

Scroll to Top