WordPress allowed me to get a better job & better projects in just a Year. I will give you tips, tricks and guide you into WordPress development so you can get more income. Sign up to my 7-day email course!
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
We are adding a simple metabox with the name Easy Digital Downloads. To define the inner content, we will need to create the function
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
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
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
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
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.
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.
Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.