Add a Custom Menu Panel with Easy Digital Download Pages

Custom Menu Panel can help us sort out several pages into groups of links so that we can have shortcuts for ourselves and our clients while creating navigations in WordPress. In this tutorial, we will create our own custom menu panel for Easy Digital Download Pages.

Menu Panels are nothing else than regular meta boxes that appear under Appearance > Menus. We will create one new meta box there while hooking our registration function on the hook load-nav-menus.php.

We are adding a simple metabox with the name Easy Digital Downloads. To define the inner content, we will need to create the function ibenic_render_edd_menu_panel.

Custom Menu Panel Content

For now, we will just add an empty content there. It will actually hold some HTML but there won’t be any pages to select since that will come at the of this tutorial. Now, let’s just create the container:

This is just a basic HTML structure that each menu panel has. You can just view other panel and copy their inner content. Something that is not regular, it’s the class EDD_Menu_Panel_Walker. This class will help us render the items as we need them. It will also add some custom classes on our own.

That way, we can also define some classes that are really specific and then use them to do something with those items. But that is something for another tutorial.

Something important to notice is the id #edd-menu-panel that is placed at the top of the content. Why? Because we need it for the JavaScript to work its magic there.

If you look closely at the code, you will find the edd-menu-panel on the submit button “Add to Menu” which has the id set to submit-edd-menu-panel and also on the Select All button. JavaScript will look for that metabox and also see which items are checked. After that, all those checked items will be added to the new navigation menu.

Custom Walker Class

Let’s now see how to define our walker class EDD_Menu_Panel_Walker. We will just extend the existing Walker class and create a rendering method:

Inside the method start_el is everything we need. We are getting some possible object ID’s (because some of them could be retrieved from the database). If not, we just set them to the current menu placeholder or to zero. At the bottom of this method, we are setting our custom classes in the form of edd-.... The last part are the hidden inputs that are required for our JavaScript to work.

Easy Digital Download Pages

Now that we have everything set up and ready to use, we need our pages. We will use the function edd_get_option to get all the page’s IDs.

Easy Digital Downloads provides with 5 pages that we can set. If any of those 5 pages is set, we will push it to our array of pages. What we are pushing to that array are the page objects which are retrieved with the function get_post.

At the bottom of that, we are also using a filter edd_menu_panel_pages. If there are any custom pages added for Easy Digital Downloads, they can also be added here to render them in our custom menu panel.

Conclusion

By building custom menu panels, we are creating a better UX for our clients and we can also make it easy on ourselves to create various navigation menus with similar links. This code is almost ready for production, so be sure to check if Easy Digital Downloads is activated before adding this custom menu panel.

I am also working now on my new eBook “Easy Digital Downloads for Developers”. You can sign up on the landing page of that book and get notified when the eBook gets published. 

Become a Sponsor