1. Home
  2. WordPress Tutorials
  3. How to Insert Custom Items into WordPress Menus

How to Insert Custom Items into WordPress Menus

Are you looking for a way to insert custom items into WordPress menus? Navigation menus help your visitors navigate your website to find the content they are looking for. Sometimes to help your visitors more or to make your menu more interesting, you may need to add a few custom items to it.

Unfortunately, WordPress doesn’t make this easy for beginners. You will need to add the custom items you want using code in your functions.php file. It is not overly difficult to do, but if you want to get creative with your menus, you will need some coding knowledge. Today, I will demonstrate how to insert custom items into WordPress menus using some code.

Why Add Custom Items to Your Menus

Let’s face it, one of the biggest obstacles new websites face is trying to stand out in a crowded environment. There is no surefire method to being original, but adding custom features and items that are tailored to your website is the best approach to take. Only you know what kind of experience you want your website to provide your visitors.

Adding custom items to your menus can help you achieve just that. The default menu items are great for what they do, but being able to add extra items to them like search bars, login/logout links, and more can really make a difference. The only limiting factor to adding custom items is your coding experience.

Keep in mind that you can find a lot of samples of different items you can add. You can use these samples to create your own code.

How to Insert Custom Items into WordPress Menus

Today, I will demonstrate how to insert custom items into WordPress menus using some code. I will be showing you how to locate your functions.php file and some samples of what you can add. Any experience with PHP/HTML/CSS coding languages will certainly help you create exactly what you want.

Keep in mind that before you begin you need to have custom menus enabled. If you do not, then nothing will happen.

Finding the Functions.php File

Let’s start by logging into the cPanel and clicking on the File Manager option. The File Manager will allow you to access all of the files related to your website.

Click on the File Manager option.

You need to locate your theme’s functions.php file. Click on the public_html directory, then click on the wp-content folder. Inside of this folder, you will find all of the content related to your website. Click on the themes folder and enter the folder of the theme you are currently using. Finally, right-click on the functions.php file and select the Edit option.

Select the "Edit" option.

A pop-up window will show up. This box will warn you to create a backup of your files before editing anything. This will ensure that you can revert your website back to when it was working if something goes wrong. Click on the “Edit” button. A new tab will open containing all of the code from the file.

Click on the "Edit" button.

Adding Custom Items to WordPress Menus

Now that you are in the functions.php file, all that’s left to do is add the code. The code you add is entirely dependent on what you want to do. The first thing you will need is the basic structure of the code, which is as follows:

add_filter( ‘wp_nav_menu_items’, ‘custom_item’, 10, 2 );
function custom_item ( $items, $args ) {
if (is_single() && $args->theme_location == ‘primary’) {
$items .= ‘<li>Show whatever</li>’;
}
return $items;
}

This is a sample of the basic code structure you will be using. You will need to change the “custom_item” to the actual item you are adding. There is an If conditional statement inside of the function, but if you do not want to use one, simply delete it and replace it with what you need.

So for example, a good item to add is a search bar to WordPress menus. The code for this would be as follows:

add_filter(‘wp_nav_menu_items’,’search_box’, 10, 2);
function search_box( $items, $args ) {
if( $args->theme_location == ‘primary’ )
return $items.”<li class=’menu-header-search’><form action=’http://myexamplewebsite.com/’ id=’searchform’ method=’get’><input type=’text’ name=’s’ id=’s’ placeholder=’Search’></form></li>”;

return $items;
}

As you can see the “custom_item” is replaced with “search_box” and the necessary code to create and add a search bar is included in the If statement.

Once you have inserted the code into the functions.php file, click on the “Save Changes” button to finish.

Click on the "Save Changes" button.

Congratulations, you have successfully added a custom item to your WordPress menu. Following the same technique, you can add any kind of custom item to your menu. The only limiting factor is your coding experience.

Make Your Menus Exctiting

Menus are one of the first things a new visitor will look out for. They need to find what your website offers and menus will lead them there. Making them as visually appealing as possible while also including the features they need is essential, but not easy. Make sure your menus pop out at visitors, but most importantly, make sure they function correctly. Add custom items to your menus to help them achieve what they were designed for.

What custom items are you adding to your WordPress menus? How easy do you find it to add custom items to WordPress?

Author: Ron Helms

I currently work for GreenGeeks as a Support Technician. My primary roles are supporting our VPS and Dedicated server clients, as well as performing site migrations. With experience in the web hosting industry since 2009, there is rarely a question I can’t help answer. In my spare time, I enjoy gaming and working on cars as an automotive enthusiast.

Updated on August 24, 2018

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.