Customizing the Nav Menu

Topics covered in this WordPress tutorial:

Creating functions.php, Creating the menu, Customizing the menu order

Exercise Preview

Exercise Overview

WordPress has a number of features that aren’t activated by default. Earlier, we added some code to create the nav menu, but we do not have a way of editing that in the Dashboard. Themes can use a file called functions.php to automatically load theme functions for extra customization. In this exercise, we will use functions.php to register a menu so we have access to it in the Dashboard.

Creating functions.php

1. Open your code editor.

2. Create a new file.

3. Save the file as functions.php into the mrpTheme folder located here:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp > wp-content > themes
   • Windows: C: > xampp > htdocs > mrp > wp-content > themes

4. First, let’s open a php tag:

   <?php 
   
   ?>
   

5. We want WordPress to load in some code right when the page is being built. In WordPress, this is referred to as init (short for initialization). We can tell our custom code to load at this time, but first we need to create a function for it to load. Add the empty function shown below:

   <?php
   
   function load_on_init() {
   
   }
   
   ?>
   

6. Below the function declaration, add the following to tell WordPress to load our function on init:

   <?php
   
   function load_on_init() {
   
   }
   
   add_action( 'init', 'load_on_init' );
   
   ?>
   

   Now anything we add into the function will be loaded on init.

7. Inside the load_on_init() function, add the following bold code:

   function load_on_init() {
   
      if ( function_exists( 'register_nav_menu' ) ) {
   
      }
   
   }
   

   When writing code for WordPress, it’s very common to include an if statement to check to see if a function exists. Due to the modular nature of WordPress, new functions and features are added all the time and you never know where this code might end up (maybe in an old version of WordPress). This method just ensures that if you are trying to run a function that doesn’t exist, you don’t get any errors.

8. Next, we’ll add the register_nav_menu() function to register our Header Menu. Inside the if statement, add the following bold code:

   if ( function_exists( 'register_nav_menu' ) ) {
      register_nav_menu( 'header-menu', __( 'Header Menu' ) );
   }
   

9. Save the file.

10. Open header.php from the mrpTheme folder.

11. Find the wp_nav_menu() function around line 21:

    <?php wp_nav_menu(); ?>
    

    Right now, this code loads the first menu a user creates, or falls back on a standard page list if no menus exist. We want it to load the new Header Menu we registered in functions.php.

12. Add the following bold code to the wp_nav_menu() function:

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
    

13. Save the file.

Creating a Menu & Customizing the Order

1. The menus feature should now be enabled in the Dashboard. Open a browser and go to:
   • Mac: localhost:8888/mrp/wp-admin
   • Windows: localhost/mrp/wp-admin

2. Log in if asked.

3. The Appearance menu now has a Menus option. On the left, mouse over Appearance and click Menus.

4. We need to create the menu. On the right, for Menu Name enter: Nav Menu

5. Click Create Menu.

6. You will see all of the pages (six or three) under Menu Structure on the right. If there are no pages in the menu, in the Pages module on the left, click Select All, then click Add to Menu. If there are multiple instances of the Welcome to MRP page, delete the bottommost one.

7. This isn’t the order we want. Drag the menu items to reorder them as follows:
   • Welcome to MRP
   • Latest News
   • Contact
   • Services
   • Facilities
   • About Us

8. To the right of the Welcome to MRP link, click the small arrow to reveal the link’s options.

9. We want this link to display a different name. Change the Navigation Label to Home because this is what the menu will actually say.

10. To the right of the Latest News link, click the small arrow to reveal the link’s options.

11. Change the Navigation Label to: Blog

12. Click the Save Menu button.

13. Now that we have our menu, let’s set our Header Menu to use it. Under Menu Settings at the bottom, next to Theme locations, choose Header Menu.

14. Click Save Menu.

15. Click the Monteith Restoration & Performance title at the top of the Dashboard and view your work.

register_nav_menus(
   array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' ),
      'another-menu' => __( 'Another Menu' )
   )
);

Bonus: Adding Current Page Styling

It would be nice to indicate the current page in the nav menu. Let’s inspect the page to see if there are any styles we can use.

1. Open Chrome and go to:
   • Mac: localhost:8888/mrp
   • Windows: localhost/mrp

2. Ctrl–click (Mac) or Right–click (Windows) the Home menu item, and choose Inspect.

3. In the left-hand panel, the link will probably be highlighted (your numbers may be slightly different):

   <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-14 current_page_item menu-item-33" >
      <a href="http://localhost:8888/mrp/">Home</a>
   </li>
   

   The link doesn’t have any styling, but the list item around it has quite a few classes applied (separated by spaces). From those, current-menu-item looks promising.

   NOTE: current_page_item would also technically work in this case, but it wouldn’t be as flexible. It’s possible to add categories and other things to a menu that current_page_item will not work on, but we should just use current-menu-item.

4. Switch back to your code editor.

5. Switch to style.css. (If it isn’t open, open it from the mrpTheme folder.)

   We want to change the color of the link inside the current-menu-item list item.

6. At the very bottom, add the following rule:

   #nav .current-menu-item a {
      color: #f7bf10;
   }
   

7. Save the file.

8. Switch back to Chrome and reload the page to see the new style.

9. Close the Developer Tools console.

10. Click the links to the other pages to see that it works across the entire site. Groovy!