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. Trying to create custom order with learn press wordpress but not working
  2. Add custom php file in child theme WP
  3. Media query working on resized desktop browser window but not on mobile device
  4. WordPress on nginx - php file 403 error
  5. Wordpress bulk add tags with variables
  6. Wordpress .htaccess redirection issue
  7. PHP function add datetime stamp when tick box on form is ticked
  8. Wordpress dFactory Cookie Notice Plugin social networks javascript consent
  9. Manage cookies from embedded video components
  10. jQuery: How add ads on all embed videos WordPress?

WordPress problems we are working on

  1. Why Custom contact form 7 returns empty content?
  2. jQuery Onclick function wont work
  3. WP Elementor w/ Contact Form 7 - Display File Upload Location in Textfield
  4. No URL bar on mobile phones
  5. Wordpress how to use add_action inside plugin function
  6. How to remove terms (taxonomy) from Class using/editing existing post-formats.php template file
  7. Leverage browser caching on google cloud apache
  8. Display login popup to users in wordpress on “Read more” click in posts
  9. A “new” label that only shows for uploaded job listings less than 7 days old
  10. How to add images along with text using WYSIWYG text editor and save them togather into MySQL Database?

Resolved issues

  1. sync wordpress session with redux session system
  2. How adding the onclick function into a href in WordPress
  3. Mixing Wordpress eCommerce site with external login based Vue Frontend Best Practices
  4. Buddypress member plugin wordpress issue
  5. How to give correct path for images in Wordpress child theme
  6. Wordpress - posts on subpage 'blog'
  7. Getting site-name end of the every WP URL with / (Slash) cause 404 Error
  8. Can't subscribe to subscription forms in a website
  9. same url path for subcategories and posts
  10. Docker Wordpress doesn't load css/js/etc. when proxied through bare-metal NGINX installation
wppotion - powered by persistence and passion