Creating WordPress Theme – Adding Navigation Menu

Creating WordPress Theme Adding Navigation Menu
Share this to your friends

Simple Custom WordPress Theme
In the layout we provided, we need to put our horizontal navigation bar under our header. I will be just putting sample categories in my navigation bar. You can put link of your pages if you want. In this example I will just be adding one custom link to my homepage and five sample categories.

Creating Categories for our WordPress Theme

In your WordPress dashboard, hover to Posts and click Categories. You will now have access to WP Categories page.
WordPress Categories Page
Fill the form and start creating categories.

Adding Menu Support

Now if you go back to your dashboard and hover to Appearance. You might not see a link pointing to WP Menu page. We need to put this code in our functions.php file to support adding custom menu in our theme.
In your functions.php file add :


function theme_nav_menu_init() {
      register_nav_menus( array(
            'primary' => 'Primary Navigation'
      ));
}
add_action( 'after_setup_theme', 'theme_nav_menu_init' );

If you add the code correctly, you can now see the link (Menus) when you hover to Appearance tab.

Creating our Custom Theme Header Menu

WordPress Menus Panel
You can now create a new menu for your theme.

For this tutorial :

  • I’m naming my menu “Header Navigation”
  • adding the five categories I created earlier
  • and assigning a Display Location

In the code we added in our functions.php file, we only register a single menu(primary). You can register more if you want but be sure to separate your theme location with comma(,). In this tutorial Primary Navigation will be our Display Location. Save your menu so that we can now display it in our header.

Using wp_nav_menu to Display Menu

Now we need to display our menu inside our header nav tag.
In your header.php file put this code :


<?php
wp_nav_menu( array(
      'theme_location' => 'primary',
));
?>

Be sure you put this code inside your <nav> tag.

In the code above, we put ‘primary’ as our theme location. That is what I registered earlier in our functions.php file. You can read more about wp_nav_menu here to know more about this function. But for now the code we added earlier will make our pages look like this :
WordPress Custom Theme With Navigation Links

Making Horizontal Navigation Bar Using CSS

If you’ve read the article about wp_nav_menu, you probably saw a list of arguments that can be added in our nav menu array. This can help us customize our menu. For this we will add a class(named ‘primary-navigation’) in our style.css file and set it as a value for our nav menu container_class.
In your style.css file put :


.primary-navigation ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
}
.primary-navigation li {
      float:right;
}
.primary-navigation li a {
      background: #990000;
      color:#7C7C7C;
      text-align: center;
      text-decoration:none;
      display:block;
      padding: 2px 5px;
      margin: 3px;
      border: 1px solid #3F3F3F;
}

You can add more code in your primary-navigation class if you want. For now we’ll stick to that.
In your header.php file edit the code in your nav tag to make your code look liked this :


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

If you put the code correctly, your menu would look exactly like the image below.
WordPress Custom Theme with Horizontal Navigation Bar
Well, that’s it for now.

Leave a Reply