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:

WordPress Custom Meta Box

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:

https://gist.github.com/5221875

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.

Do you want more freelance clients?

I’ll show you what I learned over the last 15 years to grind out (from absolute scratch) a backlog of new clients wanting to hire you. Who your best client prospect are, what services you should be offering them, where to find them and more. Just enter your email address in the box below and let’s get started:

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on reddit
Reddit
Share on pinterest
Pinterest
John Morris

JOHN MORRIS

I’m a 15-year veteran of freelance web development. I’ve worked with bestselling authors and average Joe’s next door. These days, I focus on helping other freelancers build their freelance business and their lifestyles.

You might also like

This Post Has 2 Comments

  1. Don’t know how to thank you….This the thing that I’m looking for a very long time… 🙂

  2. You are awesome man. this helped me alot. Share your papal account. I will transfer some money to you. thank you.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Do you want more freelance clients?

Enter your email below to get started building your system for consistently bringing in new freelance clients:

WHAT OTHERS ARE SAYING

Ray Edwards

I recommend John every chance I get. If every person I worked with were as committed to excellence, punctuality, value, and unquestionable integrity… the world would be a better place. Highest recommendation.

Thabo Motsoahae

John is one of the best instructors I have come across, I learned a lot from his online tutorials.

Bob Patterson

Not only is John a very talented programmer and developer, he is also an excellent communicator. He has a talent for taking complex subjects and communicating them in terms that anyone can understand. This is a rare combination. This ability has enabled me to take my skills and knowledge to the next level. Thank you John for for all that you do.

Sukh Plaha

John is a fantastic and patient tutor, who is not just able to share knowledge and communicate it very effectively – but able to support one in applying it. However, I believe that John has a very rare ability to go further than just imparting knowledge and showing one how to apply it. He is able to innately provoke one’s curiosity when explaining and demonstrating concepts, to the extent that one can explore and unravel their own learning journey. Thanks very much John!

Daniel Mohlendick

On the Freelancing on Upwork course: “This is by far the best course i have watched on Skillshare!! Thank you so much.”

Lewis Howes

John is amazing at building membership sites. He converted one of my sites over from it’s existing (hardly working) platform over to the clean and simple to use WishList membership platform. I highly recommend using John and WishList for any of your membership site needs.

Close Menu