How to Add a Button in Your WordPress Header Menu (2024 Guide)
Do you want to highlight important links in your WordPress site‘s header navigation? By adding a button to your main menu, you can make key calls-to-action really pop. This drives more clicks and conversions compared to a regular text link that blends in.
The header menu appears on every page of your WordPress site by default. So adding a button here lets you put that link front and center across your entire website.
However, WordPress doesn‘t include built-in options for adding menu buttons. You can turn any link into a clickable button block inside pages and posts. But the header menu only supports plain text links out of the box.
Fortunately, with a bit of custom CSS, you can transform any navigation menu item into an attractive, eye-catching button. This step-by-step guide will show you exactly how it‘s done.
Why Add a Button in Your WordPress Header Menu?
The header menu is one of the first things visitors see when landing on your WordPress site. It‘s visible at the top of every page, making it the perfect place to highlight your most important links.
Some examples of key pages you may want to link to with a header button include:
- Ecommerce store or product pages
- Lead generation forms or landing pages
- Email list sign-up forms
- Free trial or account registration
- Booking/appointment scheduling
- Membership login page
- Online courses or digital downloads
- Affiliate product promotions
Really any destination relevant to your website‘s main goals could be button-worthy. The idea is to make your highest priority links stand out visually from the rest of the standard navigation links.
Buttons are much more effective than text links at drawing the eye and encouraging clicks. A study by Maxymiser found that adding a call-to-action button increased clicks by 62% vs a text link!
The other benefit of adding a button to your header menu is that it automatically appears on every page. You don‘t have to manually add it to each piece of content like other in-page buttons.
So if you really want to put a link in front of all your site visitors and maximize its visibility, there‘s no better place than the main navigation menu. Here‘s how to easily add buttons to your WordPress header in 2024:
How to Add a Button in WordPress Navigation Menu
The process of adding a button to your WordPress header menu involves a few steps:
- Add the link you want to turn into a button to your navigation menu
- Enable the CSS Classes option in the menu editor
- Assign a custom CSS class to the menu item
- Add custom CSS to style the button‘s appearance
Let‘s go through each step in detail.
Step 1: Add Button Link to WordPress Menu
Start by adding the link you want to transform into a button to your header menu. Go to Appearance > Menus in the WordPress dashboard.
Select the menu you want to edit, typically the Primary or Header menu depending on your theme. Click the "Add Items" button and use the panels to find the page, post, custom link, or other item you wish to add.
Click the checkbox next to the item and then "Add to Menu" to insert it. Drag and drop it into the desired position.
Make sure to give the menu item a short, descriptive navigation label. This will become the text of the button.
Step 2: Enable CSS Classes
By default, WordPress doesn‘t display the option to add CSS classes to individual menu items. We need to enable this so we can assign a special CSS class to our button item.
Click the "Screen Options" tab at the top right corner of the menu editor screen. In the menu that slides down, check the box for "CSS Classes". This adds the option to the menu item settings.
Step 3: Add a Custom CSS Class
Now expand the menu item you want to style as a button. Input a unique CSS class identifier in the "CSS Classes" field. For example, "button" or "cta-button".
Repeat this for any other menu items you want to turn into buttons, assigning each one a unique class name.
Step 4: Style the Button with CSS
The final step is to write some custom CSS code that will change the appearance of the menu items with your button CSS class.
We‘ll provide an example CSS snippet you can use as a starting point. But you can customize it to match your site‘s design style.
There are two places you can add this CSS:
- By installing the WPCode plugin (recommended)
- Through the built-in WordPress Customizer
Let‘s look at each method.
Option 1: Add Button CSS with WPCode Plugin
The easiest and most beginner-friendly way to add custom code snippets to WordPress is with the free WPCode plugin. This is the method we recommend, especially if you think you may want to add other custom CSS, PHP, HTML or JavaScript to your site at some point.
To start, install and activate the WPCode plugin if you haven‘t already. See this guide on how to install a WordPress plugin if you need help.
Then go to Code Snippets > Add Snippet in the WordPress admin sidebar. Give your snippet a title, select "Only run on site front-end", and change the Code Type to "CSS".
Now paste the following CSS into the code editor, replacing "button" with your actual CSS class name:
.button {
display: inline-block;
background-color: #1e87f0;
color: #ffffff;
font-size: 15px;
font-weight: 600;
padding: 12px 35px;
text-decoration: none;
text-transform: uppercase;
border: none;
border-radius: 4px;
}
.button:hover {
background-color: #0f7ae5;
}This CSS targets the menu item with your "button" class and applies the following styles:
- Displays as an inline-block element
- Blue background color
- White text color
- 15px font size
- Bold font weight
- 12px top/bottom padding, 35px left/right padding
- Uppercase text transformation
- Rounded corners with 4px border radius
- Slightly darker background color on hover
Feel free to customize the values in this snippet to change the button‘s appearance. Some attributes you can try modifying:
background-color– Button color. Replace the hex value with your desired color.color– Text color. Usually should be a light color for contrast.font-size– Button text size. Adjust up or down a few pixels if needed.padding– Spacing around button text. Increase/decrease values to resize button.border-radius– Corner rounding amount in pixels. 0 = square corners.
When you‘re satisfied with the button styles, click the "Inactive" toggle to switch it to "Active". Then click "Save Snippet" and view your site to see the new header button!
Option 2: Add Button CSS via Customizer
If you prefer not to use a plugin, you can add the button CSS through the WordPress Customizer. However, keep in mind this CSS will be tied to your active theme. If you ever switch themes in the future, you‘ll need to re-add it.
In your WordPress dashboard, go to Appearance > Customize. Scroll down and click the "Additional CSS" menu item.
Now simply paste the same button CSS snippet into the editor. Customize the values as described above to fit your design.
Click the "Publish" button to make your changes live. View the front-end of your site and you should see the new CSS applied to your header button!
Some Tips for Effective Header Buttons
Besides the technical details above, here are some general tips to keep in mind when adding buttons to your WordPress header menu:
Keep Button Text Short and Sweet
The navigation label for your button item will become the button text. Make sure to keep it concise, actionable, and clear.
Aim for 1-4 words at most. If you try to squeeze a whole sentence in there, the button will look awkward and run into other menu items.
Good button copy is direct and starts with a strong action verb. Think "Shop Now", "Subscribe", "Join Free", "Get Started", etc.
Make Your Button Stand Out Visually
The whole point of adding a header button is to make that link more eye-catching and noticeable than your regular text menu links.
So choose a button color that contrasts well with the background and catches attention. Bright colors like orange, yellow, red, green, or blue tend to work well.
Also consider adding an icon to reinforce the button‘s purpose. The code snippet above doesn‘t include an icon, but you can certainly add one with a bit more CSS.
Put the Button in a Prominent Spot
Where you place the button in your header matters too. Don‘t bury it between a bunch of drop-down submenus where it will get lost.
Generally the first or last positions in the menu work best. This lets the button serve as a "bookend" to your navigation and prevents it from blending in.
You may need to rearrange some other menu items to make room. Limiting your top-level header links to only the most essential pages is a good practice anyway.
Use Button for Key Conversion Actions
Be picky about which links you choose to "upgrade" to button status. The header menu is valuable real estate, so reserve it for the highest priorities.
Think about the main objective you want people to accomplish on your site. What‘s the one most important next step you want visitors to take from each page?
Common conversion actions include:
- Purchasing a product
- Subscribing to a newsletter
- Registering for a webinar or event
- Downloading a lead magnet
- Starting a free trial
- Booking a call or demo
- Becoming an affiliate
Let the button reflect your primary call-to-action. You can use slightly different wording than what‘s on the linked page, as long as the destination is clear.
Only Include One or Two Buttons at Most
It can be tempting to turn half your menu into buttons. But this quickly gets overwhelming and "too many choices" will actually hurt conversions.
One or two header buttons, max, is best. Any more and none of them will stand out or get clicked as much.
If you absolutely must include multiple buttons, try using different colors or styles to create a visual hierarchy. But really strive to narrow it down to one clear "main" call-to-action.
Make Sure Buttons are Mobile Responsive
Over half of all web traffic now happens on mobile devices. So it‘s critical that your header buttons look good and function properly on smartphone and tablet screen sizes.
Before you call your button design "done", make sure to test it on a few different devices. Open your site on your phone and see how the header menu looks.
Some common mobile issues to check for:
- Button text wrapping or overflowing container
- Button overlapping other menu items
- Button color not visible against background
- Button unclickable due to small touch target
You may need to add some extra CSS rules inside @media queries to optimize the button layout on mobile. Refer to our guide on responsive WordPress design for more tips.
Consider A/B Testing Button Designs
Finally, if you really want to optimize button performance, consider running an A/B split test. Create two or more variations of your header button to compare side-by-side.
Some elements you can test:
- Button color
- Button text copy
- Button icon
- Button placement in header
Use a tool like Google Optimize or a WordPress A/B testing plugin to divide traffic between the versions. Then measure which one gets the most clicks over time.
Let data be your guide when it comes to design! The button style that gets the best conversion rate is the winner. Though it‘s also important to consider the context of your site and audience, not just a single metric.
Keep Learning More About WordPress
Adding a call-to-action button in your WordPress header navigation is an easy way to boost clicks on your most important links. But it‘s just one small part of creating an effective, high-converting website.
For more tips and tutorials, see our ultimate guide on how to make a website with step-by-step instructions for beginners. Or dig into other topics like:
- How to Create a Landing Page in WordPress
- Best Drag & Drop WordPress Page Builders
- How to Use a Coming Soon Page in WordPress
- Best Lead Generation Plugins for WordPress
We hope this article helped you learn how to add a header button in WordPress without any special coding knowledge. If you have any other questions, feel free to leave a comment below!
