How to Add Button to WordPress Header Menu (No plugin needed!)

I’ll show you how to add a button to the WordPress menu. We will add the button to the header navigation. No plugins needed! Just a few lines of code that you need to copy and paste.

You will be able to choose if you want to add an icon inside the button and obviously change colors and so on.

Add a button to the WP header navigation:
00:00 What we will do
00:25 Add a link to the menu with a CSS class
02:41 Alternative CSS
03:55 Customize button color
06:28 Customize button icon
06:59 Customize button hover

Let’s add a button to the WordPress menu with a bit of CSS, so it will appear in the header navigation. The call-to-action (CTA) will include an icon and you will be able to adjust the color, size, and some other basic settings.

Some of the above links might be affiliate links.

[darlhouse]

Thank yo so much!!! I can't tell you how long I have been trying to do this with no luck...very much appreciate you!!

[juliociamarra]

Thank you for this guide, it's AMAZING and very easy to follow.

[DavidLeBlanc]

So obvious, which probably explains why I never thought of it. Thanks, Robert, very useful little tip!

[ce]

You are incredible! Easy to understand and worked perfectly!

[iivanadevic]

Thank you so much. You helped me a lot and you explained it so well and simple.

[donaldmeckanzy]

Thanks for sharing this. It's super helpful

[sherion]

Thank you Robert! Very helpful as always!

[hannahbanana]

Fantastic tutorial, THANK YOU SO MUCH!!!

[Mr_Web]

Hi Rob, which screen recorder do you use? I'm using OBS but I really like the zoom in effect there at 1:14. Is that done in post-production or directly from your screen recording software? Thanks 👍

[khurramsoomro]

Fun and easy to implement. thanks chmap!

[StephanieKerwin]

Thank you so much for this video! It was so helpful :)

[sergio_grez]

amazing! didn't know this could be done!!!

[SAPrivateSchools]

Best type of video! Perfectly executed.

I was in and out with exactly what I wanted within 2 minutes.

Gets a like and subscribe from me, thanks my man!

[blackbirdme]

Thanks mate, it was very simple and clear.

[drewmichaels]

Thank you so much!! Helped me do something I didn't know how to 🤣

[rajasamsam]

Your videos calm me down. Great Brother.

Also, I was thinking if in responsive mode I can show that button with hamburger icon.

[Muse-ndrp]

Hi Rob, great tutorial! Thank you for sharing and it was really helpful. I wonder if there is a way to create 2 different styles of custom buttons on the headers using this method?

[evanrees]

This worked very well, thanks!

Do you have a tutorial on how you created the moving dust like particles in the background of your website? Thanks!

[hoqlken]

Really Helpful. Simply Amazing. Icon isn't getting displayed, what have I to do?

[nellietiessen]

@tipswithpunch thank you for the tutorial! Is there a way to put in more buttons in different colours in the menu? thank u :)