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. Menu appearing on mobile view in desktop browsers but not on actual mobiles
  2. How to implement canonical attribute to wordpress website without plugin
  3. Create custom Filter in Wp Query
  4. Wordpress Categories Widget - Filter arguments to show specific subcategories
  5. Alternatives to WP-SCSS to compile scss to css without the need of GULP
  6. WordPress Uncaught TypeError: Cannot read property 'top' of undefined showing when i click on nav link?
  7. I need support ajax in wordpress
  8. Error on importing images from Wordpress to GatsbyJS V2
  9. Ajax POST request in for loop causes problem with the data sent
  10. How to backup a AmazonAWS website (Laravel) to AmazonAWS S3 bucket?

WordPress problems we are working on

  1. The post is not recognizing itself when viewing from wp-admin [duplicate]
  2. Homepage redirect to different location not found
  3. Back button remembering Accordion state
  4. How I can show pdf file in wordpress without plugins? [duplicate]
  5. Get custom field ACF in custom menu
  6. Ampersand in $wpdb->get_results of wordpress
  7. Hide the “Account” menu item until a user places an order
  8. What is wordpress workflow?
  9. Hangout call to specific user by link
  10. What does “Add empty params to Signature” in POSTMAN mean or do

Resolved issues

  1. How to bind IP Address:Port No with some domain name on wamp server
  2. Retrofit Json some data returns null
  3. How to compare User Input to Custom WordPress Database Table
  4. Custom Wordpress plugin issue with printing result
  5. Need brief techniques to improve Wordpress website performance [on hold]
  6. Enable the rightside categories in wordpress
  7. Single Sign On – SSO for wordpress
  8. Resetting multiple formidable forms in WordPress
  9. HOA Web Project
  10. Getting Multiple checkbox data wordpress with ajax (only shows one category at a time)
wppotion - powered by persistence and passion