Incorporating a button into your main navigation menu enhances your site’s call to action, attracting more visitors to your key pages. This method also allows for a consistent button presence across all pages and posts.
For instance, WPForms, one of our partner brands, successfully integrated a ‘Get WPForms’ button in their WordPress header. This straightforward addition has significantly boosted conversions and increased sales.
By positioning the button prominently, WPForms facilitated visitor engagement, leading to improved interaction and a higher number of leads.
In this article, we will guide you through the simple process of adding a button to your WordPress header menu.
What Are the Benefits of Adding a Button to Your WordPress Header Menu?
Typically, WordPress navigation menus consist of standard text links, making them visually uniform and lacking standout features.
Nevertheless, certain links carry more significance than others. For instance, you might want to highlight a link to an online order form or the registration page for your WordPress membership site.
By default, these crucial links blend in with the rest of the header menu.
You can enhance the visibility of these links by transforming them into buttons, which can lead to increased clicks and conversions.
By default, WordPress allows you to add buttons in posts and pages using the Buttons block, but adding them to navigation menus is not possible.
Let’s explore how to incorporate a button into your WordPress header menu.
How to Add a Button to Your WordPress Header Menu
First, you need to add the link that you wish to convert into a button.
Navigate to the Appearance » Menus section in your WordPress dashboard and include the link in your navigation menu. For comprehensive guidance, refer to our tutorial on adding a navigation menu in WordPress.
Next, click on the Screen Options button located at the top of the page.
This will display a panel with additional options. Just check the box next to ‘CSS Classes.’
Now, expand the menu item you want to convert into a button.
You will see a new CSS class field where you can enter a class name. You can name the CSS class whatever you prefer, but for this tutorial, we will use menu-button.
After entering a name, click the ‘Save Menu’ button to apply your changes.
You have successfully added a custom CSS class to your menu item. Now, you can customize its appearance using custom CSS code. This can be done through the WordPress customizer or by utilizing a code snippets plugin.
How to Add a Button to Your WordPress Header Menu Using WPCode (Recommended)
The most effective method for adding custom code to WordPress is by using WPCode. This top-rated code snippets plugin enables you to incorporate custom CSS, PHP, HTML, and more.
By not directly editing theme files, you can prevent many common WordPress issues. This also allows you to update your theme or switch to a new one without losing your custom code.
If you decide to remove the button at any time, you can easily disable it with just one click.
To get started, you will need to install and activate the free WPCode plugin. For detailed instructions, refer to our step-by-step guide on how to install a WordPress plugin.
After activating the plugin, navigate to theCode Snippets » + Add Snippetsection in your WordPress dashboard.
In this section, you will find a variety of pre-made WPCode snippets that you can add to your site. These include options to completely disable comments, upload unsupported file types, disable attachment pages, and much more.
Hover your mouse over the ‘Add Your Custom Code (New Snippet)’ option and click the ‘+ Add Custom Snippet’ button when it appears.
Next, choose ‘CSS Snippet’ as the code type from the list of options that appears on the screen.
On the next screen, enter a title for your code snippet.
The title is for your reference, so feel free to use any name you prefer.
Once that’s done, you can paste your CSS code snippet into the ‘Code Preview’ box:
.menu-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;
}
.menu-button a, .menu-button a:hover, .menu-button a:active {
color: #fff !important;
}
When adding the code snippet above, be sure to replace menu-button with your desired CSS class name.
This code snippet creates an orange button with a shadow effect, as illustrated in the following image.
Feel free to experiment with the CSS code to discover various effects you can achieve. For instance, you can modify the background color, change the link text color, add borders, and much more.
If you wish to use a different color, you will need to know the hex code for that color. If you’re unsure about which codes to use, you can refer to a resource like Color Hex.
Once you are satisfied with the code, click the ‘Inactive’ toggle to switch it to ‘Active’, and then press the ‘Save Snippet’ button.
Now, when you visit your WordPress website, you will see the new header menu button in action.
Add a Button to Your WordPress Header Menu Using the Customizer
If you prefer not to use a plugin, you can add code directly through the built-in customizer.
Simply navigate toAppearance » Customize,where you will see a preview of your site on the right side, along with various theme settings in the left-hand column.
To begin, click on the ‘Additional CSS’ option.
You will now see a box where you can input your custom CSS code.
Once again, you can use the code snippet provided above as a foundation.
When you are pleased with the appearance of the button, click ‘Publish’ to make your changes live.
Bonus: How to Add a Click-to-Call Button in Your WordPress Header
For small business websites, consider adding a click-to-call button to your navigation menu. This feature simplifies contact for visitors and can enhance your site’s SEO by improving user experience.
To add this button, go to the Appearance » Menus section in your WordPress dashboard and expand the ‘Custom Links’ tab on the right.
Here, enter your VOIP phone number in the URL field and provide a label for the button. Then, click the ‘Add to Menu’ button.
After adding the click-to-call button to your navigation links, remember to click the ‘Save Menu’ button to save your changes.
For more detailed guidance, check out our tutorial on adding a click-to-call button in WordPress.
We hope this article has helped you learn how to add a button to your WordPress header menu. You might also find our guide on creating a sticky floating navigation menu in WordPress and our tutorial on adding conditional logic to menus in WordPress useful.
If you enjoyed this article, consider subscribing to our YouTube Channel for informative WordPress video tutorials. You can also connect with us on Twitter and Facebook.
