Written by on

Add New Items to Builder’s Navigation Menus

Adding items to WordPress menus is easy with the wp_nav_menu_items filter, and with the unlimited amount of menus you can create with Builder, there is not doubt that menus can easily carry more than just the standard items.

This tutorial will walk you through how to add new items (search field, social links, an image of your pet cat) to not only EVERY menu, but also individual menus within Builder. What this tutorial won’t teach you is how to be cool (but let’s face it, you’re already cool because you’ve read this far). ;)

Getting Started

This tutorial does require that you have a base knowledge of how to edit template files (specifically the functions.php file) and style Builder using custom CSS. If you do not know how to do these things, you may want to head over to WebDesign.com and start learning (trust me, it’s totally worth it). In addition, we are assuming that you love WordPress & iThemes and also own and use Builder… I think this is obvious.

Please note that all code below needs to be placed in the functions.php file of your current child theme.

Adding an Item to Every WordPress Menu

As mentioned before, WordPress provides a very simple filter (wp_nav_menu_items) for adding items to menus. Keep in mind that this only works for menus built with the WordPress menu system. For you curious folk, wp_nav_menu_items filter is located in wp-includes/nav-menu-template.php.

Setting up the code to add items is simple. Here is an example:

function add_nav_menu_items( $items, $args ) {

	$items .= '<li id="menu-item-twitter" class="menu-item menu-item-type-social menu-item-twitter"><a href="http://twitter.com/ithemesbuilder">Twitter</a></li>';

	return $items;
}
add_filter('wp_nav_menu_items','add_nav_menu_items', 10, 2);

Here are some screenshots of the output:

If you wanted to add more than just one link, add more items to the code. Here is an example:

function add_nav_menu_items( $items, $args ) {

	$items .= '<li id="menu-item-twitter" class="menu-item menu-item-type-social menu-item-twitter"><a href="http://twitter.com/ithemesbuilder">Twitter</a></li>';
	$items .= '<li id="menu-item-facebook" class="menu-item menu-item-type-social menu-item-facebook"><a href="http://facebook.com/ithemes">Facebook</a></li>';
	$items .= '<li id="menu-item-ithemes" class="menu-item menu-item-type-link menu-item-ithemes"><a href="http://ithemes.com/">iThemes</a></li>';

	return $items;
}
add_filter('wp_nav_menu_items','add_nav_menu_items', 10, 2);

Notice the two additional $items added to the function. This will output two additional links along side Twitter.

The links will always output at the end of the menu. In addition, you can use any classes you like, I used the classes above because they are similar to the default WordPress classes.

While the above code adds new items to ALL WordPress menus used in Builder’s navigation modules, this may not be the desired effect. For example, what if you wanted to add social links to one menu, a search form to another, and a picture of your pet cat to yet another! After all, Builder does provide an unlimited amount of menus you could add to your site.

Adding items to a specific menu

Building off our previous code, all you need to do is declare where to add the menu when using the wp_nav_menu_items filter. This is easily accomplished by adding the menu slug between menu and items of the filter. For example, if your menu is named Main, then the filter would change from wp_nav_menu_items to wp_nav_menu_main_items.

Here is an example of the new function:

function add_nav_menu_items( $items, $args ) {

	$items .= '<li id="menu-item-twitter" class="menu-item menu-item-type-social menu-item-twitter"><a href="http://twitter.com/ithemesbuilder">Twitter</a></li>';
	$items .= '<li id="menu-item-facebook" class="menu-item menu-item-type-social menu-item-facebook"><a href="http://facebook.com/ithemes">Facebook</a></li>';
	$items .= '<li id="menu-item-ithemes" class="menu-item menu-item-type-link menu-item-ithemes"><a href="http://ithemes.com/">iThemes</a></li>';

	return $items;
}
add_filter('wp_nav_menu_main_items','add_nav_menu_items', 10, 2);

If your menu is named Main Top Menu, then the out put would change from wp_nav_menu_items to wp_nav_menu_main-top-menu_items.

Here is an example of the new filter:

add_filter('wp_nav_menu_main-top-menu_items','add_nav_menu_items', 10, 2);

As you can see, we are surely on our way to adding stuff to Builder’s menus. While links are cool and all, let go even further by adding a search field and (you guessed it) a picture of your pet cat! Woop!

Adding a Search Form and Our Pet Cat to Menus

The code for adding these items is exactly the same as described above. I am going to use two separate menus (Main & Secondary) to add my items. Check out my new search field and pet cat in my menus!

Here is the code needed to achieve the above effect:

function add_nav_menu_search_items( $items, $args ) {

	ob_start();
	get_search_form();
	$searchform = ob_get_contents();
	ob_end_clean();

	$items .= '<li id="menu-item-search" class="menu-item menu-item-type-search menu-item-search">' . $searchform . '</li>';

	return $items;
}
add_filter('wp_nav_menu_main_items','add_nav_menu_search_items', 10, 2);

function add_nav_menu_pet_items( $items, $args ) {

	$items .= '<li id="menu-item-pet-cat" class="menu-item menu-item-type-image menu-item-pet-cat"><img src="http://justin.internal.ithemes.com/wp-content/uploads/2012/03/pet-images.jpg" alt="pet cat" /></li>';

	return $items;
}
add_filter('wp_nav_menu_secondary_items','add_nav_menu_pet_items', 10, 2);

Notice that the search code is a little different that the pet image code. This is because we need to prepare the search form with an output buffer (ob_start()) in order to output the correct html. I won’t bore you with the details of why an output buffer is needed, just know that it produces awesomeness.

Wrapping Up

By now you should be well on your way to adding loads of items to your menus! As you can see, adding items can be both fun and easy!

I am sure you noticed that I did not provide any styles for this post. This is because there is an unlimited amount of options available for users to style their new links. As a challenge to you, start adding new items, style them, then share your styles in the comments below! We are anxious to see what you come up with!

Respond