Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add a Button in Your WordPress Header Menu

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add a button in your WordPress header menu?

By adding a button to the main navigation menu, you can make your site’s call to action stand out and drive more traffic to your most important pages. It’s also an easy way to add the same button to every page and post.

In this article, we will show you how to easily add a button to your WordPress header menu.

Adding buttons in WordPress navigation menu

Why Add a Button in WordPress Header Menu?

WordPress navigation menus are typically plain text links, where everything looks the same and nothing really stands out.

A default WordPress header

However, some links are more important than others. For example, you may want to add a link to an online order form or your WordPress membership site’s registration page.

By default, these important links look just like the rest of the header menu.

You can make these links more eye-catching by turning them into buttons. This can get you more clicks and conversions.

A button in a WordPress header

By default, you can add buttons in WordPress posts and pages using the Buttons block, but you can’t add them to navigation menus.

That being said, let’s see how you can add a button to your WordPress header menu.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, then just keep reading.

Adding a Button in Your WordPress Header Menu

To start, you need to add the link that you want to turn into a button.

Simply go to the Appearance » Menus page in your WordPress dashboard and add the link to your navigation menu. For detailed instructions, please see our guide on how to add a navigation menu in WordPress.

Add a link to WordPress menu

After that, you need to click on the Screen Options button at the top of the screen.

This will reveal a panel with lots of new options. Simply check the box next to ‘CSS Classes.’

Show CSS classes in Screen Options

Now, click to expand the menu item that you want to turn into a button.

You’ll notice a new CSS class option where you can type in a class name. You can call the CSS class anything you want, but in this guide, we will use menu-button.

Add custom CSS class to a link

After typing in a name, click on the ‘Save Menu’ button to store your changes.

Now you’ve added a custom CSS class to the menu item, you can change how it looks using custom CSS code. You can either add this code via the built-in WordPress customizer or by using a code snippets plugin.

Add a Button in Your WordPress Header Menu Using WPCode (Recommended)

The best way to add custom code to WordPress is by using WPCode. WPCode is the best code snippets plugin that allows you to add custom CSS, PHP, HTML, and more.

Since you are not editing the theme files directly, you can avoid many common WordPress errors. You can also update your theme or switch to a completely different theme without losing your custom code.

If you want to remove the button at any point, then you can turn it off with a single click.

First, you will need to install and activate the free WPCode plugin. For more information, see our step-by-step guide on how to install a WordPress plugin.

Once the plugin is activated, go to Code Snippets » Add Snippet.

Add a custom code snippet to a WordPress website

Here, you will see all the ready-made WPCode snippets you can add to your site. These include a snippet that allows you to completely disable comments, upload file types that WordPress doesn’t usually support, disable attachment pages, and much more.

On the next screen, just hover your mouse over the ‘Add Your Custom Code (New Snippet)’ option and click the ‘Use snippet’ button when it appears.

Adding a button to a WordPress navigation menu using WPCode

On the next screen, you need to type in a title for the code snippet. This is just for your reference, so you can use anything you want.

Then, open the ‘Code Type’ dropdown and choose ‘CSS Snippet.’

Adding custom CSS to WordPress using WPCode

With that done, you are ready to paste a CSS code snippet into the WPCode editor:

.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, make sure you replace menu-button with the name of your CSS class.

The above cope snippet creates an orange button with a shadow effect, as you can see in the following image.

An example of a call to action button, created using WPCode

Feel free to play around with the CSS snippet to see what different effects you can create. For example, you can change the background color, link text color, add a border, and more.

If you want to use a different color, then you’ll need to know that color’s hex code. If you are not sure what codes to use, then you can use a resource such as Color Hex.

When you are happy with the code, click on the ‘Inactive’ toggle so it changes to ‘Active’, and then click on the ‘Save Snippet’ button.

Adding a button to the WordPress header menu using WPCode

Now, if you visit your WordPress website, you’ll see the new header menu button in action.

Add a Button in Your WordPress Header Menu Using the Customizer

If you don’t want to use a plugin, then you can add code using the built-in customizer.

Simply go to Appearance » Customize, and you’ll see a preview of your site on the right, plus a bunch of theme settings in the left-hand column.

To start, click on the ‘Additional CSS’ option.

How to add custom CSS to a WordPress website or blog

You will now see a box where you can add custom CSS code.

Once again, you can use the code snippet above as a starting point.

An example of a custom button in a WordPress header and menu

When you are happy with how the button looks, click on ‘Publish’ to make your changes live.

We hope this article helped you learn how to add a button in your WordPress header menu. You can also go through our guide on how to create a landing page with WordPress and the best email marketing services for small businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

18 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Nicole Hassell says

    This was helpful and created a button but it overwrites the link in my custom link….any idea how to stop that?

    • WPBeginner Support says

      None of the CSS should touch the link in your menu item, we would recommend ensuring that the link was not changed in your meu settings and that you don’t have a plugin that could be changing your link.

      Admin

  3. Sergio says

    Thaks for this useful guide!

    when I customize the button with CSS, the background occupies the entire height of the header. How can i modify this to fit more closely to the text? (remove excess background)

    Thanks a lot

    • WPBeginner Support says

      That would require editing your theme and what to edit would depend on the specific theme you are using.

      Admin

  4. Sawyer Smith says

    Hi, Implemented the css into my menu and it turned out great after some time troubleshooting. However, when my cursor hovers over the button, a wide white rectangle covers the text when cursor is hovering. How can I fix this so that nothing like this occurs during hover? Thanks.

    • WPBeginner Support says

      It likely is due to your theme’s default hover colors. If you are using the CSS from our article then you would want to add CSS code like the following:

      .menu-button:hover {
      background-color:#eb5e28;
      }

      Admin

  5. Nicole says

    This is very helpful, thank you! I’m wondering if you can tell me how to change the color of the text on the sub-menu (dropdown from the button) only?
    Thank you!

  6. Megan says

    When I follow all of these steps the button doesn’t appear at all.. it just does nothing. Any idea why this might be? I copied and pasted the exact code from here!

    • WPBeginner Support says

      Your specific theme may have CSS that would overwrite this code, if you check with your theme’s support they should be able to assist.

      Admin

  7. jj says

    Great help thanks!
    Is it possible to make the button something that links to another external site using the CSS?

  8. Dorothy says

    I really appreciate this! For the longest time, I wasn’t sure how to go about this. I was able to create a button in the nav with no problems following this. Thanks!!

  9. Stephanie says

    Thank you so much for this tutorial! I’m not a techie kind of person, and at first it didn’t work, because I was in my primary navigation menu, went to secondary and did the steps and voila! Added a little bling to my site!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.