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

Hinzufügen benutzerdefinierter Elemente zu bestimmten WordPress-Menüs

Möchten Sie benutzerdefinierte Elemente zu bestimmten WordPress-Menüs hinzufügen?

WordPress-Menüs sind Navigationsmenüs, die oben auf den meisten Websites angezeigt werden. Manchmal möchten Sie vielleicht andere benutzerdefinierte Elemente als einfache Links in Navigationsmenüs anzeigen.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach benutzerdefinierte Elemente zu bestimmten WordPress-Menüs hinzufügen können.

Adding custom items to WordPress menus

Warum benutzerdefinierte Elemente zu WordPress-Menüs hinzufügen

WordPress-Menüs sind Navigationslinks, die normalerweise am oberen Rand einer Website angezeigt werden. Auf mobilen Geräten werden sie oft angezeigt, wenn Sie auf ein Menüsymbol tippen.

example navigational menu

Da dies ein prominenter Platz in einem typischen WordPress-Website-Layout ist, ist es klug, ihn zu nutzen, indem man andere benutzerdefinierte Elemente als einfache Links im Menü platziert.

Zum Beispiel möchten einige Benutzer vielleicht das Suchformular anzeigen, wie wir es bei WPBeginner tun. Eine Mitgliedschafts-Website möchte vielleicht An- und Abmeldelinks anzeigen, oder Sie möchten Icons oder Bilder zu Ihrem Menü hinzufügen.

Standardmäßig sind die Navigationsmenüs so konzipiert, dass sie einfache Textlinks anzeigen. Sie können jedoch auch benutzerdefinierte Elemente in WordPress-Menüs platzieren.

Schauen wir uns nun an, wie Sie benutzerdefinierte Elemente zu bestimmten Menüs in WordPress hinzufügen können, während der Rest Ihres Navigationsmenüs intakt bleibt.

Hinzufügen benutzerdefinierter Elemente zu bestimmten Navigationsmenüs in WordPress

Es gibt verschiedene Möglichkeiten, benutzerdefinierte Elemente zu einem Navigationsmenü in WordPress hinzuzufügen. Es hängt davon ab, welche Art von benutzerdefiniertem Element Sie hinzufügen möchten.

Wir werden Ihnen einige der gängigsten Beispiele zeigen. Für einige von ihnen müssen Sie Plugins verwenden, für andere müssen Sie Code hinzufügen.

Wenn Sie zu einem bestimmten Abschnitt springen möchten, können Sie dieses Inhaltsverzeichnis verwenden:

Fangen wir an.

1. Hinzufügen eines Such-Popups im WordPress-Menü

Normalerweise können Sie ein Suchformular in Ihre WordPress-Seitenleiste einfügen, indem Sie das Standard-Such-Widget oder den Suchblock verwenden. Es gibt jedoch keine Möglichkeit, die Suche standardmäßig in das Navigationsmenü einzufügen.

Einige WordPress-Themes verfügen über eine Option zum Hinzufügen eines Suchfelds zum Hauptmenübereich. Wenn Ihr Theme dies nicht hat, können Sie die folgende Methode verwenden.

Hierfür müssen Sie das SearchWP Modal Search Form Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Dieses Plugin ist ein Addon für SearchWP, das beste WordPress-Such-Plugin auf dem Markt.

Das Addon ist kostenlos und funktioniert auch mit der Standard-WordPress-Suche. Wir empfehlen jedoch, es mit SearchWP zu verwenden, wenn Sie Ihre WordPress-Suche verbessern möchten.

Nachdem Sie das Addon installiert haben, gehen Sie einfach auf die Seite Erscheinungsbild “ Menüs. Klicken Sie unter der Spalte „Menüpunkte hinzufügen“ auf die Registerkarte „SearchWP Modal Search Forms“, um sie zu erweitern.

Add search to menu

Wählen Sie Ihre Suchmaschine aus und klicken Sie dann auf die Schaltfläche Zum Menü hinzufügen.

Das Plugin fügt die Suche zu Ihrem Navigationsmenü hinzu. Klicken Sie auf das „Modale Suchformular“ unter Ihren Menüpunkten, um es zu erweitern und ändern Sie die Bezeichnung in „Suche“ oder etwas anderes, das Sie wünschen.

Change search label

Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken, um Ihre Änderungen zu speichern.

Sie können nun Ihre Website besuchen und sehen, dass die Suche zu Ihrem Navigationsmenü hinzugefügt wurde. Wenn Sie darauf klicken, wird das Suchformular in einem Leuchtkasten geöffnet.

Search in navigation menu

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hinzufügen einer Suchschaltfläche zu einem WordPress-Menü.

2. Hinzufügen von Symbolen und benutzerdefinierten Bildern zu bestimmten Menüs

Ein weiteres beliebtes benutzerdefiniertes Element, das die Benutzer häufig zu einem bestimmten Menü hinzufügen möchten, ist ein Bild oder ein Symbol.

Dazu müssen Sie das Menu Image Icon Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung auf die Seite Erscheinungsbild “ Menüs und fahren Sie mit der Maus über den Menüpunkt, an dem Sie ein Symbol oder Bild anzeigen möchten.

Menu Image button

Klicken Sie auf die blaue Schaltfläche Menübild, um fortzufahren.

Daraufhin wird ein Popup-Fenster angezeigt. Hier können Sie ein Bild oder ein Symbol auswählen, das mit diesem Menüpunkt angezeigt werden soll.

Choose image or icon

Sie können auch die Position des Bildes oder Symbols in Bezug auf den Menüpunkt wählen. Sie können zum Beispiel das Symbol direkt vor dem Menüpunkt anzeigen, wie in unserem Beispiel unten, oder sogar den Menütitel ausblenden, so dass nur das Symbol angezeigt wird.

Vergessen Sie nicht, auf die Schaltfläche Änderungen speichern zu klicken, um Ihre Einstellungen zu speichern. Wiederholen Sie den Vorgang, wenn Sie Symbole oder Bilder zu anderen Menüpunkten hinzufügen möchten.

Danach können Sie Ihre Website besuchen, um das benutzerdefinierte Bild oder Symbol in bestimmten Menüpunkten zu sehen.

Menu icons

Eine ausführliche Anleitung finden Sie in unserem Tutorial zum Hinzufügen von Bildern in WordPress-Menüs.

3. Login-/Logout-Links zum spezifischen WordPress-Menü hinzufügen

Wenn Sie ein WordPress-Mitgliedschafts-Plugin verwenden oder ein Online-Geschäft betreiben, möchten Sie vielleicht den Benutzern die Möglichkeit geben, sich einfach bei ihren Konten anzumelden.

Standardmäßig verfügt WordPress nicht über eine einfache Möglichkeit, Links zum An- und Abmelden in Navigationsmenüs anzuzeigen.

Wir zeigen Ihnen, wie Sie sie mit Hilfe eines Plugins oder eines Code-Snippets hinzufügen können.

1. Hinzufügen von Login/Logout-Links zu Menüs mit einem Plugin

Diese Methode ist einfacher und wird für alle Benutzer empfohlen.

Zunächst müssen Sie das Plugin für das Login- oder Logout-Menüelement installieren und aktivieren. Danach müssen Sie die Seite Erscheinungsbild “ Menü aufrufen und auf die Registerkarte Login/Logout klicken, um sie zu erweitern.

Add login or logout link to specific WordPress menu

Hier müssen Sie den Punkt „Anmelden/Abmelden“ auswählen und auf die Schaltfläche „Zum Menü hinzufügen“ klicken.

Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken, um Ihre Änderungen zu speichern. Sie können nun Ihre Website besuchen, um Ihren benutzerdefinierten Login-Logout-Link in Aktion zu sehen.

Login and Logout link preview

Der Link ändert sich je nach Anmeldestatus des Benutzers dynamisch in Anmeldung oder Abmeldung.

Erfahren Sie mehr in unserem Tutorial über das Hinzufügen von Login- und Logout-Links in WordPress-Menüs.

2. Hinzufügen von Login-/Logout-Links mit benutzerdefiniertem Code

Bei dieser Methode müssen Sie Code zu Ihrer WordPress-Website hinzufügen. Wenn Sie dies noch nicht getan haben, werfen Sie einen Blick auf unsere Anleitung zum Hinzufügen von benutzerdefiniertem Code in WordPress.

Zunächst müssen Sie den Namen herausfinden, den Ihr WordPress-Theme für die spezifische Position des Navigationsmenüs verwendet.

Am einfachsten finden Sie dies, indem Sie die Seite Erscheinungsbild “ Menüs aufrufen und mit der Maus auf den Bereich der Menüpositionen gehen.

Find menu location name

Klicken Sie mit der rechten Maustaste, um das Werkzeug „Inspect“ auszuwählen, und dann sehen Sie den Ortsnamen im Quellcode unten. Unser Demo-Theme verwendet zum Beispiel primär, Fußzeile und Top-Bar-Menü.

Notieren Sie sich den Namen, den Sie für den Zielort verwenden, an dem Sie den Anmelde-/Abmeldelink anzeigen möchten.

Als Nächstes müssen Sie den folgenden Code in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin einfügen.

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

Danach können Sie Ihre Website besuchen, und Sie sehen den Link zum Anmelden oder Abmelden in Ihrem Navigationsmenü.

Login link added via custom code

Dieser dynamische Link schaltet je nach Anmeldestatus des Benutzers automatisch auf Login oder Logout um.

4. Hinzufügen von benutzerdefiniertem Text zu Ihrem WordPress-Navigationsmenü

Was, wenn Sie nur Text und keinen Link zu Ihrem Navigationsmenü hinzufügen möchten?

Es gibt zwei Möglichkeiten, wie Sie das tun können.

1. Benutzerdefinierten Text zu einem bestimmten Menü hinzufügen (einfacher Weg)

Gehen Sie einfach auf die Seite Erscheinungsbild “ Menüs und fügen Sie einen benutzerdefinierten Link mit dem Zeichen # als URL und dem Text, den Sie anzeigen möchten, als Linktext hinzu.

Add custom text with dummy link

Klicken Sie auf die Schaltfläche Zum Menü hinzufügen, um fortzufahren.

WordPress fügt Ihren benutzerdefinierten Text als Menüpunkt in der linken Spalte hinzu. Klicken Sie nun darauf, um ihn zu erweitern, und löschen Sie das #-Zeichen.

Remove link

Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken und Ihre Website in der Vorschau anzuzeigen. Sie werden sehen, dass Ihr benutzerdefinierter Text im Navigationsmenü erscheint.

Es handelt sich zwar immer noch um einen Link, aber wenn der Nutzer darauf klickt, hat er nichts davon.

custom text in navigation menu

2. Hinzufügen von benutzerdefiniertem Text zu einem Navigationsmenü mit Code

Bei dieser Methode fügen Sie einen Codeschnipsel in Ihre Website ein. Zunächst müssen Sie den Namen des Speicherorts Ihres Themas herausfinden, wie oben im Abschnitt Login/Logout-Link beschrieben.

Danach müssen Sie den folgenden Code in die Datei functions.php des Themes oder ein site-spezifisches Plugin einfügen.

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

Ersetzen Sie einfach die Stelle, an der ‚Benutzerdefinierter Text‘ steht, durch Ihren eigenen Text.

Sie können nun Ihre Änderungen speichern und Ihre Website besuchen, um den benutzerdefinierten Text am Ende des Navigationsmenüs zu sehen.

Diese Code-Methode kann sich als nützlich erweisen, wenn Sie programmatisch dynamische Elemente zu einem bestimmten WordPress-Menü hinzufügen möchten.

5. Aktuelles Datum im WordPress-Menü hinzufügen

Möchten Sie das aktuelle Datum in einem Navigationsmenü in WordPress anzeigen? Dieser Trick ist sehr nützlich, wenn Sie einen häufig aktualisierten Blog oder eine News-Website betreiben.

Fügen Sie einfach den folgenden Code in die Datei functions.php Ihres Themes oder in ein site-spezifisches Plugin ein.

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

Vergessen Sie nicht, „primär“ durch den Standort Ihres Menüs zu ersetzen.

Sie können nun Ihre Website besuchen, um das aktuelle Datum in Ihrem WordPress-Menü zu sehen.

Current date in WordPress menu

Sie können auch das Datumsformat nach Ihren Wünschen ändern. Siehe unsere Anleitung zum Ändern des Datums- und Zeitformats in WordPress.

6. Benutzernamen im WordPress-Menü anzeigen

Möchten Sie Ihr Navigationsmenü noch ein wenig persönlicher gestalten? Sie können eingeloggte Benutzer mit ihrem Namen in Ihrem Navigationsmenü begrüßen.

Als erstes müssen Sie den folgenden Code in die Datei functions.php Ihres Themes oder in ein Site-spezifisches Plugin einfügen.

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

Dieser Code prüft zunächst, ob Sie einen Menüpunkt mit #profile_name# als Linktext hinzugefügt haben. Danach ersetzt er diesen Menüpunkt durch den Namen des angemeldeten Benutzers oder eine generische Begrüßung für nicht angemeldete Benutzer.

Als Nächstes müssen Sie auf die Seite Erscheinungsbild “ Menüs gehen und einen neuen benutzerdefinierten Link mit dem #profil_name# als Linktext hinzufügen.

Add special tag to a menu item

Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken, um Ihre Änderungen zu speichern. Danach können Sie Ihre Website besuchen, um den Namen des eingeloggten Benutzers im WordPress-Menü zu sehen.

User name in WordPress navigation menu

7. Dynamische Anzeige bedingter Menüs in WordPress

Bislang haben wir Ihnen gezeigt, wie Sie verschiedene Arten von benutzerdefinierten Elementen zu bestimmten WordPress-Menüs hinzufügen können. Manchmal müssen Sie den Benutzern jedoch dynamisch verschiedene Menüpunkte anzeigen.

Sie möchten zum Beispiel ein Menü nur angemeldeten Benutzern zeigen. Ein anderes Szenario ist, wenn Sie möchten, dass sich das Menü ändert, je nachdem, welche Seite der Benutzer gerade anschaut.

Mit dieser Methode können Sie mehrere Menüs erstellen und diese nur anzeigen, wenn bestimmte Bedingungen erfüllt sind.

Zunächst müssen Sie das Plugin für bedingte Menüs installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie die Seite Erscheinungsbild “ Menüs aufrufen. Von hier aus müssen Sie ein neues Menü erstellen, das Sie anzeigen möchten. In diesem Beispiel haben wir zum Beispiel ein neues Menü nur für angemeldete Benutzer erstellt.

Create new menu

Nachdem Sie das Menü erstellt haben, wechseln Sie zur Registerkarte „Standorte verwalten“.

Von hier aus müssen Sie auf den Link Bedingte Menüs neben der Position des Menüs klicken.

Add a conditional menu

Danach müssen Sie das Menü, das Sie zuvor erstellt haben, aus dem Dropdown-Menü auswählen.

Klicken Sie dann auf die Schaltfläche „+ Bedingungen“, um fortzufahren.

Select menu you want to show

Daraufhin wird ein Popup-Fenster angezeigt.

Hier können Sie die Bedingungen auswählen, die erfüllt sein müssen, damit dieses Menü angezeigt wird.

Choose condtions

Das Plugin bietet eine Reihe von Bedingungen, aus denen Sie wählen können. Zum Beispiel können Sie das Menü basierend auf einer bestimmten Seite, Kategorie, Beitragstyp, Taxonomie und mehr anzeigen.

Sie können auch unterschiedliche Menüs je nach Benutzerrolle und Anmeldestatus anzeigen. Zum Beispiel können Sie bestehenden Mitgliedern auf einer Mitglieder-Website ein anderes Menü zeigen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu erfahren, wie Sie benutzerdefinierte Elemente zu bestimmten WordPress-Menüs hinzufügen können. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Auswahl der besten Webdesign-Software oder unseren Expertenvergleich der besten Live-Chat-Software für kleine Unternehmen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

66 KommentareEine Antwort hinterlassen

  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 :)

      Admin

  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.

      Admin

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

      Admin

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

  12. sahar

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

  13. Gerson

    How add this menu item in first position ?

  14. Gwen

    Awesome, Thanks you just saved me hours.

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

      Admin

  16. Pat

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

  17. Matt

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

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

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

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

  21. 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“?

  22. Monilal

    Its works but current menu item not select

  23. 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?

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

  25. samuel

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

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

  27. gonzela2006

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

  28. Guillermo

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

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

      Admin

    • 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

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

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

  32. sachi

    awesome i was searching these codes

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

  34. Andor Nagy

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

    Regards,
    Andor Nagy

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

      }

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

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

      Admin

      • Elliott Wall

        This worked perfectly— thank you again!

  37. 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;

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

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.