How to Add a Button to the Header Menu in WordPress

add a button in header menu

When a visitor land on your page, your header plays a critical role in navigating through the website. By incorporating a well-designed button, you can not only make your menu more visually appealing but also direct your audience to important sections, encourage them to take specific actions, or even promote special offers and events.

If you don’t know how to add a button in your WordPress header, then this post is just for you. Here, I have shown the whole process for block editor step by step. 

Let’s start. 

Adding a Button to WordPress Header

You can add a button to your menu by creating everything from scratch, or you can customize your existing menu and then add a button. Here, I am showing you to add a button from scratch. 

Step 1: Open the Header

From your WordPress dashboard, navigate to Appearance -> Editor.

Now, click on Patterns.

 From the template parts, click on ‘Header’ and then click on the existing header.

Step 2: Delete Everything

First, delete everything in the header. You can delete it by selecting the block and pressing the ‘Del’ button. Or you can create a new one by clicking on the ‘+’ beside the patterns.

Step 3: Add Header Content

Here, I will insert site title, navigation menu and then a button on the header. To do it, click on the Add Block button and search for ‘Row’. Insert the block by clicking on it. 

If you want to put a title on the first block, just click on the block and search for the ‘Site title’ block. 

Then, insert the block by clicking on it. 

Again, click on the Add block button and insert the ‘Navigation’ block. 

Step 4: Add a Button in the Header

In this step, click on the header and then again click on the three dots (option).

You can add a button before or after the header menu. If you like to add a button after the menu, then click on ‘Add after’. 

Now, click on Add Block (‘+’ sign) and insert the button block. Customize the button according to your needs. 

Step 5: Bring the Button Close to the Header Menu

One thing you will notice is that there is a gap between menu items and button. To remove it select the row block and click on three dots.

Select ‘Add before’.

Now adjust the spacer as you require.

After then, click on the save changes button to save your changes. 

When you are done, your button will look something like this below.

If you want to customize the existing menu and then add a button, then follow step 1, and then jump to step 4, and continue to add the button. 

Do I need to take a backup before adding a button to the header?

Can I add Icons to the header menu?

Final Words

I hope this post will help you to add a button in your WordPress header menu. If you face any problems, comment below, and I will be happy to help you. If you liked the post, share it with your friends so that they can also do it on their own. 


Updated on 2024-06-07 (Uzzal Raz Bongshi)

  • Updated title.
  • Updated the whole process.
  • Updated all the images.
  • Added FAQ section.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the Best Blocks Plugin at 20% OFF!

Need help?