How to add a menu to custom WordPress theme


The menu in a custom WordPress theme is perhaps the most important feature that allows visitors to navigate through pages and return to home page. Depending on its type, the menu could either be static or dynamic which is also known as mobile.

Before starting the tutorial, let’s see what we have done so far. In the previous two tutorials we have created a basic structure of a custom WordPress theme and added breadcrumbs to it. We have also modified a bit the main loop and made the post titles clickable links.

Now it is time to enable menu feature. This could be completed in two simple steps. The final result is shown on the following screen shot:

How to add a menu to custom WordPress theme

How to add a menu to custom WordPress theme

Register menu:

Below you can find a very simple function that defines WordPress menu:

function register_my_wpp_menu() {

register_nav_menu('header-menu',__( 'Header Menu' ));

}

add_action( 'init', 'register_my_wpp_menu' ););


Note this code needs to be added to functions.php file. If you followed the previous tutorials you could find that file in the root folder of the theme we have created. You may add that piece of code to the bottom of the file. When done, save and close it.

Add a menu to WordPress theme

The next step is find location for the menu. Initially I did not add any location for the menu so now what we have to do is open header.php file and add the following line just above the breadcrumbs section:

<div class="menu"><?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'menu_class' => 'my_menu_class' ) ); ?></div>

This function calls our custom menu and also adds a new class to it. That class is my_menu_class. If you check the line more carefully you will see that the entire function is surrounded by another class called menu. I added it in order to separate the menu from the rest of the elements. The other option was to add this line directly in the head section, but we can later use it for some slider or featured articles area.

At this moment we completed the real coding and the next step is to add some style to the menu. What you have do is open style.css file and add the following lines at the bottom:

.menu { border-bottom: 1px solid;margin-bottom: 10px;border-top: 1px solid;width: 80%;margin: 0 auto;  }

.my_menu_class {    display: inline-flex;    list-style: none;}

.my_menu_class li {margin-right: 10px;}

.margin-top {margin-top: 10px;}

Now we can visit the admin panel -> Appearance -> Menus and create a new menu. When you are ready click Manage Locations tab and select a location from the drop down menu and save it. After doing that make sure the cache of your browser is flushed and verify the final result on your end.


Do you want to share your opinion?

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


*

We are not industry specific. We are WordPress specific. We work with everyone to help them find solutions with their troubles.
If you show us the problem you are experiencing, we will show you how to fix it. It is that simple.


Here you can check the latest resolved WordPress issues

Reported WordPress issues

  1. Get json data that matches advanced custom field
  2. Gravity Forms - prevent form to be removed on submit
  3. Wordpress - get_user_by() returning false
  4. Wordpress get user input and assign it to the quantity?
  5. Multi Step registration on Wordpress
  6. How to integrate wordpress blog into a custom Single page app website hosted on AWS using AngularJS
  7. table doesnot exist wordpress
  8. Get Wordpress Core Functions in external PHP script
  9. In a wordpress site, 'edit page' does not work
  10. Wordpress is taking over my 404's for another domain

WordPress problems we are working on

  1. How to show the next post content on this wordpress?
  2. Adding Filtering Logic for WordPress Admin Post to group by Week
  3. Put the caption and field next to other contact form 7
  4. How can i include only specific styles and scripts for a wordpress page template?
  5. Search for WP plugin : snippet HTML
  6. Text Align - Wordpress
  7. It is possible to see Wordpress login access log?
  8. Concatenate function and shortcode to create a link in php
  9. How to use css button (Wordpress post, pages) in Google AMP ?
  10. using AJAX jQuery and php in wordpress

Resolved issues

  1. Search Customer using wc-api-python
  2. WordPress: Video don’t play in the header of my theme
  3. Make Input Radio work inside <a href>
  4. Wordpress - List only links to existing Image sizes in a post
  5. polylang how to add the <h> tag to the “line feed”
  6. Using Vibrant.js with Wordpress Divi theme
  7. How to add style to <?php html5blank_nav(); ?>
  8. How can i customize Wordpress list_users capability?
  9. How to make sum for negative and positive values? [duplicate]
  10. How to use wordpress as blog as a subdirectory for my rails app?
wppotion - powered by persistence and passion