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. Add class to body if IP or browser is Danish [duplicate]
  2. Wordpress 5.1.1 conflict with multiple-content-blocks
  3. Get reviews from booking api
  4. Wordpress - Filter relative taxonomy in custom post type
  5. Customising ACF options page values on save
  6. If function on submission contact form 7 (Wordpress) [on hold]
  7. In CodeIgniter, How to access the folder that's outside of application folder using site_url
  8. WordPress UltimateMember reset password URL
  9. How to display the last page when I visit the website in wordpress
  10. How to set / within local wordpress applications to reference the application not http://localhost

WordPress problems we are working on

  1. Why does using my home page shows robot.txt (WordPress)?
  2. WordPress : “Warning: Illegal string” after a PHP upgrade to PHP7.2 [duplicate]
  3. WordPress 125% duplicates widgets / Change Media breakpoints
  4. wp_mail use WordPress's default email template for sending email
  5. Why does [post_thumb] only output the image source instead of the image itself?
  6. single-{custom} page not rendering/printing or being picked up by Wordpress
  7. Single image pages - product images doesn't show after importing products
  8. Deletion of categories but not items on wordpress
  9. Posting Comments to WordPress with WPAPI
  10. In WordPress it is clear that the comments plugin has been placed inside the element's framework. Why is it displayed outside?

Resolved issues

  1. Disable MailChimp popup from Mobile
  2. retrieving HTTP Post request from JobAdder
  3. Wordpress Replace Pagination with Numbers
  4. Issues creating custom post, wordpress plugin
  5. Embedding the thumbnails Youtube Videos (php) Wordpress
  6. Get elements by class name and change class name
  7. Bitbucket Pipeline with AWS EB and Wordpress
  8. International website setup with mulitple languages (WordPress)
  9. Redirect custom Wordpress post
  10. Easiest Backend Platform to Use a Product Configurator
wppotion - powered by persistence and passion