Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här addar du Customize-objekt till specifika menyer i WordPress

Vill du add to custom objekt till specifika WordPress menyer?

WordPress-menyer är navigationsmenyer som visas högst upp på de flesta websites. Ibland kanske du vill visa andra customze objekt än vanliga länkar i navigationsmenyer.

I den här artikeln visar vi hur du enkelt kan add to custom objekt till specifika WordPress menyer.

Adding custom items to WordPress menus

Varför lägga till Customize objekt till WordPress Menyer

WordPress-menyer är navigationslänkar som vanligtvis visas högst upp på en website. På mobila enheter visas de ofta när du tapar på en menu icon.

example navigational menu

Eftersom detta är en framträdande location i en typisk layout på en WordPress website är det smart att dra nytta av den genom att placera andra customizer objekt än vanliga links i menyn.

Instance, some users may want to display the search form like we do at WPBeginner. En medlemswebbplats kanske vill visa länkar för login och logga ut, eller så kanske du vill add to icons eller images till din menu.

Som standard är navigationens menyer utformade för att visa links med plain text. Du kan dock fortfarande placera customize objekt i WordPress menyer.

Med detta sagt, låt oss ta en titt på hur du kan add custom items till specifika menyer i WordPress samtidigt som du håller resten av din navigation menu intakt.

Lägga till Customize objekt till specifika navigationsmenyer i WordPress

Det finns olika sätt att add to custom items till en navigation menu i WordPress. Det beror på vilken typ av custom objekt du försöker lägga till.

Vi ska visa dig några av de vanligaste exemplen. För vissa av dem behöver du använda plugins, medan andra kräver att du addar lite kod.

Om du vill hoppa vidare till en viss section kan du använda den här innehållsförteckningen:

Låt oss komma igång.

1. Lägga till en popup för search i WordPress Menu

Normalt kan du add a search form to your WordPress sidebar by using the standard Search widget or block. Det finns dock inget sätt att add to search till navigation menu som standard.

Vissa WordPress teman har ett alternativ för att add a search box till din main menu area. Men om ditt inte gör det kan du använda metoden under.

För detta måste du installera och aktivera SearchWP Modal Search Form plugin. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett WordPress plugin.

Detta plugin är ett addon för SearchWP, som är det bästa search-pluginet för WordPress på marknaden.

Addon är gratis och fungerar även med standard WordPress search. Vi rekommenderar dock att du använder det med SearchWP om du vill förbättra din WordPress-sökning.

När du har installerat addon, headar du bara över till sidan Appearance ” Menus. Under kolumnen ”Add menu items” klickar du på tabben ”SearchWP Modal Search Forms” för att förstora den.

Add search to menu

Välj din search engine och klicka sedan på knappen Add to menu.

Pluginet kommer att add the search till din navigation menu. Click on the ’Modal search form’ under your menu items to förstora den och ändra etiketten till Search eller något annat du vill.

Change search label

Glöm inte att klicka på knappen Save Menu för att spara dina ändringar.

You can now visit your website to see Search added to your navigation menu. Om du klickar på den öppnas formuläret för search i en lightbox popup.

Search in navigation menu

Mer detaljer finns i vår guide om hur du lägger till en knapp för search i en WordPress-meny.

2. Add icons och Custom Images till specifika menyer

Ett annat populärt customizer objekt som användare ofta vill add to till en specifik menu är en image eller en icon.

För att göra det måste du installera och aktivera Menu Image Icon plugin. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett plugin för WordPress.

Efter aktivering, gå till sidan Appearance ” Menus och flytta musen över det menu-item där du vill visa en icon eller image.

Menu Image button

Klicka på den blå knappen Menu Image för att fortsätta.

Detta kommer att visa en popup. Härifrån kan du välja en image eller icon som ska displayed med det menu-item.

Choose image or icon

Du kan också välja positionen för imagen eller iconen i förhållande till menu-item. Du kan till exempel visa ikonen precis före menyobjektet, som i vårt exempel under, eller till och med dölja menu-item så att bara ikonen visas.

Glöm inte att klicka på knappen Save changes för att spara dina settings. Upprepa processen om du behöver add to icons eller images till andra menu items.

Efter det kan du besöka din website för att se den customze image eller icon i specifika menu-items.

Menu icons

För mer detaljerade instruktioner, se vår tutorial om hur du lägger till images i WordPress menyer.

3. Add Login / Logga ut Links till Specifik WordPress Meny

Om du använder ett WordPress plugin för medlemskap eller run en online store, då kanske du vill allow användare att enkelt logga in på sina konton.

Som standard kommer WordPress inte med ett enkelt sätt att visa länkar för login och logga ut i navigationsmenyer.

Vi visar dig hur du addar dem genom att använda ett plugin eller genom att använda code snippet.

1. Add Login / Logout Links till menyer med hjälp av ett plugin

Denna metod är enklare och rekommenderas för alla användare.

Först måste du installera och aktivera plugin-programmet Login or Logout Menu Item. Efter det måste du besöka sidan Appearance ” Menu page och klicka på Login/Logout tabs för att förstora den.

Add login or logout link to specific WordPress menu

Härifrån måste du välja objektet ”Logga in | Logga ut” och klicka på knappen Lägg till i menyn.

Glöm inte att clicka på knappen Save Menu för att store dina ändringar. You can now visit your website to see your custom login logout link in action.

Login and Logout link preview

Linken kommer dynamiskt att ändras till login eller logga ut beroende på användarens status.

Läs mer i vår tutorial om hur du lägger till länkar för login och logga ut i WordPress menyer.

2. Add Login / Logout Links med hjälp av Custom Code

Denna metod är obligatorisk för att du ska kunna add to kod till din website i WordPress. Om du inte har gjort det tidigare kan du ta en titt på vår guide om hur du lägger till customize-kod i WordPress.

Först måste du ta reda på det namn som ditt WordPress theme använder för den specifika navigation menu location.

Det enklaste sättet att hitta detta är att besöka sidan Appearance ” Menus och föra musen över till området för menyer.

Find menu location name

Högerklicka för att select Inspect tool och då ser du namnet på location i källkoden under. Till exempel använder vårt demo theme primary, footer, och top-bar-menu.

Obs/observera det namn som används för din location där du vill visa länken för login/logga ut.

Följaktligen måste du add to följande kod till functions.php-filen i ditt theme eller till ett site-specifikt plugin.

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

Efter det kan du besöka din website och du kommer att se länken login our log out i din navigation menu.

Login link added via custom code

Denna dynamiska link kommer automatiskt att växla till login eller logga ut baserat på användarens status.

4. Lägga till Customize-text till din navigation menu i WordPress

Tänk om du bara vill add to text och ej en länk till din navigation menu?

Det finns två sätt du kan göra det på.

1. Add Custom Text till en specifik meny (enkelt sätt)

Gå bara till sidan Customize ” Menus och add to en customizer-länk med #-tecknet som URL och den text you vill visa som din Link Text.

Add custom text with dummy link

Klicka på knappen Add to Menu för att fortsätta.

WordPress kommer att add to din customize text som ett menu item i den vänstra colonnen. Klicka nu för att förstora den och ta bort #-tecknet.

Remove link

Glöm inte att clicka på knappen Save Menu och previewa din website. You’ll notice your custom text appear in the navigation menu.

Det är fortfarande en link, men att clicka på den gör ingenting för användaren.

custom text in navigation menu

2. Add Custom Text till en Navigation Menu med hjälp av kod

För den här metoden addar du ett code snippet till din website. Först måste du ta reda på namnet på din theme location enligt beskrivningen ovan i section login/logout link.

Följaktligen måste du add to följande kod till temats functions.php-fil eller ett site-specifikt plugin.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

Byt bara ut ”Custom Text” mot din egen text.

Du kan nu save dina ändringar och besöka din website för att se din customize text add to i slutet av din navigation menu.

Den här kodmetoden kan vara användbar om du vill lägga till dynamiska element i en WordPress-meny på ett programmatiskt sätt.

5. Add aktuellt datum i WordPress-menyn

Vill du visa aktuellt datum i en navigation menu i WordPress? Detta trick är praktiskt om du runar en blogg eller en website med nyheter som uppdateras ofta.

Lägg bara till följande kod i functions.php-filen i ditt theme eller i ett site-specifikt plugin.

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><a>' . $todaysdate .  '</a></li>';
 
    }
    return $items;
}

Glöm inte att ersätta ”primary” med din menus location.

Nu kan du besöka din website och se aktuellt datum i din WordPress menu.

Current date in WordPress menu

Du kan också ändra datumformatet så att du gillar det. Se vår tutorial om hur du ändrar datum- och tidsformat i WordPress.

6. Display User Name i WordPress Menu

Vill du add to lite mer personalisering till din navigation menu? Du kan hälsa inloggade användare med deras namn i din navigation menu.

Först måste du add to följande kod till ditt temas functions.php-fil eller ett site-specifikt plugin.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
			 if ( is_user_logged_in() )     {
				$current_user = wp_get_current_user();
				 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
			 } else { 
			 $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
			 }
        }
    }

    return $menu_items;
} 

Den här koden kontrollerar först om du har addat ett menu item med #profile_name# som länktext. Därefter ersätter den det menu itemet med den inloggade användarens namn eller en generisk hälsning för användare som inte är inloggade.

Därefter måste du gå till Appearance ” Menus page och lägga till en new custom link med #profile_name# som Link text.

Add special tag to a menu item

Glöm inte att klicka på knappen Save Menu för att spara dina ändringar. Därefter kan du besöka din website för att se den inloggade användarens namn i WordPress-menyn.

User name in WordPress navigation menu

7. Dynamiskt display av villkorliga menyer i WordPress

Hittills har vi visat dig hur du kan add to olika typer av custom objekt till specifika WordPress menyer. Ibland kan du dock behöva visa olika menu-items dynamiskt för användarna.

You kanske till exempel vill visa en meny endast för inloggade användare. Ett annat scenario är när du vill att menyn ska ändras baserat på vilken page användaren viewar.

Den här metoden allow you att skapa flera menyer och bara visa dem när vissa villkor matchas.

Först måste du installera och aktivera pluginet Conditional Menus. För mer detaljer, se vår steg-för-steg guide om hur du installerar ett WordPress plugin.

När du är aktiverad måste du besöka sidan Appearance ” Menus. Härifrån måste du skapa en new menu som du vill displayed. I det här exemplet skapade vi till exempel en new menu som endast är tillgänglig för inloggade användare.

Create new menu

När du har skapat menyn går du till tabben Manage Locations.

Härifrån måste du klicka på länken Villkorliga menyer bredvid menuens location.

Add a conditional menu

Därefter måste du selecta den menu du skapade tidigare från rullgardinsmenyn.

Klicka sedan på knappen ”+ Villkor” för att fortsätta.

Select menu you want to show

Ett popup-fönster kommer upp.

Härifrån kan du välja de villkor som måste uppfyllas för att denna meny ska kunna visas.

Choose condtions

Pluginet erbjuder en massa villkor att välja mellan. Till exempel kan du visa menyn baserat på specifik page, category, post type, taxonomi, och mer.

Du kan också visa olika menyer baserat på användarnas roller och status som inloggad. You kan till exempel visa en annan meny för befintliga medlemmar på en website för medlemskap.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till customize objekt till specifika WordPress-menyer. Du kanske också vill se vår guide om hur du väljer den bästa programvaran för webbdesign, eller vår expertjämförelse av den bästa programvaran för chattsupport för småföretag.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

66 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk

    I like the implementation of the search, where instead of the classic empty field, there is a popup window. It looks like a nice solution. I was also interested in the date and personalization of the logged in user. Thanks for the inspiration.

  3. reza

    very helpful and simple
    thanks thanks thanks

    • WPBeginner Support

      Glad our guide was helpful :)

      Administratör

  4. Denis

    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

    • WPBeginner Support

      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.

      Administratör

    • Ben Short

      I’m sure this is too late for Denis! But in case anyone else wants their menu item to come FIRST in the list of menu items, rather than LAST, here’s an example of code I’ve used for this purpose:

      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’) {
      $oldItems = $items;
      $items = ’Show whatever’;
      $items .= $oldItems;
      }
      return $items;
      }

  5. Karen

    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?

    • WPBeginner Support

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

      Administratör

  6. Mary

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

  7. Saurabh Saneja

    Hi,

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

    Thanks,

    Saurabh

    PS: big fan of your tuts :)

  8. Igor

    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

  9. Annemarie

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

  10. Tasneem

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

  11. Anuj

    Nice article, Help me alot.

  12. Garratt

    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

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

      • Garratt

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

  13. sahar

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

  14. Gerson

    How add this menu item in first position ?

  15. Gwen

    Awesome, Thanks you just saved me hours.

  16. Dilip

    What is use of 10,2 in the code

    • WPBeginner Support

      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.

      Administratör

  17. Pat

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

  18. Matt

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

  19. Ritchie Pettauer

    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.

  20. Bill Gram-Reefer

    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.

  21. Josalone Wordsworth

    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

  22. Hugo Callens

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

  23. Monilal

    Its works but current menu item not select

  24. james

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

    • Jonathan

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

  25. Gerrit

    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

  26. samuel

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

  27. lokitoki

    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

    • amit

      the option is available on wp admin panel

  28. gonzela2006

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

  29. Guillermo

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

  30. Pierre Laflamme

    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

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

      Administratör

    • Brad Trivers

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

      • Xúlio Zé

        Really useful!

        Thank you vary much Brad

        ^-^

      • Peter Lalor

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

  31. razvan

    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

  32. Kathy

    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!

  33. sachi

    awesome i was searching these codes

  34. Brad

    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

      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.

      Administratör

  35. Lavinia

    This isn’t work for me :(

  36. Andor Nagy

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

    Regards,
    Andor Nagy

    • Editorial Staff

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

      Administratör

    • Cameron Jones

      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;

      }

  37. Murugu

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

      • Murugu

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

  38. Elliott Wall

    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

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

      Administratör

      • Elliott Wall

        This worked perfectly— thank you again!

  39. Sam

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

    • xafar Ali

      Yes , just concatenate first instead of last.

      $items = ”MENU ITEM ” . $items;

  40. SAcha

    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

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.