WordPress has a lot of features that help us solve almost all daily tasks of any programmer or web developer. Due to the versatility of the tools it offers, it is very easy to modify parameters as important as the visual aspect and even the menus.
In this respect, among all WordPress features we can use the wp_nav_menu() function that renders a menu next to all the items we have loaded into our CMS administrator. The menus we can get with this feature tend to be quite good, and they are usually useful for most projects. But, what happens when a designer presents us with a mockup or design with a very specific structure? To change the pre-defined structure that we can obtain with this function, it will be necessary to add custom HTML to it. That’s why in this article We will see how to add custom HTML to wp_nav_menu. All you will have to do is follow a few steps. Interested? Read on to find out more!
What is the problem?
The wp_nav_menu() function generates an HTML structure with certain default classes and identifiers that, although they can be changed, do not always meet the needs of the project we are working on. This usually happens in very specific cases, as mentioned above.
As an example, we are going to register a menu called “Main” (in the “Appearances – Menus” menu of the WordPress administrator) with the following items:
- Who we are
All of the items will have a “#” link to simplify the example.
In a template of our WordPress theme we should write the following PHP code to use the function:
<?php $args = array( 'menu' => 'Main'); wp_nav_menu( $args ); ?>
This code renders the menu in the Frontend with the following HTML code:
<div class="Main-menu-container"> <ul id="Main-menu" class="menu"> <li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1">Href="#">Start</li> <li id="menu-item-2" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2"><a href="#">Who we are</a>>/li> <li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3"><a href="#">Services</a>> <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="#">Contact</li> </ul> </div>
As you can see in the code, the function generates a div with a class and then an unordered list label (ul) with its corresponding li children and a large series of classes that may or may not be useful to us.
The solution, how to add custom HTML to wp_nav_menu?
To solve this problem and add custom HTML to wp_nab_menu, we must build the HTML from an array variable with the items that make up the menu. For this we obviously can’t use functions that generate Frontend code, so for this reason instead we’ll use a function called wp_get_nav_menu_items() which, as its name suggests, returns all the items on a menu in an array collection. This function has a number of parameters that we can modify according to the needs of our project, but for our example we are just to specify the name of the menu.
Let’s see below the final code to implement our layout taking advantage of WordPress’ Menus functionality:
// We load the array of items in the variable $items $items = wp_get_nav_menu_items('main'); // We check that the array is not empty if( !empty( $items ) ): ?> <nav class="mp__menu"> <?php foreach ( $items as $item ): ?> <a class="mp__menu__i" href="<?php echo $item->url; ?>"><?php echo $item->post_title; ?></a> <?php endforeach; ?> </nav> <?php else: // Otherwise we show a message indicating that the menu has no elements ?> <p class="msg msg--error">The menu has no links loaded.</p> <?php endif; ?>
We recommend you to read the official WordPress documentation on this custom menu feature to learn a little more about how to set the various parameters and get new results.
Keep in mind that if this method doesn’t work for you – either because of its complexity or because you want to use a faster method – you always have the option to use a plugin for this purpose. One of the biggest disadvantages of plugins is that they won’t allow you to add as much customization, and in some cases, depending on the plugin you choose, they can also be detrimental to your site, as they can add too much load to it and slow it down. We will always recommend doing this process manually, since, as you may have noticed, it is not as difficult as it seems. In addition, if you follow our guide, you also have all the code written down so you don’t get lost doing this on your own project.
One of the strengths of WordPress is the freedom it provides to dynamically implement different HTML structures. All you need to do is know which features to use and when to use them. We hope this article about how to add custom HTML to WP_nab_menu has been useful to you. Keep an eye on this blog because we’ll be uploading more articles with a lot of information about WordPress and all its different features.