How to Add Custom Items to Your WordPress Menus

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.

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;
}

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.