Bei WPBeginner haben wir unzähligen Besuchern geholfen, ihre WordPress Websites individuell anzupassen, um das Benutzererlebnis zu verbessern, das Branding zu steigern und die Konversionsrate zu erhöhen. Und wir haben gesehen, dass ein einzigartiges Navigationsmenü, wenn es richtig gemacht wird, das Engagement erhöhen und die Besucher länger auf Ihrer Website halten kann.
Das Problem ist, dass alle WordPress-Themes feste Positionen haben, an denen ein Navigationsmenü angezeigt werden kann, so dass es schwierig sein kann, dies zu ändern. Das gilt vor allem für Anfänger, denn das Ändern von Theme-Dateien ist ein heikler Prozess.
Wenn Sie ein Block-Theme verwenden, können Sie dies mit dem Full Website-Editor tun. Unserer Erfahrung nach gibt es jedoch bessere Optionen, die für alle Arten von Themes geeignet sind.
Wenn Sie zum Beispiel erweiterte individuelle Anpassungen wünschen, können Sie einen leistungsstarken Page-Builder wie SeedProd verwenden. Oder, wenn Sie nach einer einfachen Möglichkeit suchen, individuellen Code zu verwenden, ist WPCode bei weitem die beste Wahl.
In diesem Artikel zeigen wir Ihnen, wie Sie ein individuelles Navigationsmenü zu einem beliebigen Bereich Ihres WordPress-Themes hinzufügen können. Wir führen Sie durch 3 verschiedene Optionen, so dass Sie das Tutorial wählen können, das für Ihre Bedürfnisse geeignet ist.
Warum benutzerdefinierte Navigationsmenüs in WordPress-Themes hinzufügen?
Ein Navigationsmenü ist eine Liste von Links, die auf wichtige Bereiche Ihrer Website verweisen. Sie machen es den Besuchern leicht, interessante Inhalte zu finden, was die Seitenaufrufe erhöhen und die Absprungrate in WordPress verringern kann.
Die genaue Position Ihres Menüs hängt von Ihrem WordPress-Theme ab. Die meisten Themes verfügen über mehrere Optionen, sodass Sie verschiedene Menüs erstellen und an unterschiedlichen Stellen anzeigen können.
Um zu sehen, wo Sie die Menüs in Ihrem aktuellen WordPress-Theme anzeigen können, gehen Sie einfach zu Erscheinungsbild “ Menüs und sehen Sie sich den Abschnitt „Anzeigeort“ an.
Die folgende Abbildung zeigt die Standorte, die vom Astra WordPress-Theme unterstützt werden.
Es kann vorkommen, dass Sie ein Menü in einem Bereich anzeigen möchten, der in Ihrem Thema nicht als „Anzeigeort“ aufgeführt ist.
Sehen wir uns also an, wie Sie ein benutzerdefiniertes Navigationsmenü zu einem beliebigen Bereich Ihres WordPress-Themes hinzufügen können. Verwenden Sie einfach die Links unten, um zu der von Ihnen bevorzugten Methode zu springen:
Methode 1: Verwendung des vollständigen Site-Editors (nur blockbasierte Themes)
Wenn Sie ein Block-Theme wie ThemeIsle Hestia Pro verwenden, können Sie mit Full Site Editing (FSE) und dem Block-Editor ein eigenes Navigationsmenü hinzufügen.
Weitere Einzelheiten finden Sie in unserem Artikel über die besten WordPress-Themes für die Bearbeitung ganzer Websites.
Diese Methode funktioniert nicht mit jedem Theme, und Sie können nicht jeden Teil des Menüs anpassen. Wenn Sie ein vollständig benutzerdefiniertes Menü zu einem beliebigen WordPress-Theme hinzufügen möchten, empfehlen wir stattdessen die Verwendung eines Plugins für den Seitenersteller.
Wenn Sie ein blockbasiertes Thema verwenden, gehen Sie zu Erscheinungsbild „ Editor.
Standardmäßig wird im vollständigen Site-Editor die Home-Vorlage Ihres Themas angezeigt, aber Sie können jedem Bereich ein Navigationsmenü hinzufügen.
Um alle verfügbaren Optionen zu sehen, wählen Sie entweder „Vorlagen“, „Muster“ oder „Seiten“.
Sie können nun auf die Vorlage, den Vorlagenteil oder die Seite klicken, zu der Sie ein benutzerdefiniertes Navigationsmenü hinzufügen möchten.
WordPress zeigt nun eine Vorschau des Designs an. Um dieses Template zu bearbeiten, klicken Sie auf das kleine Bleistiftsymbol.
Der nächste Schritt ist das Hinzufügen eines Navigationsblocks zu dem Bereich, in dem Sie Ihr Menü anzeigen möchten.
Klicken Sie in der oberen linken Ecke auf die blaue Schaltfläche „+“.
Geben Sie nun „Navigation“ in die Suchleiste ein.
Wenn der Block „Navigation“ erscheint, ziehen Sie ihn einfach auf Ihr Layout und legen ihn dort ab.
Klicken Sie anschließend auf , um den Navigationsblock auszuwählen.
Wenn Sie das Menü, das Sie anzeigen möchten, bereits erstellt haben, klicken Sie auf , um den Navigationsblock auszuwählen. Klicken Sie im rechten Menü auf das Symbol mit den drei Punkten neben „Menü“.
Sie können dann ein Menü aus der Dropdown-Liste auswählen.
Eine weitere Option ist die Erstellung eines Menüs innerhalb des Full-Site-Editors durch Hinzufügen von Seiten, Beiträgen, benutzerdefinierten Links und mehr. Um Elemente zum neuen Menü hinzuzufügen, klicken Sie einfach auf das „+“-Symbol.
Es öffnet sich ein Popup-Fenster, in dem Sie einen beliebigen Beitrag oder eine Seite hinzufügen und entscheiden können, ob diese Links in einem neuen Tab geöffnet werden sollen.
Sie können auch eine Suchleiste in das WordPress-Menü einfügen, Symbole für soziale Medien hinzufügen und vieles mehr. Geben Sie im Popup einfach den Block ein, den Sie dem Menü hinzufügen möchten, und wählen Sie die richtige Option aus, wenn sie erscheint.
Sie können diesen Block dann über die Einstellungen in der Minisymbolleiste und im rechten Menü konfigurieren. Wiederholen Sie einfach diese Schritte, um dem Menü weitere Elemente hinzuzufügen.
Wenn Sie mit dem Aussehen des Menüs zufrieden sind, klicken Sie einfach auf die Schaltfläche „Speichern“.
Ihre Website verwendet nun die neue Vorlage, und Besucher können mit Ihrem benutzerdefinierten Navigationsmenü interagieren.
Methode 2: Verwendung eines Page Builder-Plugins (funktioniert mit allen Themes)
Mit dem vollständigen Site-Editor können Sie Menüs zu blockbasierten Themes hinzufügen. Wenn Sie jedoch ein erweitertes, vollständig anpassbares Menü zu einem WordPress-Theme hinzufügen möchten, benötigen Sie ein Plugin für den Seitenersteller.
SeedProd ist das beste WordPress Page-Builder Plugin auf dem Markt, mit dem Sie jeden Teil Ihres Navigationsmenüs individuell anpassen können.
Wir haben umfangreiche Erfahrungen mit diesem Tool, um individuelle Navigationsmenüs, Landing Pages und vieles mehr zu erstellen. Weitere Details finden Sie in unserer vollständigen Rezension von SeedProd.
Für Seiten bietet SeedProd über 350 professionell gestaltete Templates, die Sie als Ausgangspunkt verwenden können. Nachdem Sie ein Template ausgewählt haben, können Sie Ihrer Website ein individuelles Navigationsmenü hinzufügen, indem Sie den vorgefertigten Nav Menu-Block von SeedProd verwenden.
Zunächst müssen Sie das SeedProd Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress Plugins.
Hinweis: Es gibt auch eine kostenlose Version von SeedProd, mit der Sie individuelle Navigationsmenüs erstellen können, ohne Code zu schreiben. In diesem Leitfaden werden wir jedoch SeedProd Pro verwenden, da es den Navigationsmenü-Block sowie zusätzliche Templates und erweiterte Funktionen enthält.
Nachdem Sie das Plugin aktiviert haben, fragt SeedProd nach Ihrem Lizenzschlüssel.
Sie können diese Informationen in Ihrem Konto auf der SeedProd-Website finden. Nachdem Sie den Schlüssel eingegeben haben, klicken Sie auf die Schaltfläche „Schlüssel überprüfen“.
Wenn Sie das getan haben, gehen Sie zu SeedProd “ Landing Pages und klicken Sie auf die Schaltfläche „Add New Landing Page“.
Sie können nun eine Vorlage für Ihre benutzerdefinierte Seite auswählen.
Um Ihnen zu helfen, das richtige Design zu finden, sind alle Vorlagen von SeedProd in verschiedene Kampagnentypen unterteilt, wie z. B. „Coming Soon “ und „Lead Squeeze“. Sie können die Vorlagen von SeedProd sogar verwenden, um Ihre 404-Seite zu verbessern.
Um einen Entwurf genauer zu betrachten, fahren Sie einfach mit der Maus über die Vorlage und klicken Sie auf das Lupensymbol.
Wenn Sie ein Design gefunden haben, das Sie verwenden möchten, klicken Sie auf „Diese Vorlage auswählen“.
Wir verwenden für alle unsere Bilder die Vorlage „Black Friday Sales Page“, aber Sie können jede beliebige Vorlage verwenden.
Nachdem Sie eine Vorlage ausgewählt haben, geben Sie einen Namen für diese benutzerdefinierte Seite ein. SeedProd erstellt automatisch eine URL, die auf dem Titel der Seite basiert, aber Sie können diese URL nach Belieben ändern.
Sie können zum Beispiel relevante Schlüsselwörter hinzufügen, damit die Suchmaschinen verstehen, worum es auf der Seite geht. Dies kann Ihre WordPress-SEO verbessern und der Suchmaschine helfen, die Seite Leuten zu zeigen, die nach Inhalten wie Ihren suchen.
Nachdem Sie diese Informationen eingegeben haben, klicken Sie auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“.
Die meisten Vorlagen enthalten bereits einige Blöcke, die die Kernkomponenten aller SeedProd-Seitenlayouts sind.
Um einen Block anzupassen, wählen Sie ihn einfach im Seiteneditor aus.
In der linken Symbolleiste werden nun alle Einstellungen für diesen Block angezeigt. In der Abbildung unten ändern wir zum Beispiel den Text in einem „Überschrift“-Block.
Über die Einstellungen im linken Menü können Sie den Text formatieren, seine Ausrichtung ändern, Links hinzufügen und vieles mehr.
Wenn Sie die Registerkarte „Erweitert“ auswählen, haben Sie Zugriff auf noch mehr Einstellungen. Zum Beispiel können Sie den Block durch das Hinzufügen von Box-Shadows und CSS-Animationen besonders hervorheben.
Um Ihrem Entwurf neue Blöcke hinzuzufügen, suchen Sie einfach einen beliebigen Block im linken Menü und ziehen ihn auf die Seite. Wenn Sie einen Block löschen möchten, wählen Sie ihn durch Anklicken aus und verwenden Sie dann das Mülleimer-Symbol.
Da wir ein benutzerdefiniertes Navigationsmenü erstellen wollen, ziehen Sie einen „Nav Menu“-Block auf die Seite.
Dadurch wird ein Navigationsmenü mit einem einzigen Standardeintrag „Über“ erstellt.
Sie können nun entweder ein neues Menü im SeedProd-Editor erstellen oder ein Menü auswählen, das Sie bereits im WordPress-Dashboard erstellt haben.
Um ein Menü anzuzeigen, das Sie zuvor erstellt haben, klicken Sie auf die Schaltfläche „WordPress-Menü“. Sie können nun die Dropdown-Liste „Menüs“ öffnen und eine beliebige Option aus der Liste auswählen.
Danach können Sie die Schriftgröße, die Textausrichtung und vieles mehr über die Einstellungen im linken Menü ändern.
Wenn Sie stattdessen ein neues Menü in SeedProd erstellen möchten, wählen Sie die Schaltfläche „Einfach“.
Klicken Sie dann auf , um das Element „Über“ zu erweitern, das SeedProd standardmäßig erstellt.
Dadurch werden einige Steuerelemente geöffnet, mit denen Sie den Text ändern und die URL hinzufügen können, zu der das Menüelement verlinkt werden soll.
Standardmäßig ist der Link „dofollow“ und wird im selben Browserfenster geöffnet. Sie können diese Einstellungen über die Kontrollkästchen im Abschnitt „URL-Link“ ändern.
In der folgenden Abbildung erstellen wir einen „nofollow“-Link, der in einem neuen Fenster geöffnet wird. Weitere Informationen zu diesem Thema finden Sie in unserem Leitfaden für Einsteiger zu nofollow-Links.
Um dem Menü weitere Einträge hinzuzufügen, klicken Sie einfach auf die Schaltfläche „Neuen Eintrag hinzufügen“.
Sie können dann jedes dieser Elemente nach demselben Verfahren wie oben beschrieben anpassen.
Das linke Menü enthält auch Einstellungen, mit denen Sie die Schriftgröße und die Textausrichtung ändern können.
Sie können sogar eine Trennlinie erstellen, die zwischen den einzelnen Punkten des Menüs erscheint.
Wechseln Sie anschließend zur Registerkarte „Erweitert“. Hier können Sie die Farben des Menüs, die Abstände, die Typografie und andere erweiterte Optionen ändern.
Während Sie Änderungen vornehmen, wird die Live-Vorschau automatisch aktualisiert, so dass Sie verschiedene Einstellungen ausprobieren können, um zu sehen, was in Ihrem Entwurf gut aussieht.
Standardmäßig zeigt SeedProd auf mobilen und Desktop-Geräten das gleiche Menü an. Allerdings haben mobile Geräte in der Regel viel kleinere Bildschirme als Desktop-Computer.
Aus diesem Grund sollten Sie ein separates Menü erstellen, das auf mobilen Geräten angezeigt wird. Zum Beispiel könnten Sie ein vertikales Layout verwenden, damit mobile Nutzer nicht seitwärts scrollen müssen. Möglicherweise sollten Sie auch weniger Links auf Smartphones und Tablets anzeigen.
Um ein mobilfähiges Menü zu erstellen, entwerfen Sie das Menü einfach nach dem oben beschriebenen Verfahren. Wählen Sie dann die Registerkarte „Erweitert“ und klicken Sie, um den Abschnitt „Gerätesichtbarkeit“ zu erweitern.
Sie können jetzt den Slider „Auf dem Desktop ausblenden“ einschalten.
Jetzt zeigt SeedProd dieses Menü nur noch für mobile Benutzer an.
Wenn Sie mit dem Aussehen Ihres benutzerdefinierten Menüs zufrieden sind, ist es an der Zeit, es zu veröffentlichen.
Klicken Sie einfach auf den Dropdown-Pfeil neben „Speichern“ und wählen Sie dann „Veröffentlichen“.
Wenn Sie nun Ihren WordPress-Blog besuchen, werden Sie das individuelle Navigationsmenü in Aktion sehen.
Methode 3: Erstellen eines benutzerdefinierten Navigationsmenüs in WordPress mit Code (Fortgeschrittene)
Wenn Sie kein Plugin für den Page-Builder einrichten möchten, können Sie ein individuelles Navigationsmenü mit Code hinzufügen. Oft finden Sie Anleitungen, wie Sie individuelle Codeschnipsel in die Datei functions.php Ihres Themes einfügen können.
Wir raten jedoch von dieser Methode ab, da schon ein kleiner Fehler in Ihrem Code zu einer Reihe von WordPress-Fehlern führen oder Ihre Website sogar komplett zerstören kann. Außerdem geht der individuell angepasste Code verloren, wenn Sie Ihr WordPress Theme aktualisieren.
Deshalb empfehlen wir die Verwendung von WPCode. Es ist der einfachste und sicherste Weg, benutzerdefinierten Code in WordPress hinzuzufügen, ohne die WordPress-Kerndateien bearbeiten zu müssen.
Hinweis: Es gibt viele verschiedene Möglichkeiten, wie Sie Ihre WordPress Website mit WPCode sicher individuell anpassen können. Es verfügt über eine integrierte Code-Snippets-Bibliothek und unterstützt alle wichtigen WordPress-Sprachen, einschließlich PHP, JavaScript, CSS und HTML. Weitere Informationen über das Plugin finden Sie in unserer vollständigen Rezension zu WPCode.
Als Erstes müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.
Gehen Sie nach der Aktivierung in Ihrem WordPress-Dashboard zu Code Snippets „ Snippet hinzufügen.
Hier sehen Sie alle vorgefertigten Snippets, die Sie Ihrer Website hinzufügen können, z. B. ein Snippet, mit dem Sie Kommentare vollständig deaktivieren, Dateitypen hochladen können, die WordPress normalerweise nicht unterstützt, Seiten mit Anhängen deaktivieren können und vieles mehr.
Um Ihr eigenes Snippet zu erstellen, fahren Sie mit der Maus über „Eigenen Code hinzufügen“ und klicken Sie dann auf „Snippet verwenden“.
Geben Sie zunächst einen Titel für das benutzerdefinierte Code-Snippet ein. Dies kann alles sein, was Ihnen hilft, das Snippet in Ihrem WordPress-Dashboard zu identifizieren.
Öffnen Sie anschließend das Dropdown-Menü „Code-Typ“ und wählen Sie „PHP Snippet“.
Fügen Sie dann einfach den folgenden Codeausschnitt in den Code-Editor ein:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Dadurch wird ein neuer Menüpunkt mit dem Namen „Mein eigenes Menü“ zu Ihrem Thema hinzugefügt. Wenn Sie einen anderen Namen verwenden möchten, ändern Sie einfach das Codeschnipsel.
Wenn Sie mehr als ein benutzerdefiniertes Navigationsmenü zu Ihrem Thema hinzufügen möchten, fügen Sie einfach eine zusätzliche Zeile zum Codeschnipsel hinzu.
In diesem Beispiel fügen wir unserem Theme zwei neue Positionen für Menüs hinzu, die „Mein individuelles Menü“ und „Extra Menü“ heißen.
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
Blättern Sie anschließend zu den Optionen für „Einfügen“. Wenn diese nicht bereits ausgewählt ist, wählen Sie die Methode „Automatisch einfügen“, damit WPCode das Snippet auf Ihrer gesamten Website einfügt.
Danach öffnen Sie das Dropdown-Menü „Standort“ und klicken auf „Überall ausführen“.
Scrollen Sie dann zum oberen Rand des Bildschirms und klicken Sie auf den Schalter „Inaktiv“, damit er auf „Aktiv“ wechselt.
Klicken Sie abschließend auf „Speichern“, um das Snippet zu aktivieren.
Danach gehen Sie zu Darstellung “ Menüs und sehen Sie sich den Bereich „Anzeigeort“ an.
Sie sollten nun eine neue Option „Mein benutzerdefiniertes Menü“ sehen.
Sie können nun einige Menüpunkte an der neuen Stelle hinzufügen. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Hinzufügen von Navigationsmenüs für Anfänger.
Wenn Sie mit Ihrem Menü zufrieden sind, fügen Sie es im nächsten Schritt zu Ihrem WordPress-Theme hinzu.
Die meisten Websites zeigen das Navigationsmenü direkt unter der Kopfzeile. Das bedeutet, dass das Menü eines der ersten Dinge ist, die Besucher sehen, zusammen mit dem Logo oder dem Titel der Website.
Sie können das benutzerdefinierte Navigationsmenü an jeder beliebigen Stelle hinzufügen, indem Sie einen Code in die Vorlagendatei Ihres Themes einfügen.
Gehen Sie in Ihrem WordPress-Dashboard zu Erscheinungsbild “ Editor für Themendateien.
Wählen Sie im Menü auf der rechten Seite das Template aus, in das Sie das Menü einfügen möchten. Wenn Sie zum Beispiel das individuelle Navigationsmenü im Header Ihrer Website anzeigen möchten, wählen Sie normalerweise die Datei header.php.
Wenn Sie Hilfe bei der Suche nach der richtigen Vorlagendatei benötigen, lesen Sie bitte unsere Anleitung, wie Sie die zu bearbeitenden Dateien in Ihrem WordPress-Theme finden.
Nachdem Sie die Datei ausgewählt haben, müssen Sie eine wp_nav_menu-Funktion hinzufügen und den Namen Ihres individuellen Menüs angeben.
Im folgenden Codeschnipsel fügen wir zum Beispiel „Mein individuelles Menü“ zum Header des Themes hinzu:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
Nachdem Sie den Code hinzugefügt haben, klicken Sie auf die Schaltfläche „Datei aktualisieren“, um Ihre Änderungen zu speichern.
Wenn Sie nun Ihre Website besuchen, werden Sie das benutzerdefinierte Menü in Aktion sehen.
Standardmäßig wird Ihr Menü als einfache Aufzählungsliste angezeigt.
Sie können das benutzerdefinierte Navigationsmenü so gestalten, dass es besser zu Ihrem WordPress-Theme oder dem Branding Ihres Unternehmens passt, indem Sie benutzerdefinierten CSS-Code zu Ihrer Website hinzufügen.
Gehen Sie dazu auf Erscheinungsbild “ Anpassen.
Klicken Sie im WordPress-Theme-Customizer auf „Zusätzliche CSS“.
Es öffnet sich ein kleiner Code-Editor, in den Sie einige CSS-Elemente eingeben können.
Jetzt können Sie Ihr Menü mit der CSS-Klasse gestalten, die Sie Ihrem Template für das Theme hinzugefügt haben. In unserem Beispiel ist dies .custom_menu_class.
Im folgenden Code fügen wir Ränder und Polsterungen hinzu, setzen die Textfarbe auf Schwarz und ordnen die Menüpunkte in einem horizontalen Layout an:
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}
Der WordPress Customizer wird automatisch aktualisiert.
Es wird nun angezeigt, wie das Menü mit dem neuen Stil aussehen wird.
Wenn Sie mit dem Aussehen des Menüs zufrieden sind, klicken Sie auf „Veröffentlichen“, um Ihre Änderungen zu aktivieren.
Weitere Informationen finden Sie in unserem Leitfaden für die Gestaltung von WordPress-Navigationsmenüs.
Experten-Leitfäden: Mehr mit WordPress-Navigationsmenüs erreichen
Mit WordPress können Sie alle Arten von hilfreichen und ansprechenden Menüs erstellen. In diesem Sinne finden Sie hier einige Expertenanleitungen, die Ihnen helfen, noch mehr aus Ihren Navigationsmenüs herauszuholen:
- Hinzufügen von Bildsymbolen zu Navigationsmenüs in WordPress
- Wie man Menüs in WordPress mit bedingter Logik versieht (Schritt für Schritt)
- Hinzufügen von Menübeschreibungen in Ihren WordPress Themes
- Wie man ein responsives Vollbildmenü in WordPress einfügt
- So fügen Sie ein Mega-Menü auf Ihrer WordPress Website hinzu (Schritt für Schritt)
Wir hoffen, dass dieser Leitfaden Ihnen geholfen hat, ein individuelles Navigationsmenü in WordPress hinzuzufügen. Vielleicht interessieren Sie sich auch für unsere Anleitungen zum Hinzufügen eines Buttons in Ihrem WordPress Header-Menü oder zum Hervorheben eines Menüpunkts in WordPress.
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.
Imran
I have a custom header built for wordpress when had menu items hardcoded, How can i use the wordpress menu in the header instead of the hardcoded menu ?
cheryl
I am fairly new to wordpress however I would like to edit a custom menu that we have created as something appears wrong within the menu.
How do i do this?
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
Helpful article. I am a WordPress user and this tips will help me to add custom navigation menus. Thanks for sharing.
Daniel Keith
Hi there,
Great tutorial. How can I apply CSS to this custom menu?
Though this is a great way to add multiple menus but without proper CSS the website look odd.
Zaheer Abbas
I m creating my word press theme but menu and widget is not showing in admin panel ???
is it built in features in word press or i have to create menus and widgets with code plz guide
Tabitha
How can I make my drop down menu into columns? My current drop down is too long.
Aakash Salunke
I’m little bit advanced user. My theme supports only one menu. But I want to add one more menu. I have made it but how can I add?
WPBeginner Support
First you will need to register the menu location, then you will need to edit your theme files to display your navigation menu.
Admin
bobit
its worked, thanks for the great post
Aijaz Ansari
Awsome, tutorial, it really helps a novice like me.
thanks
Victoria
Thanks for the article!!! I created my new menu.
I have a problem though.
My website has a fixed width, and when I resize the window everything stays in place, exept for the new menu. Min-width is not an option because it’s not exactly the behavior I want.
How can I make it behave the same way as the rest of the contents of the page?
Thanks!
Joey
THANKS! I was looking a long time for this, never thought it was so simple.
Cory
i have a crazy old theme that didnt support WP 3.0+ menus. This tutorial was so easy. Took me 3 minutes to bring it a little more up to date. thanks so much.
Jacques Goudreau
Thanks for the tip! Great tut!
Emma
Where do you even go to make these changes? I can’t see any of those options under the Theme or Theme Options tabs.
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
Editorial Staff
Most themes do support this. Look at Appearance > Menus. This article is for theme designers who want to add this feature in their themes to allow users to add menus from the backend.
Admin
Zoe
I’ve been trying to add a custom class to a singular custom url (to change the color of just one url) in the Top Nav Menus section, but it just adds my class as an extension of the existing class in the output source code and nothing happens.
Here’s my css code and the source code that is output on my site:
.myCustomClass { color: #FFFF00; }
A one-off colored link
Any suggestions on how to get this to work?
Editorial Staff
Yes add it like color: #ffff00 !important; in that class. This should do the trick.
Admin
Jeremy Johnson
I was able to implement these modifications and the custom menu works. However, the css in my chosen theme doesn’t seem to support sub-menus. The submenu item is always visible, mousing over the parent item does nothing, and the parent menu item is as wide as the wider child item which pushes the other menu items farther to the right than they should be. Any suggestions on making the sub-menu act dynamically? I’m fairly new to CSS.
Editorial Staff
The best place to start would be to take the default Twenty Eleven theme. Use the navigation CSS from there, and start modifying.
Admin
Cedric
Still looking for a solution for this.
shaunling
This is just great!
digitfox
Yeah! its a nice tutorial for me! I am very new to WP! Thanks
PauloNeves
I need help.
Follow all steps, but in Apparance Panel the option menu not enable.
When select other theme working.
How do enable option menu?
Thanks.
Paulo Neves
wpbeginner
@PauloNeves You have to add this line in your theme’s functions.php file: add_theme_support( ‚menus‘ );
Brad
Thanks for this! Worked awesomely for me and helped my client a lot! – aptdesign
eeebasic
That is very helpful me although wordprees 3.3 version released few days ago.
citydan
I have followed the instructions and this post and the post here (https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), and figured out how to get my CSS to make the menu appear correctly, but the child items (sub menu items) are not appearing. I have them set up correctly in the menus editor, but on the site they do not show. They are not hidden by CSS because they are not there in the source code of the page.
Any ideas why my menu sub-items are not showing?
GourabMalla
Hi,
I have added the custom menu in top navigation but want to know how can I active the “Current Page Class”.
I’m using WordPress 3.2
Thanks
Gourab
DanFlynnDesign
Thank you! Love how this is all dynamic so the client can edit if needed, plus able to state which is the current page and apply hover effect! EXACTLY what I was looking for!
asharperrazor
I have tried this many times. I have an old wordpress theme. So old I’m not even sure what version of wrodpress it was written for. Anyway, I can get the functions part to work. I can save the correct menu. I can put the code into other parts of my website, say the footer, although it displays as a hierarchy list and not horizontally.
Won’t display in the top nav menu. Do I need a new theme or is it possible to edit my current theme to allow the new menu function?
Thanks in advance. The website is http://www.asharperrazor.com
JamesGeorge
I implemented this with NO problems-thank you! I took the „nav menu“ code and put it in the div where my client’s theme was calling the list of pages. I basically replaced it with your code from above and uploaded it, and the css kept it in the same style. It looks great and functions perfectly. AWESOME!
ÁlvaroBenavides
I really need help implementing the CSS of the classes, so please notify when u finish!
Bec
Great post – thank you!
I have implemented as above and my menu items are showing on site only problem is that each page is empty?!
any ideas?
Editorial Staff
Sounds like a PHP error. Please validate your PHP to make sure there is no error.
Admin
Joseph McCullough
Quick and dirty – the way I like my code snippets. Thanks a bunch.
Paul
I have created custom navigation menus a couple of times. What is weird is that after I create and save them, they appear for a while and then the navigation bar returns to 2 tabs only as if the settings are automatically overwritten. On sites with the same template were I never created a custom bar they display correctly.
Any ideas?
Editorial Staff
Nope, no clue why it is doing that.
Admin
Narendra Choudhary
You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Reply
Ram
I have a question on nav menu,
is there any way to add the image to the list of navigation menus..
Thanks,
Ram
Editorial Staff
You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
Admin
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‚exclude=4,7&title_li=‘); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
Thanks,
Ram
Editorial Staff
Yes it is possible to add different images with the custom menu. The one you are using is not the menu that we are talking about in this article.
Julie @ Inspired to Write
Can you add code to make it look more presentable (fonts, buttons, size, etc)? If so, can you give me an example and where to put this code? Thanks!
Editorial Staff
That is a CSS related question. You will have to add the font size in the appropriate classes in the CSS file. We will be doing a writeup on the CSS styles soon.
Admin
Chris
Question about the menu handling.
I have a menu that is right aligned, so the menu items show up in reverse order.
Is there a way to sort the menu_order in REVERSE?
so: sort_column‘ => ‚menu_order‘ would have something added to reverse the order.
Thanks!
Editorial Staff
Just because they are right aligned, shouldn’t make it appear in reverse order. To fix that, you need to change your CSS rather than reversing the hook. Make a container div that is aligned right, and then make the list tags float left.
Admin
Julie
Have followed instructions but after creating menus and adding appropriate categories to use, I can’t see them in my nav bar – any ideas what I have done wrong?
Editorial Staff
Have you pasted the codes in your header.php or wherever that menu should appear?
Admin
dan
You also need to add this to your functions.php file in order for you to use the menus
register_nav_menus( array(
‚primary‘ => __( ‚Main Navigation‘, ‚twentyten‘ ),
) );
Editorial Staff
Certainly a thing that you should have when releasing free themes, but for custom themes it all depends on what you need. Sometimes you don’t have to register locations.
Admin
errr
i’m soooo not following … could u be more clear where i would plug this code (add_theme_support( ‚menus‘ );) into the functions.php file?
i’m totally lost
Editorial Staff
Somewhere within the php tags. If you do not have PHP experience, we recommend you hire a professional.
Admin
BanyanTree
If you are going to write articles for newbies, it follows you should answer simple questions. Otherwise, just pay for ads to push your business and save the pretense.
wpbeginner
@BanyanTree Adding codes to functions.php file is not that hard. You paste it within the php tags. We have written an articles like this:https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ But its just impossible to link to that one article from all of our articles. When someone asks you how do I change the background in CSS and you tell them that you add background: #000 or another hexcode in the CSS property thats help enough.Now if they ask where in the CSS file I paste that, then that is something you need to know before hands. This site is not a PHP for Dummies site or CSS for dummies site. We do our best to help as much people as possible for FREE.
BanyanTree
@wpbeginner@BanyanTree You don’t need to link to articles, no one asked for that. Three words answers his question; „at the end,“ which is easier to type than a snide remark. Keep in mind, you named your site; „wpbeginner,“ and if that’s the audience you seek, cater accordingly.
wpbeginner
@f1mktsol Yes and the site has grown beyond the audience we initially started with. This site has evolved. That is why we have categories… The word „beginner“ is being used on a relative scale.
We have articles for Very Newbies who are just users in our Beginners Guide Category… We also have articles in our WordPress plugins category that are catered to that audience.If you are in our WP Themes category, then the articles are written for beginning theme developers. They are beginners in the developer area. Same with the tutorials.
Hope that explains it.
f1mktsol
@wpbeginner If you’ve outgrown your name, you should change it to suit the audience you seem to prefer. Consider consulting a professional.
Skubeedoo
I added add_theme_support( ‚menus‘ );
and saw no option in the admin panel [where do i look?] I’m using intrepidity theme. I’m a noob, so it might be right in front of me and don’t know the difference. I have a website that has a WP inside it and want to be able to navigate out of WP and back to my main URL. All I need is a „Home“ nav link.
Thanks in advance.
Editorial Staff
It should show under Appearance Tab.
Admin
ianarosh
friend you have an awesome site and I am glad i’ve found it!
I was killing my head to figure how to add the costum menu and it was easy after i’ve seen this! Simply amazing.
A sugestion ever pondered in making posts about blog/server security? (not sure if you’ve had already need to explore more :O)
Best regards and keep the good work mate!
Editorial Staff
Do a search, we already have a post about that.
Admin
Charles
Can any of you tell me how to add support for multiple menus in the functions php file. I want to include two set’s of menus
Editorial Staff
You don’t need to have two set of functions.php… Just call the main function. Create multiple menus using the user interface in wp-admin. Then you would have to call the menus in the php code.
Admin
Jamie
Just to let you know but the following:
„add_theme_support( ’nav-menus‘ );“
Has changed in the final release to:
„add_theme_support( ‚menus‘ );“
Thanks!
Peter Luit
@Jamie: Thanks for that latest remark!
Editorial Staff
Thanks Jamie, Post fixed
Admin
Jacob
Great. Just what I was looking for. How do you add the menu slug to the function?
Editorial Staff
‚menu‘ => ‚Project Nav‘ like this <<
Admin
Chris Creed
Thanks for this – I’m currently playing around with the new menu system – it’s a great additional feature that’s going to make things so much easier. I develop themes and get quite a few support requests from people wanting to create custom navigation sections on their site – the new menus should hopefully help to simply things a lot (especially for people with little WordPress experience).
Gopal Bhattacharjee
I am also testing WordPress 3.0 Beta, now I can play arround with menu…Thanks!
Angie
I am wondering how to remove HOME from my nav menu using WP 3.0 beta. Do I edit the wp_nav_menu function or is there some other way?
If I edit the function, can you provide instruction?
Editorial Staff
You can simply click Remove…just like any other navigation link.
Admin
Kevin
Its a pity there’s no way to add the „home“ page to the menu from within the menu builder. This is a major flaw.
Editorial Staff
Why not? You can create a custom navigation link called Home and add your homepage URL to it.
Admin
Noor
I am also testing WordPress 3.0 Beta and I found few bad things in Menus…e.g it is inconsistent and hope till the final release it will become consistent
michelle
nice tutorial! thanks for the share!
Mani Viswanathan
Good Tutorials first up! will be useful while I upgrade to 3.0