How to Create Custom Menus for WordPress Themes

Menus are the inseparable part of any website. In WordPress you can create your own menu and menu structure from WordPress Admin area. Either you are thinking of creating a new menu in your theme or editing an existing menu to add menus items to your theme, this article can be useful for you. Most of the WordPress theme comes with predefined menu locations and layouts.In this article we will show you how to create custom menus for WordPress themes using codes as well as using plugins.

How to Create Custom Menus for WordPress Themes

We will be creating two menus one primary menu for the header and other secondary menu for the footer. First you have to register your navigation menus. This can be done by adding few lines of code mentioned below to the functions.php file.

function awsome_theme_setup(){
    register_nav_menu('primary', __('Primary Header Navigation'));
    register_nav_menu('secondary', __('Secondary Footer Navigation');
}
add_action ('init', 'awsome_theme_setup');

Here register_nav_menu is registering two menus name ‘Primary Header Navigation’ and ‘Secondary Footer Navigation’. This function ‘register_nav_menu’ will automatically register the custom menu support for the theme so you don’t need to call add_theme_support(). For more info about the function see Codex. From your WordPress admin dashboard go to Appearance > Menu. Create two new menus with names Primary Header Navigation and Secondary Footer Navigation.

Now you can select the menu items from the left and add them to the menu. After adding the menu items, don’t forget to select the theme location for each menu. Finally click Save Menu button to save the changes.

Displaying Custom Navigation Menus in WordPress Themes

Now it’s time to display the menu in your theme. In our case we will be displaying the primary header navigation that we created in the header.php file and the secondary footer navigation in the footer.php file. Open header.php file and add these codes to the place where you want to display the primary header navigation menu.

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

Similarly in footer.php file add these lines of code.

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

Now if you check your website you can find the header and footer menu being displayed. You can use CSS to change the look of your menu. The container_class will add the respective classes in each menu. You can use that class name to target each menu. For demonstration of CSS styling here is a sample code for primary menu.

.primary-menu-class ul {
    list-style: none;
}

.primary-menu-class li {
    padding: 20px;
    display: inline;
}

Using Plugins for creating custom menu

If you don’t want to mess around with the code then there some great plugins that can be used like Maxmegamenu and Navception. To install Max Mega Menu login to WordPress then go to Plugins > Add New and search for Max Mega Menu.

Also Read:   How To Effectively Implement Ajax in WordPress

How to Create Custom Menus for WordPress Themes

After you have successfully installed and activated the plugin you can see a new menu item called Mega Menu from where you will be able to create menu themes and manage the plugin options.

Enabling Max Mega Menu for a Theme Location

Navigate to Appearance > Menu. You will see a new meta-box called Max Mega Menu Setting in the right side of the page. If you have more than one menu then first select your theme location. Finally click the enable checkbox and save. This should convert your menu into a Mega Menu with the default settings and styles. Remember if you don’t already have a menu then first create a menu and then assign your new menu to a theme location at the bottom of the page.

Max Mega Menu comes with rich set of features and styling options even in the free version. You can find more details about all its features in the documentation page of Max Mega Menu. Here is how the menu looks with the default settings.

The aim of this tutorial was to teach you how to create custom menus for WordPress themes. I hope it was useful. You can check our other articles on “How to Add a Custom Sidebar in WordPress”.

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post