How to Add a Button to the Header Menu in WordPress

June 7, 2024

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.

Table of Contents

Adding a Button to WordPress Header

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?

If you are a beginner then it is wise to take a backup first as you may change the look entirely. Or you can create a new header and then set is as the default.

Can I add Icons to the header menu?

Yes, you can add icons to the header menu. Just follow the process and then insert icon on the place of header.

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.

Changelog

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

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

I hope you’ve found the post useful.

I just wanted to let you know that we’ve launched a new Table Block plugin. It’s an all-in-one table builder plugin that works seamlessly with the Block Editor. Check the plugin here. 😉

Written by:

Uzzal Raz Bongshi

Uzzal Raz Bongshi is a seasoned content writer with six years of experience, excelling in research, SEO, and tailoring content to diverse audiences. Passionate about storytelling, he constantly seeks to learn and create content that resonates deeply with readers. Outside of writing, he enjoys reading, playing outdoor games, and helping others.

One Plugin To Replace Them All