Create a Custom Menu in WordPress

Many of you asked me how to create a new custom menu in WordPress. This is actually pretty easy when you know what you are doing. It consists of two steps:

Register the new menu

The first step is opening your functions.php. Scroll to the bottom of the file. If you’d like to add only one custom menu, add the following code on a new line:

 

 

In this example, New Custom Menu is the name that will appear in your admin dashboard’s menu page to make it understandable for human eyes. The “custom-menu” name is what WordPress will understand to execute your code properly.

Now, you can call your custom menu any name, but we recommend that you make sure only the human-readable name contains spaces and capital letters.
If you would like to add multiple menus to your site, you can add them to a new line, like the code below:

 

 

You can add as many new menus as you’d like. The same rules for naming them will apply.

After saving the code,  head over to Appearance > Menus in your WordPress dashboard. There you should be able to see that your new menu is listed under the “Theme Locations” of the “Menu Settings” section.

Now, the job isn’t finished here. We have the backend ready and we can add/remove items from the menu tab within WordPress but we still need to add the new custom menu in the frontend of your site so it will render.

Adding Menu Locations to Your Theme

Here, depending on where you want to render this menu you will need to customise different files. If you’d like your menu to appear at the top of your page, for example, you’ll need to edit the header.php file. In the other hand, if you would like it to appear in your footer, you will need to edit the footer.php file.

Ir is important to note that you can place your menu anywhere and any template so you could add it to the sidebar by editing sidebar.php or even into the page itself and editing the page.php

The way you can place your new custom menu wherever you’d like is with this minimum code. There are more options that you can set into the array but this would be the barebones that you need to add to any of these locations.

 

 

Just replace “custom-menu” with a WordPress-readable name you chose. You probably want to style your menu with CSS so it goes beyond basic functionality and also looks great. To do this, you’ll need to create a class and add it to your theme with the following code.

If you want to style your menu with CSS so it looks great like the rest of your website. You will need to add a CSS class. There is an option to add a CSS class to the menu container called “container_class”. You can use it like the following code:

 

 

Just like before, replace “custom-menu” with the name you chose. In this example, I named my CSS class that I created “custom_menu_class”. You can change this with the CSS class you want to use for the menu container.

Related posts