Noi di WPBeginner abbiamo aiutato innumerevoli lettori a personalizzare i loro siti WordPress per migliorare l’esperienza dell’utente, incrementare il brand e favorire le conversioni. E abbiamo visto che, se fatto bene, un menu di navigazione unico nel suo genere può aiutare ad aumentare l’engagement e a far rimanere gli utenti sul sito più a lungo.
Il problema è che tutti i temi di WordPress hanno delle impostazioni che visualizzano il menu di navigazione, quindi modificarle può essere complicato. Questo è particolarmente vero se siete principianti, perché la modifica dei file dei temi è un processo delicato.
Se si utilizza un tema a blocchi, è possibile farlo con l’editor completo del sito. Tuttavia, secondo la nostra esperienza, esistono opzioni migliori che funzionano per tutti i temi.
Ad esempio, se si desiderano personalizzazioni avanzate, è possibile utilizzare un potente builder di pagine come SeedProd. Se invece cercate un modo semplice per utilizzare il codice personalizzato, WPCode è di gran lunga la scelta migliore.
In questo articolo vi mostreremo come aggiungere un menu di navigazione personalizzato a qualsiasi area del vostro tema WordPress. Vi illustreremo 3 diverse opzioni, in modo che possiate scegliere il tutorial più adatto alle vostre esigenze.
Perché aggiungere menu di navigazione personalizzati nei temi WordPress?
Un menu di navigazione è un elenco di link che puntano ad aree importanti del vostro sito web. Essi facilitano ai visitatori la ricerca di contenuti interessanti, aumentando le visualizzazioni delle pagine e riducendo la frequenza di rimbalzo in WordPress.
La posizione esatta del menu varia in base al tema di WordPress. La maggior parte dei temi dispone di diverse opzioni, per cui è possibile creare diversi menu e mostrarli in posizioni diverse.
Per vedere dove è possibile visualizzare i menu nel vostro tema WordPress attuale, basta andare su Aspetto ” Menu e poi dare un’occhiata alla sezione “Posizione di visualizzazione”.
L’immagine seguente mostra le posizioni supportate dal tema WordPress Astra.
A volte si può desiderare di mostrare un menu in un’area che non è elencata come “Posizione di visualizzazione” nel tema.
Con queste premesse, vediamo come aggiungere un menu di navigazione personalizzato a qualsiasi area del vostro tema WordPress. Utilizzate i link rapidi qui sotto per passare al metodo che preferite:
Metodo 1: Utilizzo dell’editor completo del sito (solo per i temi a blocchi)
Se si utilizza un tema a blocchi come ThemeIsle Hestia Pro, è possibile aggiungere un menu di navigazione personalizzato utilizzando il Full Site Editing (FSE) e l’editor di blocchi.
Per maggiori dettagli, potete consultare il nostro articolo sui migliori temi WordPress per la modifica dell’intero sito.
Questo metodo non funziona con tutti i temi e non consente di personalizzare ogni parte del menu. Se si desidera aggiungere un menu completamente personalizzato a qualsiasi tema WordPress, si consiglia di utilizzare un plugin per la creazione di pagine.
Se si utilizza un tema a blocchi, andare su Aspetto “ Editor.
Per impostazione predefinita, l’editor completo del sito mostra il modello di home del tema, ma è possibile aggiungere un menu di navigazione a qualsiasi area.
Per vedere tutte le opzioni disponibili, basta selezionare “Modelli”, “Schemi” o “Pagine”.
Ora è possibile fare clic sul modello, sulla parte del modello o sulla pagina in cui si desidera aggiungere un menu di navigazione personalizzato.
WordPress mostrerà ora un’anteprima del design. Per modificare questo template, fare clic sulla piccola icona della matita.
Il passo successivo è l’aggiunta di un blocco di navigazione nell’area in cui si vuole mostrare il menu.
Nell’angolo in alto a sinistra, fare clic sul pulsante blu “+”.
A questo punto, digitate “Navigazione” nella barra di ricerca.
Quando appare il blocco “Navigazione”, è sufficiente trascinarlo sul layout.
Quindi, fare clic per selezionare il blocco Navigazione.
Se è già stato creato il menu che si desidera visualizzare, fare clic per selezionare il blocco Navigazione. Nel menu di destra, fare clic sull’icona con i tre puntini accanto a “Menu”.
È quindi possibile scegliere un menu dal menu a discesa.
Un’altra opzione è quella di costruire un menu all’interno dell’editor del sito completo, aggiungendo pagine, post, link personalizzati e altro ancora. Per aggiungere elementi al nuovo menu, basta cliccare sull’icona ‘+’.
Si apre una finestra a comparsa in cui è possibile aggiungere qualsiasi post o pagina e decidere se questi link devono essere aperti in una nuova scheda.
È anche possibile aggiungere una barra di ricerca al menu di WordPress, aggiungere le icone dei social media e altro ancora. Nel popup, è sufficiente digitare il blocco che si desidera aggiungere al menu e selezionare l’opzione giusta quando appare.
È quindi possibile configurare questo blocco utilizzando le impostazioni della mini-barra degli strumenti e del menu di destra. È sufficiente ripetere questi passaggi per aggiungere altre voci al menu.
Quando si è soddisfatti dell’aspetto del menu, è sufficiente fare clic sul pulsante “Salva”.
Ora il sito utilizza il nuovo modello e i visitatori possono interagire con il menu di navigazione personalizzato.
Metodo 2: Utilizzo di un plugin Page Builder (funziona con tutti i temi)
L’editor completo del sito consente di aggiungere menu ai temi basati su blocchi. Tuttavia, se si desidera aggiungere un menu avanzato e completamente personalizzabile a qualsiasi tema WordPress, è necessario un plugin per la creazione di pagine.
SeedProd è il miglior plugin per WordPress page builder sul mercato che consente di personalizzare ogni parte del menu di navigazione.
Abbiamo una vasta esperienza nell’uso di questo strumento per costruire menu di navigazione personalizzati, landing page e molto altro. Per maggiori dettagli, selezionate la nostra recensione completa di SeedProd.
Per quanto riguarda le pagine, SeedProd offre oltre 350 template progettati professionalmente che possono essere utilizzati come punto di partenza. Dopo aver scelto un template, è possibile aggiungere un menu di navigazione personalizzato al sito utilizzando il blocco Nav Menu già pronto di SeedProd.
Per prima cosa, è necessario installare e attivare il plugin SeedProd. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.
Nota: esiste anche una versione gratuita di SeedProd che consente di creare menu di navigazione personalizzati senza scrivere codice. In questa guida, tuttavia, utilizzeremo SeedProd Pro, poiché dispone del blocco Nav Menu, oltre a template aggiuntivi e caratteristiche avanzate.
Dopo aver attivato il plugin, SeedProd chiederà la chiave di licenza.
Queste informazioni si trovano nel proprio account sul sito web di SeedProd. Dopo aver inserito la chiave, fare clic sul pulsante “Verifica chiave”.
Una volta fatto ciò, andate su SeedProd ” Pagine di destinazione e fate clic sul pulsante “Aggiungi nuova pagina di destinazione”.
È ora possibile scegliere un modello per la pagina personalizzata.
Per aiutarvi a trovare il design giusto, tutti i modelli di SeedProd sono organizzati in diversi tipi di campagna, come le campagne coming soon e lead squeeze. È possibile utilizzare i modelli di SeedProd anche per migliorare la propria pagina 404.
Per dare un’occhiata più da vicino a qualsiasi disegno, è sufficiente passare il mouse su quel modello e fare clic sull’icona della lente d’ingrandimento.
Una volta trovato il design che si desidera utilizzare, fare clic su “Scegli questo modello”.
In tutte le nostre immagini utilizziamo il modello “Black Friday Sales Page”, ma potete utilizzare qualsiasi modello desideriate.
Dopo aver scelto un modello, digitare un nome per la pagina personalizzata. SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma è possibile cambiare questo URL con qualsiasi cosa si desideri.
Ad esempio, si possono aggiungere parole chiave pertinenti per aiutare i motori di ricerca a capire di cosa parla la pagina. Questo può migliorare la SEO di WordPress e aiutare il motore di ricerca a mostrare la pagina alle persone che cercano contenuti simili ai vostri.
Dopo aver inserito queste informazioni, fare clic sul pulsante “Salva e inizia a modificare la pagina”.
La maggior parte dei modelli contiene già alcuni blocchi, che sono i componenti fondamentali di tutti i layout di pagina di SeedProd.
Per personalizzare un blocco, basta fare clic per selezionarlo nell’editor di pagina.
La barra degli strumenti di sinistra mostrerà ora tutte le impostazioni per quel blocco. Ad esempio, nell’immagine sottostante, stiamo modificando il testo all’interno di un blocco “Titolo”.
È possibile formattare il testo, modificarne l’allineamento, aggiungere collegamenti e altro ancora utilizzando le impostazioni del menu di sinistra.
Se si seleziona la scheda “Avanzate”, si avrà accesso a un numero ancora maggiore di impostazioni. Ad esempio, è possibile far risaltare il blocco aggiungendo ombreggiature e animazioni CSS.
Per aggiungere nuovi blocchi al progetto, è sufficiente trovare un blocco qualsiasi nel menu di sinistra e trascinarlo sulla pagina. Se si desidera eliminare un blocco, fare clic per selezionarlo e utilizzare l’icona del cestino.
Poiché vogliamo creare un menu di navigazione personalizzato, trasciniamo un blocco “Menu nav” nella pagina.
Questo crea un menu di navigazione con una singola voce predefinita “Informazioni”.
A questo punto è possibile creare un nuovo menu nell’editor di SeedProd o scegliere un menu già creato nella dashboard di WordPress.
Per mostrare un menu creato in precedenza, fate clic sul pulsante “Menu WordPress”. A questo punto è possibile aprire il menu a tendina “Menu” e scegliere una qualsiasi opzione dall’elenco.
Successivamente, è possibile modificare la dimensione dei caratteri, l’allineamento del testo e altro ancora utilizzando le impostazioni del menu di sinistra.
Se invece si desidera creare un nuovo menu all’interno di SeedProd, selezionare il pulsante “Semplice”.
Quindi, fare clic per espandere la voce “Informazioni” che SeedProd crea per impostazione predefinita.
Si aprono alcuni controlli in cui è possibile modificare il testo e aggiungere l’URL a cui la voce di menu sarà collegata.
Per impostazione predefinita, il link sarà “dofollow” e si aprirà nella stessa finestra del browser. È possibile modificare queste impostazioni utilizzando le caselle di controllo nella sezione “Link URL”.
Nell’immagine seguente, stiamo creando un link “nofollow” che si aprirà in una nuova finestra. Per saperne di più su questo argomento, consultate la nostra guida per principianti sui link nofollow.
Per aggiungere altre voci al menu, è sufficiente fare clic sul pulsante “Aggiungi nuova voce”.
È quindi possibile personalizzare ciascuno di questi elementi seguendo la stessa procedura descritta sopra.
Il menu di sinistra contiene anche impostazioni che modificano la dimensione dei caratteri e l’allineamento del testo.
È anche possibile creare un divisorio, che apparirà tra ogni voce del menu.
Dopodiché, passare alla scheda ‘Avanzate’. Qui è possibile modificare i colori, la spaziatura, la tipografia e altre opzioni avanzate del menu.
Man mano che si apportano le modifiche, l’anteprima dal vivo si aggiorna automaticamente, in modo da poter provare diverse impostazioni per vedere cosa si ottiene con il proprio progetto.
Per impostazione predefinita, SeedProd mostra lo stesso menu su dispositivi mobili e desktop. Tuttavia, i dispositivi mobili hanno in genere schermi molto più piccoli rispetto ai computer desktop.
Per questo motivo, è consigliabile creare un menu separato da visualizzare sui dispositivi mobili. Ad esempio, si potrebbe utilizzare un layout verticale, in modo che gli utenti mobili non debbano scorrere lateralmente. Potreste anche voler mostrare meno link sui dispositivi smartphone e tablet.
Per creare un menu pronto per i dispositivi mobili, è sufficiente progettare il menu seguendo la stessa procedura descritta sopra. Quindi, selezionare la scheda ‘Avanzate’ e fare clic per espandere la sezione ‘Visibilità del dispositivo’.
È ora possibile attivare/disattivare il cursore “Nascondi sul desktop”.
Ora, SeedProd mostrerà questo menu solo agli utenti mobili.
Quando si è soddisfatti dell’aspetto del menu personalizzato, è il momento di pubblicarlo.
È sufficiente fare clic sulla freccia a discesa accanto a “Salva” e selezionare “Pubblica”.
Ora, se visitate il vostro blog WordPress, vedrete il menu di navigazione personalizzato in azione.
Metodo 3: Creare un menu di navigazione personalizzato in WordPress usando il codice (avanzato)
Se non si vuole impostare un plugin per il page builder, è possibile aggiungere un menu di navigazione personalizzato utilizzando il codice. Spesso si trovano guide con istruzioni su come add-on di snippet di codice personalizzati al file functions.php del tema.
Tuttavia, non raccomandiamo questo metodo, poiché anche un piccolo errore nel codice potrebbe causare una serie di errori comuni di WordPress o addirittura rompere completamente il sito. Inoltre, quando aggiornerete il tema di WordPress, perderete il codice personalizzato.
Ecco perché vi consigliamo di utilizzare WPCode. È il modo più semplice e sicuro per aggiungere codice personalizzato in WordPress senza dover modificare alcun file centrale di WordPress.
Nota: WPCode può essere utilizzato in molti modi diversi per personalizzare in modo sicuro il vostro sito WordPress. Ha una libreria di snippet di codice integrata e supporta tutti i più importanti linguaggi di WordPress, tra cui PHP, JavaScript, CSS e HTML. Per ulteriori informazioni sul plugin, consultate la nostra recensione completa di WPCode.
La prima cosa da fare è installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consultate la nostra guida passo-passo su come installare un plugin di WordPress.
Dopo l’attivazione, andate su Code Snippets “ Add Snippet nella vostra dashboard di WordPress.
Qui vedrete tutti gli snippet già pronti che potete aggiungere al vostro sito, tra cui uno snippet che vi permette di disabilitare completamente i commenti, di caricare tipi di file che WordPress di solito non supporta, di disabilitare le pagine degli allegati e molto altro ancora.
Per creare il proprio snippet, passare il mouse su “Aggiungi codice personalizzato” e fare clic su “Usa snippet”.
Per iniziare, inserite un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che aiuti a identificare lo snippet nella dashboard di WordPress.
Quindi, aprire il menu a tendina “Tipo di codice” e selezionare “Snippet PHP”.
Una volta fatto ciò, è sufficiente incollare il seguente snippet nell’editor di codice:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Questo aggiungerà una nuova posizione del menu al tema, chiamata “Il mio menu personalizzato”. Per utilizzare un nome diverso, è sufficiente modificare lo snippet di codice.
Se si desidera aggiungere più di un menu di navigazione personalizzato al tema, è sufficiente aggiungere una riga in più allo snippet di codice.
Ad esempio, qui stiamo aggiungendo due nuove posizioni di menu al nostro tema, chiamate “Menu personalizzato” e “Menu extra”.
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' );
Successivamente, scorrere fino alle opzioni “Inserimento”. Se non è già selezionata, scegliere il metodo “Inserimento automatico”, in modo che WPCode aggiunga lo snippet in tutto il sito.
Quindi, aprire il menu a tendina “Posizione” e fare clic su “Esegui ovunque”.
Quindi, siete pronti a scorrere fino alla parte superiore dello schermo e a fare clic sulla levetta “Inattivo” per farla diventare “Attivo”.
Infine, fare clic su “Salva” per rendere attivo questo snippet.
Successivamente, andare su Aspetto ” Menu e controllare l’area “Posizione di visualizzazione”.
A questo punto dovrebbe apparire una nuova opzione “Il mio menu personalizzato”.
Ora è possibile aggiungere alcune voci di menu alla nuova posizione. Per ulteriori informazioni, consultare la nostra guida passo-passo su come aggiungere menu di navigazione per principianti.
Quando siete soddisfatti del vostro menu, il passo successivo è aggiungerlo al vostro tema WordPress.
La maggior parte dei siti web mostra il menu di navigazione direttamente sotto la sezione dell’intestazione. Ciò significa che il menu è una delle prime cose che i visitatori vedono, insieme al logo o al titolo del sito.
È possibile aggiungere il menu di navigazione personalizzato in qualsiasi posizione aggiungendo del codice al file del modello del tema.
Nella dashboard di WordPress, andare su Aspetto ” Editor dei file del tema.
Nel menu di destra, scegliere il template in cui si desidera aggiungere il menu. Ad esempio, se si vuole mostrare il menu di navigazione personalizzato nell’header del sito web, in genere si seleziona il file header.php.
Per trovare il file del modello giusto, consultate la nostra guida su come trovare i file da modificare nel vostro tema WordPress.
Dopo aver selezionato il file, è necessario aggiungere una funzione wp_nav_menu e specificare il nome del menu personalizzato.
Ad esempio, nel seguente frammento di codice, stiamo aggiungendo “Il mio menu personalizzato” all’header del tema:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
Dopo aver aggiunto il codice, fare clic sul pulsante “Aggiorna file” per salvare le modifiche.
Ora, se visitate il vostro sito, vedrete il menu personalizzato in azione.
Per impostazione predefinita, il menu appare come un semplice elenco puntato.
Il menu di navigazione personalizzato può essere adattato al tema di WordPress o al marchio dell’azienda aggiungendo un codice CSS personalizzato al sito.
Per farlo, andare su Aspetto ” Personalizza.
Nel personalizzatore del tema WordPress, fare clic su “CSS aggiuntivi”.
Si apre un piccolo editor di codice in cui è possibile digitare alcuni CSS.
Ora è possibile creare il menu utilizzando la classe CSS aggiunta al template del tema. Nel nostro esempio, questa è .custom_menu_class.
Nel codice seguente, aggiungiamo margini e padding, impostiamo il colore del testo sul nero e disponiamo le voci di menu in un layout orizzontale:
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;
}
Il personalizzato di WordPress si aggiorna automaticamente.
Ora verrà mostrato l’aspetto del menu con il nuovo stile.
Se siete soddisfatti dell’aspetto del menu, fate clic su “Pubblica” per rendere effettive le modifiche.
Per maggiori informazioni, consultate la nostra guida su come creare i menu di navigazione di WordPress.
Guide per esperti: Fare di più con i menu di navigazione di WordPress
Con WordPress è possibile creare ogni tipo di menu utile e coinvolgente. Per questo motivo, ecco alcune guide di esperti che vi aiuteranno a ottenere ancora di più dai vostri menu di navigazione:
- Come aggiungere icone di immagini ai menu di navigazione in WordPress
- Come aggiungere la logica condizionale ai menu di WordPress (passo dopo passo)
- Come aggiungere le descrizioni dei menu nei temi di WordPress
- Come aggiungere un menu responsive a schermo intero in WordPress
- Come add-onare un Mega Menu sul vostro sito WordPress (passo dopo passo)
Speriamo che questa guida definitiva vi abbia aiutato a capire come aggiungere un menu di navigazione personalizzato in WordPress. Potreste anche voler consultare le nostre guide su come add-on un pulsante nel menu dell’header di WordPress o su come evidenziare una voce di menu in WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
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