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

Comments

  1. Garratt says:

    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.

    • Garratt says:

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

      • Garratt says:

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

  2. sahar says:

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

  3. Gerson says:

    How add this menu item in first position ?

  4. Gwen says:

    Awesome, Thanks you just saved me hours.

  5. Dilip says:

    What is use of 10,2 in the code

    • WPBeginner Support says:

      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.

  6. Pat says:

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

  7. Matt says:

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

  8. Ritchie Pettauer says:

    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.

  9. Bill Gram-Reefer says:

    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.

  10. Josalone Wordsworth says:

    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

  11. Hugo Callens says:

    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”?

  12. Monilal says:

    Its works but current menu item not select

  13. james says:

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

    • Jonathan says:

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

  14. Gerrit says:

    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

  15. samuel says:

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

  16. lokitoki says:

    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

  17. lokitoki says:

    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

  18. gonzela2006 says:

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

  19. Lại Đình Cường says:

    How about add new custom menu to specific position?

  20. Guillermo says:

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

  21. Pierre Laflamme says:

    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?

    • WPBeginner Support says:

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

    • Brad Trivers says:

      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’.

  22. razvan says:

    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

  23. Kathy says:

    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!

  24. sachi says:

    awesome i was searching these codes

  25. Brad says:

    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 !!

    • WPBeginner Support says:

      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.

  26. Lavinia says:

    This isn’t work for me :(

  27. Andor Nagy says:

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

    Regards,
    Andor Nagy

    • Editorial Staff says:

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

    • Cameron Jones says:

      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;

      }

  28. Murugu says:

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

    • Editorial Staff says:

      This would go in your functions.php file.

      • Murugu says:

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

  29. Elliott Wall says:

    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

    • Editorial Staff says:

      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;  
      }
      
  30. Sam says:

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

  31. SAcha says:

    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

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.