Creating dynamic menu with re-order option in wordpress

WordPress is a powerful CMS for a website and it provides features which makes it easy to use CMS. Navigation or Menu is one of the key point of the website. People tend to change Menu names, links, reorder them ever now & then. In a normal website it is a tedious job to change menu every time you need to add , remove or even edit something. But wordpress provides a nifty way to deal with menus. You can register navigation or menu with your theme which can be then shown in the frontend. Sounds Cool ? Let us now see how do we achieve it.

As I said you have to register your navigation within the theme. You can register multiple navigations or menus within a single theme. WordPress picks up the menu information from the file functions.php which is located inside your theme’s folder. Now we will register menus for your theme. To do so open the file functions.php which exists in the theme folder. if it does not exist then create one and paste the following code.The following code show who we have registered 2 navigations within the theme.

Registering menus in the theme

//be sure to check if this func exists or no
if (function_exists('register_nav_menus')) {
    register_nav_menus(
            array(
                'topmenu' => 'Top Menu',
                'footermenu' => 'Footer Menu'
            )
    );
}

Now that the menus are registered, lets verify it in the wp-admin once. Login to wp-dashboard and from the left navigation under Appearance tab click Menus. If your code is in proper place then you will see a text saying that "Your theme supports 2 menus". I am assuming that you pasted the above code in your theme’s functions.php and hence the 2 menus got registered. Here is the screenshot of how it will look like –

You can have different menus defined at the backend but you can make 2 of them active, since our theme supports 2 menus at this point of time. You can register more navigations later on as per the requirement. You can create links on the same page, these can be re-ordered by simple drag & drop. You can also define menu items with custom links. You can define Sub Navigation by simple drag and drop. Look at the image below to understand how adding menu items work.

After creating menu you have to assign them to the registered Menus. You can simply choose these menus from the drop down and click on save. Now we have completed all the backend task to create our own Dynamic Custom WordPress menu. It’s time we should now display these menus in the front end, lets see how to achieve this –

Display WordPress menu in the frontend, theme template

You can call these menus in the template file using wp_nav_menu() function. This function accepts many useful arguments, which can be used to create almost any kind of navigation. For our menu we will use the following code to display the navigation in wordpress –

<?php 
//this will print the menu hooked for topmenu in UL, LI
wp_nav_menu( array( 'container_id' => 'menu-header', 'theme_location' => 'topmenu' ) ); 
 
//for footer menu
wp_nav_menu( array( 'container_id' => 'menu-footer', 'theme_location' => 'footermenu' ) ); 
 
?>

As you can see in the above function call, an argument call container_id was passed. This container ID can be used to style the navigation as per your theme styles. The above function call will list all the menus defined in the backend as html list (li) elements. You can read about various argument on the documentation page for wp_nav_menu() .

Another good trick which I discussed recently is – How to assign first and last class name to these menu items . It will be really helpful post, if you are going to implement wp_nav_menu().

See, how simple is to add menu into a wordpress theme. This gives lot of flexibility to end user such that he/she can easily reorder, change the menu as per his/her desire. Next time, you code a theme, do not forget to include this useful feature.

Stay Digified !!
Sachin Khosla