How to Add a Custom Menu Item to the Navigation Menu in Genesis

Navigation Menu in Genesis

You know what it’s like, when you’re travelling. You’re new to the place, so you look around, hunt for signboards, which could basically guide you to the next location. It’s the same for new visitors on your website. They are exploring too. So they look for navigation menus, to direct them. And the primary reason your site visitors look for the navigation menu, is because they know, that main pages of your site, can be easily accessed using such menus. This is an important reason why many clients, want us to customize the look and contents of the navigation menus, on their site.

For example, an event management site owner, wanted us to add a popular events link, directly in the navigation menu. Makes sense. Potential ticket buyers would have a quick link to upcoming events. Having such links in the navigation menu, saves buyers the time of having to go back to the homepage, to locate them.

Another example, would be, if you had to add say an empty cart timer, on an e-Commerce website. This timer could be added in the navigation menu, as an indication to the customer, that his shopping cart is about to expire. The navigation menu is an apt location for such a functionality because it is fixed across the entire site.

Customizing your navigation menu, could involve (like explained in our previous article) adding images or icons, to adding content elements. In this article, I’ll be explaining to you, how you can add content elements to your navigation Menu in Genesis.

Let’s get right to it!

Add Content Elements to Genesis Navigation Menu

As you would know, the navigation menu in Genesis (or in WordPress) is basically a list of items. So, adding another element, would be appending an item to this list. For this, WordPress provides a filter hook ‘wp_nav_menu_items’. This hook allows you to alter the list content before printing it on the website. So here’s what we’ll do, we’ll use this hook and add our own content element to the menu items.

As an example, let’s try adding the WordPress search form, in the Primary navigation menu, and the current date, in the Secondary navigation menu. To achieve this, we’ll have to add the below code in functions.php of your Genesis child theme.

add_filter( 'wp_nav_menu_items', 'wdm_add_menu_items', 10, 2 );

function wdm_add_menu_items( $menu, $args ) {
    // check if it is the 'primary' navigation menu
    if ( 'primary' === $args->theme_location )
    {
      // add the search form
      ob_start();
      get_search_form();
      $search = ob_get_clean();
      $menu  .= '<li class="right search">' . $search . '</li>';
    }

    // else check if it is the 'secondary' navigation menu
    else if ( 'secondary' === $args->theme_location )
    {
      // add today’s date
      $menu .= '<li class="right date">' . date_i18n( get_option( 'date_format' ) ) . '</li>';
    }
    return $menu;
}

So, I’ll explain what happens here. In the above code, wdm_add_menu_items function will be called before the navigation menu is displayed. For the primary navigation menu, we will fetch the search form (which could be WordPress’ default search form, or the search form provided by your theme). This form will be appended to the menu, as a list item.

In case the navigation menu in question is the secondary navigation menu, the current date will be fetched, and added to the list. Here’s the result below!

Navigation Menu with Custom Elements

Since WordPress, and in turn Genesis provides simple to use filters to change the navigation menu items, or to add additional items, we can easily add such content elements to the navigation menu. But adding too many elements, could clutter your menu, and you would be better off styling it differently, like adding a Mega-Menu, with the items instead.

So! Do let me know your thoughts about this solution, or ask me your doubts and questions, using the comment section below!

• WordPress Tips & Tricks
• With tags: Genesis, Navigation Menu, Theme Customization, Theme Development

Share:

• Aruna V

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!