How to Add a Fully Functional Custom Meta Box to WordPress Navigation Menus

When I created WishList Login 2.0, I wanted to an easy way for users to add a dynamic login/logout link to their navigation menus. As simple as it sounds, it’s not something you can do natively in WordPress and we can requests for this kind of thing all the time.

In WishList Login 1.0, I had added an entire admin interface in the plugin settings that had all the necessary options for creating the link, editing its text, setting its position, and so on.

Of course, this was before WordPress added menus, so I didn’t have much choice… but, now WITH WordPress’ menus, it seemed silly to create a redundant interface… especially when the WordPress menus handled all the things need to added a menu link in a much clear way than my original interface did.

All that led me to figure out how to add my own meta box to the WordPress navigation menu interface with (important) the ability to add a custom link that contained certain parameters I needed in order to hijack the link’s display on the front-end.

Here’s what it looks like in the admin:

Notice the CSS class. This was really the most important part because it’s what allows me to identify this link later and change it to a login link if the user is logged out and a logout link if the user is logged in.

Here’s a look at the code to make this happen:

Most of this is pretty straight-forward.

1. You hook into WordPress using the “add_nav_menu_meta_boxes” hook.
2. You call add_meta_box() in your callback function setting “nav-menus” as the $post_type parameter.
3. Finally, in your callback function for add_meta_box() you lay out your meta box HTML.

It’s that last part that can get tricky in order to make the adding of your custom link item to the nav menu… so, we’ll look at this more in-depth.

1. First, you need to make sure your HTML is set up correctly. The JavaScript that actually processes the adding of the link to the menu selects your link item in a specific way… so altering the HTML can break it. The above works. I’d recommend copying it and then just altering the small bits you need to.

Or, you can do what I did which is to copy the Category meta box native in WordPress and change what I needed.

2. Next, you need to adjust the main container div ID and the submit button ID so they match. This is part of how the jQuery works. You need to change these so they are unique and you need to make them match.

In the example code, you’ll notice the name of the container div ID is “posttype-wl-login” and the name of the submit button ID is “submit-posttype-wl-login”. This is the kind of relationship these two items need to have.

3. Finally, you’ll edit the inputs in the un-ordered list. These are the bare minimum I needed for everything to work. You can alter the values of these to what you’d like to display be default. You can also check other native meta boxes to see what inputs are available. The important one in our case was the “menu-item-classes”. This sets the CSS classes the link item will have by default and is what I used to hijack the menu later on.

And, that’s it. Once you have that all set up. Your users will be able to add your custom link item from your custom meta box to any of their menus and it’ll have the information pre-loaded in it that you may need later on when displaying menus.

Later, I’ll write up a tutorial on how to hijack menu items when you display the menus, so you can alter your custom link as you need.