Creating a WordPress Menu Button

 In WordPress

Ever visited a site and wondered how they out those fancy buttons on their menu? There are certainly a number of plugins available for WordPress that can help you, and even some themes (like Avada) that provide this functionality. But there is also a simple way to create a WordPress menu button, without requiring any plugins.

Creating a WordPress Menu Button

To get started, go to the normal WordPress menu editor by clicking Appearance -> Menus. At the very top of your screen, click the Screen Options button to reveal a drop down panel. Under Show advanced menu properties you’ll see several checkboxes. Make sure CSS Classes is selected:

WordPress Menu Screen Options

Displaying additional WordPress menu options.

Now find the menu item you want to display as a button, and you’ll see a new field that lets you add CSS classes. Add a name that is unique within your theme, to avoid conflicts with other CSS selectors. I like to use menu-button since it’s descriptive and unlikely to clash with other styles in most themes:

WordPress Menu CSS Classes

Providing a custom CSS class for a particular WordPress menu item.

In this case we have a menu item with the text “Apply Now” which we want to display as a button. Now we need to define the CSS for the new class we have attached to the menu item. Some themes have areas for defining custom CSS, so try there first (usually under Theme options). There are also a number of plugins you can use, such as Simple Custom CSS. And finally, you can use the style.css in your child theme to add the WordPress menu button style (you are using a child theme, right?).

Regardless of how you apply your custom CSS, you’re probably wondering what that CSS actually looks like. That of course depends on what you want your button to look like. And the answer to that probably depends on the overall design of your site. All that to say, just use a CSS button generator and copy/paste the style into your site using one of the methods above. Here’s some very simple CSS for an example WordPress menu button:

Notice we include an anchor element after our class name. This shrinks the button down within the main clickable area of WordPress menu items. Without it, the button could possibly stretch too much and not look right. Below you can see the menu item in action:

wordpress menu button

Showing the WordPress menu button in action.

That’s it! No overhead of plugins to create them, though you might still have a need to use more sophisticated menu decorating plugins for other things like mega menus, embedding custom post types, etc. In that case you might find a plugin suits your needs better, but for me this simple CSS approach works 9 times out of 10.

Mike
Owner and Developer at Elvtn.
Recent Posts