How to Register and Style A Navigation Menu in WordPress Theme?

How to Add & Style A Navigation Menu in WordPress

WordPress makes it very simple and easy to create and manage Navigation menus. Almost every WordPress theme has a primary navigation area in the header section. You don’t always need to create a default menu for your website, WordPress can display a list of pages as a fallback menu.

More Articles About WordPress Theme Development

You can create new navigation menus under **Appearance > Menus. To change the position of links, simply drag each item into the order you prefer. If your theme supports multiple menus, Under Menu Setting section, You can select display location for your menu.

In this tutorial, I am going to show you how to add a support for a new menu in your theme. I am going to create a TwentySixteen child theme. Never edit your parent theme files directly, Always create a child theme to customize your theme files.

You don’t need to create a child theme if you just want to add some new styling with CSS. You can add new CSS under Appearance > Edit CSS. But if you want to add new widgets, menus or new custom pages to your theme, create a child theme.

With a child theme, You can add new custom pages such as custom pages for products or categories. You can read this step by step tutorial to learn how to code a landing page using child theme.

TwentySixteen Theme supports two navigation menu. First one for Primary links and the second one for social media links. Let’s learn how to add a new menu in the footer section of our child theme.

You can use any theme as a parent theme, I am using TwentySixteen theme. Local WordPress installation makes development process simple and easy. I have installed WordPress locally with WAMP server. After setting up WordPress locally, run your local WordPress installation.

Create a Child Theme

I am not going to explain everything about child themes, read this child theme tutorial to learn how to create child themes from scratch. For our child theme, we need three files.

functions.php
footer.php
style.css

Create a new folder and name it TwentySixteen-child or anything you like. My child theme name is JustLearnWPChild, new create three required files. Copy footer.php from the TwentySixteen theme and paste it in your child theme folder.

Open style.css file in your TextEditor and add following code in style.css file. This markup is required.


 /*
     Theme Name:   JustLearnWP Child
     Theme URI:    JustLearnWP.com/
     Description:  A Twenty Sixteen child theme. Support new navigation menu in the footer.
     Author:       Tahir Taous
     Author URI:   https://justlearnwp.com/
     Template:     twentysixteen
     Version:      1.0.0
*/
body{background-color: #e3e3e3;}

I have also added the new background color for the body. When you will activate this child theme, You should see new background color. If you don’t see new background color, something is wrong with your code.

If you will visit Appearance >Themes. You will see your new theme without any screenshot because we have not added screenshot file for this theme. It means our child theme is working and we can add new functions in our child theme.

Enqueue Parent and Child Theme Styles

Open functions.php file and add the following code to enqueue parent theme styles.


<?php
function theme_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Activate your child theme and your child theme. You will see a new background color. it’s time to add our new navigation menu in the footer section of our theme.

Customize The Footer Menu

Open the footer.php file in the child theme. Add the following code just before </footer> closing tag, save your changes and reload front page of your local website. You should see a list of all pages in the footer area.


<?php wp_nav_menu(); ?>

For the footer menu, we don’t need a drop down menu and we don’t want to display all the pages in the footer menu. Normally people use footer menus to add links to privacy, terms, legal and other pages.

If the menu doesn’t exist, WordPress uses wp_page_menu function to display all the pages. So let’s change the fallback and depth settings. We can use Depth parameter to define How many levels of the hierarchy should be included in the menu.

Now replace <?php wp_nav_menu(); ?> the with following code.


<?php
    wp_nav_menu( array(
        'theme_location' => 'footer-menu',
        'depth'    => 1,
        'fallback_cb'    => false,
        'container_class' => 'footer-menu',
    ) );
?>

We have defined three parameters. We want to display this menu in the footer area. 'depth' => 1, means we want to display top level pages only, we don’t need drop-down link for footer menu and 'fallback_cb' => false, means if our menu does not exist, do not display anything. 'container_class' => 'footer-menu', will generate a div with class="footer-menu". We will use this class to style our footer menu.

Register New Navigation Menu

Now if you will reload your page, you won’t see anything. We need to register our navigation menu. Open functions.php file and add the following code to register our navigation menu.


function register_footer_menu() {
    register_nav_menu('footer-menu', __('Footer Menu'));
}
add_action('init', 'register_footer_menu');

Now we have successfully registered our footer menu, we can use WordPress admin area to add our desired pages in the footer menu.

Add Links to Your New Navigation Menu

Go to Appearance > Menus and create a new navigation menu. Type your menu names such as Footer Menu Links and click create menu button. Add few links and select Footer Menu under Menu Settings. Visit front end of your website and you should see your new menu.

Adding Styles to New Navigation Menu

Our menu is ready but now we need to style our footer menu. Add the following code into your child theme’s style.css file, save changes and reload the front page to see your new navigation menu.


    .footer-menu ul {
    margin: 0;
    padding: 0;
    margin-right: 1rem;
}
.footer-menu li {
    display: inline-block;
    float: left;
    list-style: none;
}

.footer-menu li a {
    margin: 2px;
    background: #23a085;
    padding: 4px 10px;
    border-radius: 2px;
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
}

.footer-menu li a:hover {
    background: #146f5b;
    text-decoration: underline;
    transition: .2s ease-in;
}

Our navigation menu is complete. I have added some necessary styling, removed list styles, changed default margin and padding. I have also floated list items t the left side to display all menu items in a line.

That’s all

That’s all you need to do to register and style a new navigation menu. It is very simple and easy. I hope now you will be able to add new navigation menus to your themes very easily. You can download child theme files for this tutorial here.

JustLearnWP.com