How To Register Walker Menu Wordpress

How to Create a Fully Custom WordPress Mega Menu – No Plugins Attached

The mega carte concept has been with united states for a while at present. With each passing day more and more sites are trying to utilize this function in various means in social club to serve us as much information as possible through, what appears to be, a elementary "dropdown" menu. When using WordPress, both clients and developers often end up using some sort of plugin to implement this role. Guess what? We'll show you how you can implement a custom WordPress mega menu with just a few lines of code and nil plugins.

Before nosotros go downward to the coding office, let's kickoff talk about what exactly we're going to create since mega menus can be built in lots of unlike ways. Essentially, we're going to utilise a combination of carte du jour locations, bill of fare items, widget areas and widgets. Nosotros're going to have a specific menu location that will hold menu items. Each menu item from that carte du jour location will exist able to "host" widgets "within itself" through a dedicated widget area for that menu item. Those widgets tin can exist anything from custom menus, text areas to images and manufactures.

To kicking off with creating our own custom WordPress mega carte – let'southward become downwards to the coding part!

Registering a dedicated menu location

Firstly nosotros demand to annals a new carte location. The reason for this is nosotros want to have a specific location on the site that will host our custom WordPress mega menu so y'all, or the client, can add together on as many menu items as needed. In order for usa to register the new menu location – we'll open up the functions.php file (assuming y'all already take a theme on which to piece of work on) and add the post-obit lines of code:

Now let's add few menu items to our new carte location.

Not all menu items will have widgets attached to them. With this in mind we want to develop a way in which we tin distinguish those menu items from those that will indeed host some widgets. There are many means in which we tin can do that but let'due south keep it elementary. We'll use the "CSS Classes" choice. If you don't see the "CSS Classes" choice (field) nether your menu items only click the "Screen Options" button in the upper correct corner of the window and select the "CSS Classes" option.

Now let's add together the "has-mega-menu" class (feel costless to use any grade name you wish) to 2 of our bill of fare items that will accept a mega carte du jour dropdown attached (don't forget to click the "Save Menu" button one time y'all're done).

Dynamic sidebar (widget area) registration

Our custom WordPress mega menu is coming along nicely. Adjacent we want to annals new widget areas (sidebars) for each menu item with the "has-mega-card" CSS course. To practise that we'll create a new part which hooks to the "widgets_init" activeness. Within that function nosotros'll iterate over all menu items within a "mega_menu" menu location and in every iteration check if the carte du jour detail contains the "has-mega-bill of fare" CSS class or not. If it does, simply create a new widget surface area for that menu item using the register_sidebar role.

If we now go to the "Appearance -> Widgets" administration interface nosotros should see 2 new widget areas. There's i for each menu detail with the "has-mega-menu" CSS class ("Solutions" and "Company).

Return

For the frontend side you lot can write downwards a simple loop that will echo all navigation items and all "dynamic sidebars" for those items that have a respective widget area.

Continue in mind that you might desire to change this code to better fit your own needs but that's basically it!

You lot at present take a custom WordPress mega menu written with merely 25 lines of lawmaking and zero plugins installed. Of grade, you lot at present need to add widgets to your make new mega menu. You might want to use stock widgets like "Text" or "Custom Menu" or develop your own for the mega menu purpose. Remember, yous can always milk shake things upwardly and optimize by serializing and storing the information on which carte du jour items should take widgets attached to them. This avoids the wmpp_init function loop from executing for each single request you get and you could even add a custom option to the menu particular(s) similar a checkbox which defines if there is a widget area for that very menu detail.

Job done! Your custom WordPress mega menu is set up to roll

Got any questions or suggestions? We would beloved to hear your feedback and hear how you're getting on! If y'all like this post, why not check out some of our other posts on WordPress tips and trick here.

Source: https://slicejack.com/create-fully-custom-wordpress-mega-menu-no-plugins-attached/

Posted by: juarezalloss.blogspot.com

Share this post