How to Add Custom Items to Your WordPress Menus

By November 8, 2018 July 15th, 2019 WordPress

WordPress is such a user-friendly platform that even beginners can build a site pretty quickly. For this article, however, we are targeting an audience with knowledge on codes and shortcodes (HTML, CSS, PHP etc.). The reason for this is that adding custom items into your WordPress Menu is a bit tricky.

Even if you are a beginner, however, you can proceed with reading this article. We are going to show you examples on how to add custom items to your site menus – and we’ll make the process as simple as possible.

How to Customize Your WordPress Menus

Some examples of custom items for your WordPress website include the use of a search bar, having log in and log out options, and displaying the current date (instead of just a monthly calendar on the sidebar).

Actually, you can find WordPress themes that carry widgets for all the above items we just mentioned. However, if you are very particular with uniqueness and prioritize user experience when they visit your website, you can opt for creating customized items for your site’s menu.

We will teach you how to create custom items for your WordPress menu in the next section. Note that we will mainly be using the wp_nav_menu_items hook to accomplish this goal.

Customize Menus in WordPress

Steps to Creating Custom Items for Your WordPress Menu

  1. First and foremost, enable the Custom Menu function in your current theme.
  2. Next, we need to add a filter into the wp_nav_menu_items hook (this requires codes and shortcodes). Included in the codes are conditions (in the form of conditional statements) and location (where to place the item in your Menu).
  3. Save the changes you just made in the wp_nav_menu_items hook section of your theme.

Here’s an example:

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if (is_single() && $args->theme_location == 'primary') {
        $items .= '</pre>
<ul>
<li>Add something here</li>
</ul>
<pre>

';
    }
    return $items;
}

How to Add Today’s Date in WordPress Menu

While most WordPress themes carry a calendar widget, you might want a today’s date option in one of your menu settings. Below is a sample code snippet to create a today’s date item. Again, you can use it as it is or further customize it to fit your requirements.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {

        $todaysdate = date('l jS F Y');
        $items .=  '</pre>
<ul>
<li>' . $todaysdate . '</li>
</ul>
<pre>

';

    }
    return $items;
}

How to Create a Log In / Log Out Menu Item

If you’re running a membership site, log in and log out links are needed. Below is a sample log in/ log out code snippet configured to be located at your theme’s Primary Menu. You can copy the codes directly or further customize it (e.g. you can change the location).

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '</pre>
<ul>
<li><a href="'. wp_logout_url() .'">Log Out</a></li>
</ul>
<pre>

';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '</pre>
<ul>
<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>
</ul>
<pre>
';
    }
    return $items;
}

Looking to take your WordPress skills to the next level and learn how to build & monetise authority sites?

The guys over at Authority Hacker released a free training webinar based on their epic Authority Site System course. The webinar covers everything from keyword research to outsourcing content, and getting links so you can actually rank your site in Google (it's how you found this very page).

While this free training focuses on affiliate marketing as the monetisation method (mainly because it's the most passive strategy around at the moment), you can apply these strategies to almost any site... it's pretty neat!

Grab the free training webinar here!

Should You Add Customized Items in Your WordPress Menu?

Although WordPress themes are already beautiful and functional as they are, some people just feel the need to customize their themes further.

In this post, we provided samples that can be used by theme developers. WordPress users who simply want to make their sites more efficient and useful for their audience will benefit from this article too.

MangoMatter WP Team

About MangoMatter WP Team

We live to solve WordPress issues, and help beginners on their WP journey :)