WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Themes» How to Add Custom Items to Specific WordPress Menus

How to Add Custom Items to Specific WordPress Menus

Last updated on June 22nd, 2012 by Editorial Staff
53 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Custom Items to Specific WordPress Menus

WordPress menus are freaking awesome. The drag drop interface makes it really easy for WordPress theme developers and the users alike. In the past we have shown you how to add custom menu in WordPress along with how to style a custom menu. One thing that is limited on the visual interface of menus is that you can only add links (pages, category, or custom links). What if you want to add a custom item to your WordPress menus? Maybe you want to add a search bar, or log in/out link, today’s date, or anything else in a WordPress menu. Just because there is no visual interface, does not mean it is not possible. In this article, we will show you how you can utilize the wp_nav_menu_items hook to add custom items to all or specific WordPress menus.

Note: this tutorial is intended for WordPress theme developers, so it is expected that you know basic html/css and a fair understanding of how WordPress themes work.

Obviously, you need to have custom menu enabled in your themes before you can proceed any further.

Lets start with the basics. We need to add our own filter into wp_nav_menu_items hook. An example would look like this:

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 .= '<li>Show whatever</li>';
    }
    return $items;
}

Now as you can see, you can use the conditional statements along with the argument theme_location. This allows you to target a specific menu location with any condition you want. If you don’t want the conditional statement, you don’t have to use it. Just add it to a specific menu location or vice versa.

Now that you have seen a basic example, let us show you some specific examples of how this would work.

Adding Log in/out links to a Specific WordPress Menu

If you want to give your users the ability to log in/out, then one place you can add the links is in your custom menu. The snippet below will show log in/out links to your users appropriately on the menu location: primary. You can change the menu location if you want.

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 .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Adding a Search Bar to a Specific Menu

Want to add a search bar to a specific menu? Well look no further. You can do so by pasting the following snippet:

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

    return $items;
}

Adding Today’s Date to a Specific WordPress Menu

The snippet below will add today’s date to your WordPress menu. You can use our Today’s Date manual to tweak the code if you want.

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 .=  '<li>' . $todaysdate .  '</li>';

	}
    return $items;
}

We hope this article will allow developers to expand the functionality of their themes.

53 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

61 Comments

Leave a Reply
  1. Denis says:
    Jul 2, 2019 at 3:01 pm

    Hello,
    thanks a lot for that code. Is there a way to reorder the MENU? For example I want to have the Log in Log out button at first in the MENU. Just for an example.
    Cheers,
    Denis

    Reply
    • WPBeginner Support says:
      Jul 3, 2019 at 11:20 am

      For the moment with this code, we do not have a simple method for reordering where the additions are placed compared to the menu items at the moment.

      Reply
  2. Karen says:
    Jun 12, 2019 at 2:52 pm

    Is there a way to have an entry on your menu bar set to appear at a certain time and another item set to expire?

    Reply
    • WPBeginner Support says:
      Jun 14, 2019 at 10:02 am

      Unless I hear otherwise, we do not have a recommended time based conditional display that we would recommend.

      Reply
  3. Mary says:
    Jul 5, 2018 at 4:01 pm

    How to add in my secondary menu footer class li items in functions.php…?

    Reply
  4. Saurabh Saneja says:
    Jun 13, 2017 at 4:48 am

    Hi,

    How can I add a search form at the beginning of the menu items list?

    Thanks,

    Saurabh

    PS: big fan of your tuts :)

    Reply
  5. Igor says:
    May 27, 2017 at 9:05 am

    This is great. But would it be possible to add a menu within a menu?
    I want to append a language menu to my primary menu.
    I get the language menu on the page but not in the desired place.

    instead of

    Reply
  6. Annemarie says:
    May 22, 2017 at 4:23 am

    Thank you for this! Just what I needed in a project.

    Reply
  7. Tasneem says:
    Feb 3, 2017 at 9:53 am

    I used the code for teh search box it works perfect.

    Reply
  8. Anuj says:
    Jan 7, 2017 at 4:29 am

    Nice article, Help me alot.

    Reply
  9. Garratt says:
    Sep 7, 2016 at 5:33 am

    Does this code still work? Not seeing anything on my menu, even just using the basic function with text. Not using any special type of menu, just ‘X’ & child theme.

    Reply
    • Garratt says:
      Sep 7, 2016 at 5:37 am

      never-mind, sorry just read this: “Obviously, you need to have custom menu enabled in your themes before you can proceed any further.”

      Reply
      • Garratt says:
        Sep 7, 2016 at 6:51 am

        OK so I was still having the problem even though my menu was custom, and messed around until I removed the condition. (IF), once I did that it displayed on all pages including homepage.

        `add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
        function your_custom_menu_item ( $items, $args ) {
        $items .= ‘Show whatever’;
        return $items;
        }

        Reply
  10. sahar says:
    Aug 18, 2016 at 6:13 am

    It worked but it destroyed responsivity…I had to remove code

    Reply
  11. Gerson says:
    Aug 15, 2016 at 11:21 am

    How add this menu item in first position ?

    Reply
  12. Gwen says:
    Jun 11, 2016 at 10:11 am

    Awesome, Thanks you just saved me hours.

    Reply
  13. Dilip says:
    Jun 3, 2016 at 2:36 am

    What is use of 10,2 in the code

    Reply
    • WPBeginner Support says:
      Jun 3, 2016 at 1:03 pm

      10 specifies the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.

      2 is for the number of arguments the function accepts.

      Reply
  14. Pat says:
    May 25, 2016 at 10:05 am

    This is so useful and just what I needed! Thank you very much for sharing.

    Reply
  15. Matt says:
    Feb 12, 2016 at 1:14 am

    The Log-in link won’t show up, just the log out link. What could cause this?

    Reply
  16. Ritchie Pettauer says:
    Feb 4, 2016 at 2:00 pm

    This is an awesome, straight-to-the point tutorial. I want an item with today’s date (“headlines | DATE”) in one of my menus.

    I didn’t expect the first posting I found to solve my problem :) thx guys.

    Reply
  17. Bill Gram-Reefer says:
    Jun 16, 2015 at 4:32 pm

    works but (lol) for my situation I want to add “Search” to the primary header as if it were just another item that got checked in

    appearance/menus/add-to-menu

    Everything I’ve seen creates a whole new…what is it a div…(?)

    that adds a whole new row to the header instead of p[lacing the form in the same row as ABOUT, etc. items in the primary navigation edit window.

    AND take the css assigned to the navigation bar.

    Reply
  18. Josalone Wordsworth says:
    Jun 11, 2015 at 9:32 am

    I really liked the post, so useful. However lets say I want to add a login and logout link in the footer with and if condition

    Reply
  19. Hugo Callens says:
    May 3, 2015 at 2:04 pm

    Related question: how to add a menu item based on a specific user role?
    Say I have a custom user role called “Student” and I would like to add an item to the menu only when the user has the role of “Student”?

    Reply
  20. Monilal says:
    Jan 23, 2015 at 8:47 am

    Its works but current menu item not select

    Reply
  21. james says:
    Jan 4, 2015 at 3:55 pm

    is there a way to add it on certain submenu instead of top ul?

    Reply
    • Jonathan says:
      Sep 6, 2015 at 8:55 pm

      I’d like to know the same thing. Anyone have an answer on how to add it in a certain submenu?

      Reply
  22. Gerrit says:
    Nov 9, 2014 at 10:54 am

    Thank you for the How To!

    To be honest I don’t understand how you call the function.

    Especially I am missing a mention what arguments you call the functions with i.e. what wp variables to hand over as $items and $args.

    Could you please detail for a wp-beginner?

    Thank you,

    Gerrit

    Reply
  23. samuel says:
    Aug 4, 2014 at 12:01 am

    hey how if i want to add it to sub menu ?

    Reply
  24. lokitoki says:
    Jun 18, 2014 at 2:55 pm

    hm any ideas how i could add html tags to just one wordpress menu item.

    from this:

    Contact

    to this:

    Contact

    it should be only for one menu item. not to all

    Reply
    • amit says:
      Aug 18, 2014 at 1:39 pm

      the option is available on wp admin panel

      Reply
  25. lokitoki says:
    Jun 18, 2014 at 12:47 pm

    hm any ideas how i could edit the tag for one wordpress menu item.

    from this:

    Contact

    to this:

    Contact

    it should be only for one menu item. not to all

    Reply
  26. gonzela2006 says:
    May 27, 2014 at 4:19 am

    Hello,
    How can I add the following classes active and current-menu-item and the id menu-item-id ?

    Reply
  27. Lại Đình Cường says:
    May 14, 2014 at 11:40 am

    How about add new custom menu to specific position?

    Reply
  28. Guillermo says:
    May 9, 2014 at 7:25 pm

    I want put a little image beside left to the menu home, how can put it?
    please help me

    Reply
  29. Pierre Laflamme says:
    Mar 13, 2014 at 7:56 pm

    In your examples, you add items to the primary menu (theme_location == ‘primary’).

    How would I add an item in a specific menu in widget area? Where do I get the theme_location?

    Reply
    • WPBeginner Support says:
      Mar 14, 2014 at 11:25 am

      theme locations are usually defined by your theme, check your theme’s functions.php file or the template where a menu is displayed.

      Reply
    • Brad Trivers says:
      Apr 30, 2014 at 9:44 am

      If you want to target a specific menu (not a theme location) then use $args->menu->slug == ‘the_menu_slug’ instead of $args->theme_location == ‘primary’.

      Reply
      • Xúlio Zé says:
        Sep 18, 2015 at 8:16 am

        Really useful!

        Thank you vary much Brad

        ^-^

        Reply
      • Peter Lalor says:
        Oct 3, 2015 at 9:32 am

        Hi Brad,
        Would you be able to tell me how I find out what the value of ‘the_menu_slug’ is?
        Thanks,
        Peter

        Reply
  30. razvan says:
    Feb 15, 2014 at 7:59 am

    Hi! I used your tutorial to put a picture as a logo overlapping the menu bar. All is fine but this specific menu has a hover option that makes the color white… So when i hover the mouse on the logo, it also hovers the link which kind of ruins the aspect of the page.

    This is my code:

    if( $args->theme_location == ‘primary’ )
    return ““.$items;

    How can I hide the a href on the page and just display the image with link?

    Thanks in advance

    Reply
  31. Kathy says:
    Dec 19, 2013 at 11:56 am

    Hi, I think your code is close to what I’m looking for, but I’m trying to figure out how i can customize it to do what I’m trying to do!

    What I am trying to do is create a menu item with dropdown list of authors? any idea how i can accomplish that?

    Thanks so much!

    Reply
    • Erik Mitjans says:
      Jan 13, 2014 at 11:16 am

      Hi Kathy!

      I was working on this since days and I finally got it working.

      Take a look at: http://wordpress.org/support/topic/creating-a-dropdown-in-menu-that-lists-authors/page/2?replies=45#post-5103035

      Also, take into consideration I’m adding extra classes and attributes cause the theme is Bootstrap based. You might not need all that.

      Cheers!
      Eric

      Reply
  32. sachi says:
    Dec 13, 2013 at 3:01 am

    awesome i was searching these codes

    Reply
  33. Brad says:
    Sep 18, 2013 at 11:50 am

    Thanks this was very helpfull,

    However, out of curiosity, I can’t find this valuable filter hook: “‘wp_nav_menu_items” , I mean where in WP core files is this being called ??

    Thanks much !!

    Reply
    • WPBeginner Support says:
      Sep 18, 2013 at 11:10 pm

      It is located in wp-includes/nav-menu.php, however it is not recommended to modify core files. It is a filter and you can call it in your theme’s functions.php file or a site specific plugin.

      Reply
  34. Lavinia says:
    May 14, 2013 at 4:53 pm

    This isn’t work for me :(

    Reply
  35. Andor Nagy says:
    Mar 14, 2013 at 11:32 am

    How can I place it in front of the first menu item? Otherwise great tutorial!

    Regards,
    Andor Nagy

    Reply
    • Editorial Staff says:
      Mar 18, 2013 at 12:01 am

      Use the return example of the search bar and move the items towards the end?

      Reply
    • Cameron Jones says:
      Feb 22, 2015 at 8:01 pm

      add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );

      function your_custom_menu_item ( $items, $args ) {

      $custom = ‘Show whatever’;

      $items = $custom.$items;

      return $items;

      }

      Reply
  36. Murugu says:
    Mar 1, 2013 at 4:04 pm

    Pardon my ignorance but which php file would I be editing?

    Reply
    • Editorial Staff says:
      Mar 2, 2013 at 6:50 am

      This would go in your functions.php file.

      Reply
      • Murugu says:
        Mar 5, 2013 at 4:35 pm

        I added the following to my theme’s functions.php but the search box doesn’t show up like I would expect. Any suggestions?

        add_filter(‘wp_nav_menu_items’,’add_search_box_to_menu’, 10, 2);
        function add_search_box_to_menu( $items, $args ) {
        if( $args->theme_location == ‘header_extras_inner’ )
        return $items.””;

        return $items;
        }

        Reply
  37. Elliott Wall says:
    Jan 29, 2013 at 2:14 am

    Sorry to be coming into this discussion so late

    I’ve tried the search form part and it works great— thank you! I’m having problems styling it though, for some reason. No matter what I do the placeholder text in the field is gray. I’ve looked at the cascading of the styles and messed with so many things— I can change the background color for example, but no luck in making the text black, so the design continuity of the menu is somewhat compromised. My site is http://elliottwall.com if you care to have a look. Cheers

    Reply
    • Editorial Staff says:
      Jan 29, 2013 at 8:21 am

      For placeholder text, you have to do something like this:

      ::-webkit-input-placeholder {
         color: red;
      }
      
      :-moz-placeholder { /* Firefox 18- */
         color: red;  
      }
      
      ::-moz-placeholder {  /* Firefox 19+ */
         color: red;  
      }
      
      :-ms-input-placeholder {  
         color: red;  
      }
      
      Reply
      • Elliott Wall says:
        Jan 29, 2013 at 3:25 pm

        This worked perfectly— thank you again!

        Reply
  38. Sam says:
    Jan 2, 2013 at 2:34 pm

    Can we add custom link before the first item instead of at the end?

    Reply
    • xafar Ali says:
      Jun 9, 2013 at 10:55 pm

      Yes , just concatenate first instead of last.

      $items = “MENU ITEM ” . $items;

      Reply
      • piomat says:
        Aug 24, 2016 at 7:32 am

        beer! :)

        Reply
  39. SAcha says:
    Jul 31, 2012 at 7:41 am

    Hi,

    very interesting!
    I added a custom link, but is it possible to add it in a certain position inside the menu? Like “after the first menu item”.

    Thanks

    Reply
    • Editorial Staff says:
      Jul 31, 2012 at 9:37 am

      Not sure if that is possible.

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
WPForms Logo
WPForms
Drag & Drop WordPress Form Builder Plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Advanced Coupons
Advanced WooCommerce Coupons
Get 50% off the Advanced Coupons smart coupons plugin for WooCommerce.
ProfilePress
ProfilePress Coupon
Get 20% OFF on ProfilePress WordPress ultimate user and profile plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.