Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

how to add a button in WordPress header

How to Easily Add a Button to Your WordPress Header 

Written By: author image Stacey Corrin
author image Stacey Corrin
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.
     Reviewed By: John Turner
reviewer image John Turner
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

Do you want to learn how to add a button in WordPress header menus?

Adding a button in your header navigation menu lets you make a more eye-catching call to action. That way, you can drive more clicks to important web pages and improve user experience by helping visitors know where to click next.

In this article, we’ll explain step-by-step how to add a button in WordPress header menus.

Why Add a Button to Your WordPress Header Menu?

Navigation menus on WordPress websites are typically text links that all look similar. As such, each menu item has the same importance, weight, and urgency.

If you were to add a URL to an important order form, or a registration page, it would look the same as the other links in your menu. It won’t stand out or look urgent enough for users to click first.

WordPress header without button

However, turning that important link into a button will instantly make it more noticeable. Besides being able to find it more easily, a button will improve visitors’ user experience and engagement with your WordPress site.

WordPress header with menu button

Despite having button blocks for posts and pages, WordPress doesn’t currently offer menu buttons by default. Fortunately, there are a few ways to add buttons to your menu, and they’re relatively easy to implement.

With that in mind, let’s look at 2 ways to add a button in WordPress header menus without writing HTML or CSS code.

How to Add a Button in WordPress Header Menu with SeedProd

First, we’ll show you how to add a button to your header menu using a powerful WordPress plugin called SeedProd. We recommend this method first because it offers the most customization options and lets you build your header menu visually with drag-and-drop.

SeedProd WordPress website builder

SeedProd is one of the top landing page and website builders for WordPress. It lets you create flexible, SEO-friendly WordPress themes, landing pages, and complete websites without hiring a developer or adding shortcodes to your site.

With its drag-and-drop page builder, you can also build a custom header, footer, or sidebar for your site and easily add header buttons with its Button block. Moreover, there are countless other WordPress blocks you can use, including WordPress widgets, countdown timers, optin forms, galleries, before and after sliders, and many more.

So follow the steps below to add buttons to your WordPress header with SeedProd.

Step 1. Install and Activate SeedProd

First of all, you’ll need to get a copy of the SeedProd plugin and download it to your computer. We’ll be using SeedProd Pro for this tutorial because it includes the Theme Builder feature.

In your account dashboard, you’ll see a large download button to save the plugin .zip file. It’s also a good idea to copy your license key at this stage because you’ll need it shortly.

Find your SeedProd license key

After downloading the plugin, head to your WordPress dashboard and upload the plugin files. You can always follow this guide on installing and activating a WordPress plugin if you need help.

Once you’ve done that, head over to the SeedProd » Settings page and paste your license key.

enter your license key

From there, click the Verify Key button to unlock your Pro features.

Step 2. Choose a Premade Template

With your license key active, you can now decide which layout you’d like to make with SeedProd. There are 2 different approaches that you can take, which are as follows:

  1. WordPress Theme: make a custom WordPress theme to replace your current website design with a custom header template. (no code required).
  2. Landing Page: create a single page and add a custom header to that page only while keeping your existing theme.

For this guide, we’ll walk you through option 1 because it will replace the navigation menu across your entire website. But if you prefer option 2, you can follow this guide to create a landing page in WordPress, then return to this tutorial from step 4.

Since we’re choosing the WordPress theme option, you’ll need to go to SeedProd » Theme Builder and click the Themes button.

choose a website kit seedprod

This will bring up a library of pre-made website kits you can import with a single click.

You can filter the templates by WooCommerce, popularity, newest to oldest, and vice versa. When you’ve found a theme you like, go ahead and click the tick icon to launch it.

Choose a theme template kit

Once your theme has finished importing, you’ll automatically see a page like this:

Theme builder template parts

It includes a list of the templates that make up your WordPress theme, and you can edit each with SeedProd’s visual drag-and-drop builder.

Step 3. Customize Your Header

Since you want to add a button in your header, let’s go ahead and edit the Header template. Scroll down until you find it in the list, then click the Edit Design link.

Edit WordPress header

When you open the header template, you’ll see a 2 column layout like this:

SeedProd header builder

As you can see, there are various WordPress blocks on the left and a preview of your design on the right. You’ll be able to click anywhere on your design to change the content and drag blocks from the left panel to add more features to your page.

When you look at the current header layout, you’ll see a column with an Image block and a column with the Nav Menu block.

header columns

To add a button to the header, you’ll need to add a 3rd column, which we’ll show you how to do now.

First, hover over your header section until it has a purple outline, then click the Duplicate Section icon.

Duplicate header section

Doing that will add a copy of your header beneath the first.

Next, hover over the column in your first section until it has a blue outline, then click the Trashcan icon to delete it.

Delete original row

You’ll now have an empty section with the option to choose a new column layout. So go ahead and click the 3-column layout.

Choose a 3 column row layout

Now you can hover over the Move icon on your duplicated section and move the image and nav menu blocks into your new section.

Move blocks into your new columns

This will leave you with an empty column where you can add a Button block.

Before going to the next step, make sure you delete the old header section by clicking the Trashcan icon.

Delete the duplicated row

Now you’re ready to create a button for your WordPress header menu.

Step 4. Add a Button to Your Header

Adding a button to your header with SeedProd is easy. Simply find the Button block in the left sidebar, and drag it into the empty column in your header area.

Add SeedProd button block to your header

Once the button is in place, you can click it to customize the button link text, button sub-text, link, alignment on mobile and desktop, and button size.

Customize button block

You can even add custom icons before and after the button text by choosing from the library of Font Awesome icons.

Add custom icons to button block

For even more customization options, click the Advanced settings tab. This is where you can edit the text color and typography, change the background color, add a box shadow, border radius, spacing, custom CSS classes, and even hide the button on specific devices.

Advanced button customization options

Plus, the Animation option is a fantastic way to make your button stand out more.

Button animation settings

When you’re happy with how your menu button looks, make sure you click the Save button.

Save your WordPress header

Now you can continue customizing the rest of your WordPress theme. For instance, you can edit your blog page, single page templates, and sidebar or change your WordPress footer.

Step 5. Publish Your Changes

After customizing the rest of your website, the last step is to make those changes live. To do that, first head back to the SeedProd » Theme Builder page.

Next, find the Enable SeedProd Theme toggle in the top-right corner and turn it to the Yes position.

enable seedprod theme

Great stuff! You can now preview your WordPress theme and see your header button in action.

Example of how to add button in WordPress header with SeedProd

Adding a Button to Your WordPress Header Menu Without a Plugin

Some people won’t need the full flexibility and customization options of a page builder, and others prefer to limit adding more WordPress plugins to their website. If you fall into either category, the following method is for you.

We’ll show you how to use the default WordPress full site editor to add a button to your header next without a plugin.

First, go to Appearance » Editor from your WordPress dashboard. This will open the WordPress full site editor, which uses blocks to build your website.

Next, open the sidebar, click the Template Parts heading, and select the Header option on the right-hand side.

WordPress theme editor header template part

Once you’ve done that, you’ll see a visual layout of your WordPress header. Inside the editor, click the Navigation heading.

Click the navigation options

You’ll see the navigation layout settings in the right sidebar, but first, click the (+) plus icon to start adding your menu links.

Add new menu links

You can click and search for any page to add it to your menu.

With your menu links in place, click the (+) plus icon again to add a new WordPress block. This time, search for the Button block and add it to your header.

Add WordPress button block

Now enter the button text and click the link icon to add the link you want visitors to click. In our case, we’ll add a link to our free report.

Add button text and link

In the block screen options on the right, you can customize your header button by changing the following settings:

  • Fill or outline button style
  • Width percentage
  • Text and background color
  • Typography size
  • Padding
  • Border radius
  • Additional CSS and class name
  • And more.
Customize menu button

When you’ve finished customizing your button, click the Save menu button in the top-right corner.

Now any page that uses the Header template part will show your menu button and navigation links.

WordPress header with menu button

If you’re using a theme that doesn’t include functionality for the site editor, you can follow this guide on adding a button to your menu using the older menu customizer.

However, the best and easiest solution is to use SeedProd’s drag-and-drop page builder.

That’s it!

We hope you’ve found this tutorial on how to add a button in WordPress header menus helpful. You might also like the following tutorials for customizing your WordPress website:

Thanks for reading! We’d love to hear your thoughts, so please feel free to leave a comment with any questions and feedback.

You can also follow us on YouTubeX (formerly Twitter), and Facebook for more helpful content to grow your business.

author avatar
Stacey Corrin Writer
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.