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. Today I am planing to explain in details how to add a custom wordpress menu.

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 custom wordpress 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.


Reported WordPress issues

  1. Wordpress User Login in Android App
  2. Long form upon submit form disappear but page stuck at bottom while confirm message at top
  3. Do you know about WordPress “Portfolio”?
  4. when i try to post to my wordpress site using curl in php, it says that cookies are not supported in my browser
  5. Changing post type slug to '/' breaks all pages
  6. Add multiselect Dropdown as an conditional logic field in WP UserFrontendPro
  7. PHP Fatal error: Uncaught Error: Class 'WP_Theme' not found
  8. How to prevent WordPress theme from removing analytics tracking parameters
  9. Does souncloud offer custom made soundcloud plugins for use by third party websites
  10. Hide html if metabox is empty, using custom post types

WordPress problems we are working on

  1. Home URL with query string not being called correctly - Wordpress
  2. Importing a Wordpress site to MAMP Pro 5
  3. WordPress site using the kale theme - site appears off screen and needs scrolling to appear on mobile devices
  4. Need Help in Implementing Responsive Hexagon Grid in WordPress
  5. How can I change my image src tags from absolute to relative urls on Wordpress?
  6. WordPress plugin create trigger not working
  7. Identifying which item was selected from a dynamically created form in WordPress / PHP
  8. Password Protect wp-login.php page nginx
  9. mysql setup with wordpress
  10. Skewed Letter “B” in Bebas Neue Font on Chrome Windows

Resolved issues

  1. What “route” should I take? Wordpress (as headless CMS) or the MERN way?
  2. Wordpress Themeco Theme X Pro Cornerstone custom sorting element accessing parent variables
  3. Remove unwanted Symbol from Pardot Landing Page using Wordpress Page Code
  4. Gravity Form - Want To Duplicate Sign In Sheet Entries So Names Don't Need To Be Re-Entered Daily
  5. JQMIGRATE and Wordpress Elementor: n.easing[this.easing] is not a function. jquery.js?ver=1.12.4:4
  6. My website's input fields color changing to white on iphone, ipad and mac
  7. Category listing required based on select product tags
  8. Hot to extend a class from child theme in wordpress?
  9. Wordpress SSO with OneLogin
  10. Add custom flow on member registration form in Wordpress website
wppotion - powered by persistence and passion