Develop a WordPress Theme, 2021 -part 5, Navigation

Create and Enqueue the main.css file

In the css folder create a file named main.css. Next open the Functions.php file and add the code below to the load_css() function. Make sure it is below the Bootstrap register.

 ....
wp_register_style('main', get_template_directory_uri() . '/css/main.css', array(),false, 'all');
    wp_enqueue_style('main');
......

Modify the header file

Open the header.php file and copy the code below. this adds a header section and nav area to the previous code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <?php wp_head( ) ?>
</head>
<body>
<header>
 <div class="container">
  <?php 
  // nav area
   ?>
  </div>
</header>

Add theme support for menus

In the functions.php add the code below, this will enable menus in your theme.

// Theme options
add_theme_support('menus');

Add a theme location for menus

WordPress themes have theme locations that can be used to display content, such as menus. These have to be registered in functions.php. Add the code below at the bottom of the file.

//menus

register_nav_menus(
    array(
        'top-menu' => 'Top menu Location',
        'mobile-menu' => 'Mobile menu Location'
    )
)

Create a menu

Go to the backend and you should see menus listed in the appearance section, on the left of the screen. create a menu named Top bar and add the pages, click on Save menu.

Add the menu code to the header

Add the theme location to the header section. The wp_nav_menu() function takes an array parameter that gives the theme location a name. In this case the one we created earlier in functions.php, top-menu. We also add a class to the menu. This is used later by the css.

....
<header>
 <div class="container">
  <?php 
  // nav area
   wp_nav_menu(
    array(
        'theme_location' => 'top-menu',
        'menu_class'=> 'top-bar'
     )
   )
   ?>
  </div>
</header>
....

Style the header and nav area

Copy the code below into the main.css file. This uses flexbox to center and align the menu items.

header .container{
    display: flex;
    justify-content: center;
    align-items: center;  
    height: 100%
}
header .top-bar{
    list-style-type: none;
    margin: 0;
    padding:0;
    display: flex;
}
header .top-bar li a{
    padding: .25rem 1rem;
    color: white;
}
header .top-bar li:first-child{
    padding-left: 0;
}
header .top-bar li:last-child{
    padding-right: 0;
}

Add a menu in the backend, this will style the menu for a single level

Add multilevel menu support

Add a page named Our Team in the backend. Go to Appearance>menus and add it to the menu under About us. Drag it so that in becomes a sub item.

Looking at the front end you will see that the sub item displays all the time. Lets fix this.

Add the code below to the main.css file, an explanation follows. Ensure that the menu top bar li element has a position of relative

.......
header .top-bar li{
    position: relative;
}
........
/* 1st level sub menu */
header .top-bar li .sub-menu{
    z-index: 999;
    display: none;
    position: absolute;
    top: 100%;
    left:2em;
    background: white;
    margin: 0;
    padding:0;
    list-style-type: none;
    width: 200px;
    border: 1px solid black;
}
header .top-bar li .sub-menu a{
    color: black;
    padding: .25rem;
    display: block;
    text-decoration:none ;
}
header .top-bar li .sub-menu a:hover{
color: red;
}
header .top-bar .menu-item-has-children:hover .sub-menu{
    display: block;
}

Once the code above is added, the menu should look as below. When a top level menu item is hovered over the sub menu will show.

Leave a Reply

Your email address will not be published. Required fields are marked *