Custom Website Navigation Menu in WordPress

When it comes to managing a website menu, WordPress is one of those platforms where you can do almost anything. All it takes is spending a couple of minutes in the admin panel, and using drag and drop options, you can make your navigation menu look just the way you want. The same thing goes for custom menus. Creating and managing them is really easy, and anyone can do it by adding a few lines of code.

1# Create custom menu in WordPress dashboard

To create custom menus is really simple. I will show you all the steps you need to take in order to build your own custom menus.

Let’s take it one step at a time.

To customize the default menu of your website, you have to enter the WordPress dashboard, click on Appearance, and then on Menus. The first thing you need to do is to give the menu a name and then click the Create Menu button.

In case you need the main menu, and a secondary one, you will need to create a one more menu structure.

You can also edit your functions.php file and insert next code:

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

After creating it, you may start adding your menu items. All your website’s categories, posts, and pages are gathered in the left column, and from there, you can simply add them to your custom menus in just a few clicks.

#2 Choose your custom menu’s location

Now that you have the custom menu ready, it’s time to choose where you want it to appear. But there’s an important thing to know here.

1. Not all WordPress themes support multiple menus. For instance, some themes let you create footer and above-header menus apart from the default ones.
2. If you are making a custom theme, you will need to insert a few lines of code to let WordPress know where to insert all the menu code generated.

You can manage them from the Manage Locations tab right here:

#3 Display your Custom Menu in a custom template

Next step if you are making your custom theme will be to display the new navigation menu in your WordPress theme. If you are using some complete WordPress theme you can skip this step. The most common place to put your navigation menus are usually placed is in the header section of a website just after the site title or logo.

However, you can add your navigation menu anywhere that you want, like social links in the footer.

You will need to add this code in your theme’s template file where you want to display your menu, probably in header.php file.

<?php
wp_nav_menu( array( 
    'theme_location' => 'primary', 
    'container_class' => 'custom-menu-class' ) ); 
?>

You can adjust naming in ‘theme_location’ => ‘primary’ with your theme location name with the one you chose in the admin panel. Optionally you can also add custom CSS class to a menu with ‘container_class’ => ‘custom-menu-class’.

#4 styling your custom menu

When styling your custom WordPress menu you need to think about responsivity for mobile users. Today the best practices for a mobile menu would be making hamburger menu which makes menu slide in when needed. The easiest route is installing a plugin or use some library like Slicknav. In case of Slicknav just include js and CSS files and simply call a js function with an id of your menu wrapper.

<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="SlickNav/jquery.slicknav.min.js"></script>

Your menu code generated from WordPress should look something like this:

<ul id="menu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>

The only thing left to do is call js function with an id of our menu

<script>
	$(function(){
		$('#menu').slicknav();
});
</script>

That’s probably the easiest and the fastest route to go, you don’t need to update or depend on some plugins.

If you have the skill to make a custom styling with your navigation you can make it even better by checking our last blog post about web animations.