How To Add a Custom WordPress Menu to Your Header

New to DearBlogger? Welcome! You can find pretty much all the blogging advice here in video format on our YouTube Channel. Also FYI on DearBlogger.com we can now fix or create your blog for you. Thanks for stopping by!

We get a lot of questions about how to setup a custom WordPress menu. Of course, any beginner tutorial will explain how to replace the default WordPress menu – usually just a menu including sample page and home – with a menu you actually name and create in Appearance > Menus.

However, what if you want to create a custom WordPress menu that goes in some white space outside of your theme’s designated menu locations?

This post will show you how.

Quick Guide

We’ve been focusing on SEO more and more lately along with user experience. Let’s see if Google’s snippets this answer:

The recipe to create a custom WordPress menu is to start with your best few links. You can get any number of them for your menu but three links is a good size. Make an unordered list in a new WordPress post (using the ul and li tags). Now wrap the list in a div class and name it. That’s your HTML. Now write some CSS. Tell the div class to float right and the class li to display inline. The rest is simply margin, padding, fonts etc. Place your HTML near the top of your header.php file and CSS in your custom CSS window. Test locations of your HTML for best results. This method will cost you nothing and can change your site’s functionality so vs web developer it’s quite valuable to learn how to DIY. Good job!

The above Google friendly snippet will obviously teach you how to create a custom WordPress menu. For more detailed explanations, please continue!

Why Create a Custom WordPress Menu?

The ability to create a custom WordPress menu is a good skill to have.

For example, as you create a website for a client, they may request certain features inside the menu like a call to action button or social icons. It is very difficult to add a button or social icons to a default WordPress menu.

So, you would want to know how to recreate the text link parts of a menu and put them wherever you want.

That’s just one example of many out there.

Part 1: Custom WordPress Menu HTML

So the menu we make will be very simple, even more simple than WordPress themes setup a menun because those generally involve PHP.

We will just use HTML and CSS.

The HTML of your new menu should take the form of a unordered list, denoted by the “ul” tag in your new post editor.

In fact, the new post editor is a great place to create your menu! Head there, and write out the following:

1. a div class named whatever you’d like
2. a ul
3. as many li’s including a’s inside them
4. then close off each tag

So, for us it will look something like this:

<div class="custom-menu">
			<ul>
				<li><a href="https://dearblogger.org">Home</a></li> 
				<li><a href="https://dearblogger.org/blogger-or-wordpress-better">Best Blog Platforms</a></li>
				<li><a href="https://dearblogger.org/wordpress-blog-with-hostgator-hosting">Create a Blog</a></li>
				<li><a href="https://www.youtube.com/user/narayguy">Videos</a></li>
				<li><a href="https://dearblogger.org/authors/">Authors</a></li>
				<li><a href="https://dearblogger.org/author/greg">About</a></li>
				
			</ul>
		</div>

You’ll need to insert this HTML is your theme’s header.php file, ideally inside the body tag right after your theme’s #masthead tag or somewhere after the site branding area. This part will surely require some playing around, so make sure to make a backup of your header.php file before making any edits.

Pretty simple, then once your menu is up you will replace the a href’s with actual links.

Part 2: Custom WordPress Menu CSS

Now for the CSS styling.

Our menu needs the following:

1. Margin around it
2 A float direction
3. A list style type
4. A display command (which makes the menu go horizontally)
5. Padding inside the menu
6. Color
7. Text decoration (to remove decoration from the theme if needed)
8. Font
9. Font size

So, here you have all the basic CSS you would need:

.roguemenu {
 margin: 0.5em 3em 0 0;
 float: right;
}

.roguemenu ul {
  list-style-type: none;
}

.roguemenu li {
  display: inline;
  padding: 0 1em 0 0;
}

.roguemenu li a {
  color: #000;
  text-decoration: none;
  font-family: ‘proxima-nova’, Helvetica, Arial, sans-serif;
  font-size: 1em;
}

So there you have it! Just make sure to paste this CSS into your custom CSS window inside your theme, or inside a plugin which provides a CSS window like Site Origin CSS if you need it.