Tutorials WordPress

How to Add a Button in Your WordPress Menu

April 17, 2022
Henry
528

Adding a button in the header navigation menu lets you create a more noticeable call to action. It can get more clicks to your most important pages and create a better user experience by helping your visitors take action.

To add a button, first, create a menu item that you want to turn into a button. Then add a class to that menu item. Finally, add some CSS code for that class. Here we show you how.

Why Add a Button in WordPress Header Menu?

WordPress Menus are usually plain text links that all look the same. In terms of design, all the links are given the same importance and weight.

By default, WordPress has options to add buttons in Posts and Pages using the Buttons block. However, it does not have a built-in option to add buttons in navigation menus.

However, there is an easy hack to convert any link in your WordPress navigation menu into a button.

Adding a Button in Your WordPress Header Menu

  1. From the WordPress admin panel, go to Appearance > Menus or Customize > Menus.
  2. If you have more than one menu, select the one you want to edit from the list.
  3. Add the menu item that will become a button.
  4. Click Save Menu or just continue to the next task.

After that, you need to click on the Screen Options button at the top (steps below). This will reveal a fly down menu with a bunch of options. You need to check the box next to the ‘CSS Classes’ option.

  1. Click the arrow on the menu item so it expands to show extra settings.
    If you don’t see an arrow, click Screen options in the upper right corner of the screen. In the section Show advanced menu properties, select CSS classes. (You’ll notice a new CSS class option in the menu item settings. Here, you need to enter a class name. You can call this CSS class any unique name you want.)
  2. In the CSS Classes field, enter a class for the menu item.
    It’s a best practice to prefix the class with a letter string unique to you to avoid conflict with other built-in classes. In this example, we’ll use nav-button for the class name.
  3. Click Save Menu.

Add CSS rules for the class

Now that we have added our own custom CSS class to the menu item, we can design it by adding our Custom CSS code.

Simply go to Appearance » Customize to launch the WordPress theme customizer.

You’ll now see a live preview of your website on the right and a bunch of theme settings in the left column.

Now you need to click on the Custom CSS/JS tab to expand it. This will show you a box where you can add your custom CSS code

Add the following CSS rules. Be sure to change the class in these lines to the custom class you used. Change the other settings for the button layout and style as you like.

.nav-button { 
background-color:#eb5e28;
border:1px;
border-radius:3px;
-webkit-box-shadow:1px 1px 0px 0px #2f2f2f;
-moz-box-shadow:1px 1px 0px 0px #2f2f2f;
box-shadow:1px 1px 0px 0px #2f2f2f;
}
.nav-button a,  .nav-button a:hover, .nav-button a:active { 
color:#fff !important;
}