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.
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.
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:
- Hinzufügen eines Such-Popups zu Ihrem WordPress-Menü
- Hinzufügen von Icons oder Bildern zu Ihrem Menü
- Hinzufügen von Login/Logout-Links zu Ihrem Menü
- Hinzufügen von benutzerdefiniertem Text zu einem WordPress-Menü
- Hinzufügen des aktuellen Datums zum Menü
- Benutzernamen in Ihrem Menü anzeigen
- Verschiedene Menüs auf verschiedenen Seiten anzeigen
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.
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.
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.
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.
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.
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.
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.
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.
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.
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ü.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
reza
very helpful and simple
thanks thanks thanks
WPBeginner Support
Glad our guide was helpful
Admin
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;
}
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
Mary
How to add in my secondary menu footer class li items in functions.php…?
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
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
Annemarie
Thank you for this! Just what I needed in a project.
Tasneem
I used the code for teh search box it works perfect.
Anuj
Nice article, Help me alot.
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;
}
sahar
It worked but it destroyed responsivity…I had to remove code
Gerson
How add this menu item in first position ?
Gwen
Awesome, Thanks you just saved me hours.
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
Pat
This is so useful and just what I needed! Thank you very much for sharing.
Matt
The Log-in link won’t show up, just the log out link. What could cause this?
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.
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.
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
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“?
Monilal
Its works but current menu item not select
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?
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
samuel
hey how if i want to add it to sub menu ?
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
lokitoki
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
gonzela2006
Hello,
How can I add the following classes active and current-menu-item and the id menu-item-id ?
Lại Đình Cường
How about add new custom menu to specific position?
Guillermo
I want put a little image beside left to the menu home, how can put it?
please help me
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
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
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!
Erik Mitjans
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
sachi
awesome i was searching these codes
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.phpfile or a site specific plugin.Admin
Lavinia
This isn’t work for me
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?
Admin
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;
}
Murugu
Pardon my ignorance but which php file would I be editing?
Editorial Staff
This would go in your functions.php file.
Admin
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;
}
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; }1-click Use in WordPress
Admin
Elliott Wall
This worked perfectly— thank you again!
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;
piomat
beer!
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
Editorial Staff
Not sure if that is possible.
Admin