Drop Down Menu with Submenu using WordPress walker class

In this tutorial, I will walk you through how to use the existing HTML/CSS Drop Down Menu with Submenu using WordPress walker class. This tutorial will not show you how to create a menu from scratch but will walk you through the process of taking existing HTML menu themes and applying them to a menu that is built with WordPress. Building a WordPress drop-down menu this way can save you a bundle of time if you are looking for a pre-designed solution.

Follow the simple steps given bellow

Step 1 – Add styles to the stylesheet for WordPress walker

Add the following styles to the active theme’s styles.css

Step 2 – Create a menu in WordPress for WordPress walker

Now as we have added all the styling to the theme, it’s time to create a menu in WordPress with sub-menus. Something like a tree structure.

Go to appearance -> menus and create a menu with any name and add as many items as you want.

Step 3 – Add our Custom Walker Class to functions.php

We have created a custom WordPress Walker Class to make our menus more compatible with WordPress. This class alters the HTML output of your WordPress menu so that it will match the structure of the menus on our site. This will allow us to simply drop in the CSS code to get a menu theme working.

Add the following code to your active theme’s functions.php file

Step 4: Print Menu in Theme File

Now that we have our custom Walker function in place we need to actually print the menu in one of our template files. Place the below PHP snippet in any template file that you would like your menu to show up on. Mostly we add a menu in the header section of our website but it can vary as per requirement.

  • ‘menu’ => Name of the menu you created in Step 3.
  • ‘container_id’ => The id that will be applied to the containing DIV around the menu. ‘tutsoceancssmenu‘ is our default that we use on the site. You can change this if you want but you will also have to change the CSS later.
  • ‘walker’ => This tells the menu to use our custom Walker class to print out the HTML

Loading