På WPBeginner har vi hjälpt otaliga läsare att anpassa sina WordPress-webbplatser för att förbättra användarupplevelsen, öka varumärkesprofileringen och driva konverteringar. Och vi har sett att när det görs på rätt sätt kan en unik navigeringsmeny bidra till att öka engagemanget och hålla människor kvar på din webbplats längre.
Problemet är att alla WordPress-teman har fastställda platser där du kan visa en navigeringsmeny, så det kan vara svårt att ändra detta. Detta gäller särskilt om du är nybörjare eftersom det är en känslig process att ändra temafiler.
När du använder ett blocktema kan du göra detta med Full Site Editor. Men enligt vår erfarenhet finns det bättre alternativ som fungerar för alla typer av teman.
Om du till exempel vill ha avancerade anpassningar kan du använda en kraftfull sidbyggare som SeedProd. Eller om du letar efter ett enkelt sätt att använda anpassad kod är WPCode det överlägset bästa valet.
I den här artikeln visar vi dig hur du lägger till en anpassad navigeringsmeny till valfritt område i ditt WordPress-tema. Vi går igenom 3 olika alternativ så att du kan välja den handledning som passar bäst för dina behov.
Varför lägga till Custom Navigation Menus i WordPress Themes?
En navigation menu är en lista med länkar som pekar på viktiga areas på din website. De gör det enkelt för besökarna att hitta intressant content, vilket kan öka antalet sidvisningar och minska studsfrekvensen i WordPress.
Den exakta positionen för din menu varierar beroende på ditt WordPress theme. De flesta teman har flera alternativ, så att you kan skapa olika menyer och visa dem på olika locations.
För att se var du kan visa menyer i din nuvarande WordPress Theme, bara heada till Appearance ” Menus och sedan ta en titt på ”Display location” section.
I följande image visas de locations som stöds av temat Astra WordPress.
Ibland kanske du vill visa en menu i ett area som inte är listat som en ”Display location” i your theme.
Med detta i åtanke, låt oss ta en titt på hur du addar en custom navigation menu till valfritt area i ditt WordPress theme. Använd bara snabblänkarna under för att hoppa till den metod du föredrar:
Metod 1: Använda hela Site Editor (endast block-baserade teman)
Om du använder ett blocktema som ThemeIsle Hestia Pro kan du add to en custom navigationsmeny med hjälp av Full Site Editing (Redigering av hela webbplatsen) och block editor.
För mer detaljer, kan du se vår artikel om de bästa WordPress teman för full Site Editing.
Den här metoden fungerar inte med alla teman, och den låter dig inte customize alla delar av menyn. Om du vill add to en helt custom menu till ett WordPress-tema rekommenderar vi att du använder ett page builder plugin istället.
Om du använder ett blockbaserat theme, headar du till Appearance ” Editor.
Som standard visar hela Site Editor ditt temas hemmamall, men du kan add a navigation menu to any area.
För att se alla tillgängliga alternativ, välj bara antingen ”Templates”, ”Patterns” eller ”Pages”.
Du kan nu clicka på den template, template part eller page där du vill add to en custom navigation menu.
WordPress kommer nu att visa en förhandsgranskning av designen. För att redigera denna mall klickar du på den lilla pennikonen.
Nästa steg är att lägga till ett Navigation-block i det area där you vill visa din menu.
Klicka på den blå knappen ”+” högst upp i vänstra hörnet.
Gå nu vidare och skriv ”Navigation” i sökfältet.
När blocket ”Navigation” appear, simply drag and drop it onto your layout.
Klicka sedan på för att selecta blocket Navigation.
Om du redan har skapat den meny som du vill visa klickar du på för att selecta blocket Navigation. I menyn till höger klickar du på den treprickiga ikonen bredvid ”Menu”.
Du kan sedan välja en menu från dropdown.
Ett annat alternativ är att bygga en meny i Site Editor genom att lägga till pages, posts, custom links med mera. För att lägga till objekt i den nya menyn klickar du bara på ikonen ”+”.
Detta öppnar en popup där du kan add to en post eller page och bestämma om dessa links ska öppnas i en new tab.
Du kan också lägga till ett search-fält i WordPress-menyn, lägga till icons för social media och mycket mer. I popupen skriver du bara in det block som du vill add to menyn och väljer rätt alternativ när det visas.
Du kan sedan konfigurera blocket med hjälp av Settings i miniverktygfältet och i menyn till höger. Upprepa bara dessa steg för att add to fler items till menyn.
När du är nöjd med hur menyn ser ut klickar du bara på knappen ”Save”.
Din site kommer nu att använda den nya templates och visitors kan interagera med din custom navigation menu.
Metod 2: Använda ett Page Builder-tillägg (fungerar med alla teman)
Den fullständiga Site Editor tillåter dig att add menyer till blockbaserade themes. Om du vill add to en avancerad, helt anpassningsbar menu till ett WordPress theme behöver du dock ett page builder plugin.
SeedProd är det bästa WordPress sidbyggarpluginet på marknaden som gör att du kan anpassa varje del av din navigationsmeny.
Vi har lång erfarenhet av att använda detta verktyg för att bygga anpassade navigeringsmenyer, målsidor och mycket mer. För mer information, kolla in vår fullständiga SeedProd-recension.
När det gäller sidor kommer SeedProd med över 350 professionellt utformade mallar som du kan använda som utgångspunkt. När du har valt en mall kan du lägga till en anpassad navigeringsmeny på din webbplats med hjälp av SeedProds färdiga Nav Menu-block.
Först måste du installera och aktivera SeedProd-pluginet. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.
Obs: Det finns också en gratis version av SeedProd som låter dig skapa anpassade navigeringsmenyer utan att skriva kod. I den här guiden kommer vi dock att använda SeedProd Pro eftersom det har Nav Menu-blocket, plus extra mallar och avancerade funktioner.
Efter att ha aktiverat pluginet kommer SeedProd att be om din license key.
You can find this information in your account on the SeedProd website. När du har enter nyckeln klickar du på knappen ”Verify Key”.
När du har gjort det, gå till SeedProd ” Landing Pages och klicka på knappen ’Add New Landing Page’.
Du kan nu välja en template för din custom page.
För att hjälpa dig att hitta rätt design är alla SeedProds templates organiserade i olika kampanjtyper, till exempel coming soon och lead squeeze-kampanjer. Du kan även använda SeedProds templates för att förbättra din 404 page.
Om du vill titta närmare på en design håller du bara muspekaren över templaten och klickar sedan på ikonen med förstoringsglaset.
När du hittar en design som du vill använda klickar du på ”Choose This Template”.
Vi använder mallen ”Black Friday Sales Page” i alla våra images, men du kan använda vilken template du vill.
Efter att du har valt en template, skriv in ett namn för den customize page. SeedProd kommer automatiskt att skapa en URL baserat på sidans rubrik, men du kan ändra denna URL till vad du vill.
Du kan t.ex. add to relevanta keywords för att hjälpa search engines att förstå vad sidan handlar om. Detta kan förbättra din sökmotorsoptimering för WordPress och hjälpa search engine att visa sidan för personer som letar efter content som gillar your.
När du har enter denna information klickar du på knappen ”Save and Start Editing the Page”.
De flesta templates innehåller redan några block, som är core komponenterna i all SeedProd page layouts.
För att customize ett block klickar du bara för att selecta det i page editor.
I den vänstra toolbaren visas nu alla Settings för det blocket. I bilden under ändrar vi till exempel texten i ett block med rubriken ”Headline”.
Du kan formatera texten, ändra justering, add to links med mera med hjälp av inställningarna i menyn till vänster.
Om du väljer tabben ”Advanced” får du tillgång till ännu fler Settings. Du kan till exempel göra så att blocket verkligen sticker ut genom att lägga till boxskuggor och CSS-animationer.
Om du vill add new block till din design hittar du ett block i menyn till vänster och drar det sedan till sidan. Om du vill ta bort ett block klickar du på det för att selecta blocket och använder sedan ikonen för papperskorgen.
Eftersom vi vill skapa en custom navigation menu, dra ett ”Nav Menu” block på sidan.
Detta skapar en navigation menu med ett enda standard ”About” objekt.
Du kan nu antingen skapa en new menu i SeedProd Editor eller välja en menu som du redan har skapat i WordPress dashpanelen.
Om du vill visa en meny som du har skapat tidigare klickar du på knappen ”WordPress Menu”. Du kan nu öppna dropdown-menyn ”Menus” och välja valfritt alternativ från listan.
Därefter kan du ändra storlek på font, textjustering med mera med hjälp av inställningarna i menyn till vänster.
Om du vill bygga en new menu i SeedProd istället, välj då knappen ”Simple”.
Klicka sedan för att förstora objektet ”Om” som SeedProd skapar som standard.
Detta öppnar några kontroller där du kan ändra texten och add to URL:en som menu-item kommer att länka till.
Som standard kommer länken att vara ”dofollow” och öppnas i samma fönster i webbläsaren. Du kan ändra dessa Settings med hjälp av checkboxarna i ”URL Link” section.
I följande image skapar vi en ”nofollow”-länk som öppnas i ett nytt fönster. Mer information om detta ämne finns vänligen i vår guide för nybörjare om nofollow-länkar.
För att add to fler objekt till menyn, clickar du bara på knappen ”Add New Item”.
Du kan sedan customize vart och ett av dessa objekt genom att följa samma process som beskrivs ovan.
I menyn till vänster finns också Settings för att ändra storlek på font och justering av text.
Du kan även skapa en avdelare, som kommer att visas mellan varje objekt i menyn.
Därefter går du vidare och byter till tabben ”Avancerat”. Här kan du ändra menyns färger, avstånd, typografi och andra avancerade alternativ.
När du gör ändringar uppdateras live preview automatiskt, så att du kan prova olika settings för att se vad som ser bra ut i din design.
Som standard visar SeedProd samma meny på mobila och stationära enheter. Mobila enheter har dock vanligtvis mycket mindre vyer jämfört med stationära datorer.
Med det i åtanke kanske du vill skapa en separat meny som ska visas på mobila enheter. Du kan till exempel använda en vertikal layout så att mobila användare inte behöver rulla i sidled. Du kanske också vill visa färre links på smartphones och surfplattor.
För att skapa en mobilanpassad meny designar du bara menyn genom att följa samma process som beskrivs ovan. Välj sedan tabben ”Advanced” och click för att förstora sectionen ”Device Visibility”.
Du kan nu växla mellan reglaget ”Dölj på skrivbordet”.
Nu kommer SeedProd endast att visa denna meny för mobila användare.
När you är nöjd med hur din customize menu ser ut är det dags att publicera den.
Klicka bara på dropdown-pilen bredvid ”Save” och välj sedan ”Publicera”.
Om du nu besöker din WordPress-blogg kommer du att se den anpassade navigeringsmenyn i aktion.
Metod 3: Skapa en customize navigation menu i WordPress med hjälp av kod (avancerad)
Om du inte vill konfigurera ett plugin för sidbyggare kan du lägga till en anpassad navigeringsmeny med hjälp av kod. Du hittar ofta guider med instruktioner om hur du lägger till anpassade kodsnuttar i ditt temas functions.php-fil.
Vi rekommenderar dock inte denna metod, eftersom även ett litet misstag i din kod kan orsaka ett antal vanliga WordPress-fel eller till och med förstöra din webbplats helt. Du kommer också att förlora den anpassade koden när du uppdaterar ditt WordPress-tema.
Det är därför vi rekommenderar att du använder WPCode. Det är det enklaste och säkraste sättet att add to custom code i WordPress utan att behöva edit några core WordPress-filer.
Observera: Det finns massor av olika sätt som du kan använda WPCode för att på ett säkert sätt anpassa din WordPress-webbplats. Det har ett inbyggt bibliotek med kodsnuttar och stöder alla de viktigaste WordPress-språken, inklusive PHP, JavaScript, CSS och HTML. För mer information om pluginet, kolla in vår fullständiga WPCode-recension.
Det första du behöver göra är att installera och aktivera det gratis pluginet WPCode. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.
Efter aktivering, gå till Code Snippets ” Add Snippet i din WordPress dashpanel.
Here, you’ll see all the ready-made snippets that you can add to your site. These include a snippet that allow you to completely disable comments, upload file types that WordPress does not usually support, disable attachment pages, and much more.
För att skapa ditt eget snippet, hovera musen över ”Add Your Custom Code” och klicka sedan på ”Use snippet”.
Börja med att enter en titel för det custom code snippet. Detta kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard.
Därefter öppnar du dropdown ’Code Type’ och väljer ’PHP Snippet’.
När du har gjort det klistrar du bara in följande snippet i code snippets editor:
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
Detta kommer att add a new menu location to your theme anroped ’My Custom Menu’. För att använda ett annat namn, tweakar du bara code snippet.
Om du vill lägga till mer än en custom navigation menu till ditt theme, lägg då bara till en extra rad i code snippet.
Här lägger vi till exempel till två nya menyplatser i vårt tema, som heter ”My Custom Menu” och ”Extra Menu:
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' );
Därefter bläddrar du till alternativen ”Insertion”. Om det inte redan är valt väljer du metoden ”Auto Insert” så att WPCode lägger till snippet på hela din webbplats.
Därefter öppnar du dropdown ’Location’ och klickar på ’Run Everywhere’.
Sedan är du redo att rulla högst upp på vyn och klicka på ”Inaktiverad” toggle så att den ändras till ”Aktiv”.
Slutligen, gå vidare och klicka på ”Save” för att göra detta snippet live.
Därefter går du till Appearance ” Menus och tittar på området ”Display location”.
Du bör nu se ett nytt alternativ ”My Custom Menu”.
Du kan nu gå vidare och lägga till några menu items på den nya location. För mer information, vänligen se vår Step-by-Step guide om hur man lägger till navigation menyer för nybörjare.
När du är nöjd med din menu är nästa steg att lägga till den i ditt WordPress theme.
På de flesta websites visas navigation menu direkt under header section. Det innebär att menyn är en av de första sakerna som besökarna ser, tillsammans med site logon eller rubriken.
Du kan add to den anpassade navigation menu till vilken location som helst genom att lägga till lite kod till ditt temas template-fil.
I din WordPress dashboard, gå till Appearance ” Theme File Editor.
I menyn till höger väljer du den mall där du vill lägga till menyn. Om du t.ex. vill visa den anpassade navigeringsmenyn i webbplatsens sidhuvud väljer du vanligtvis filen header.php.
För hjälp med att hitta rätt template-fil, vänligen se vår guide om hur du hittar vilka filer som ska editeras i ditt WordPress theme.
När du har valt filen måste du lägga till en wp_nav_menu-funktion
och ange namnet på din anpassade meny.
I följande kodavsnitt lägger vi till exempel till ”My Custom Menu” i temats header:
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );
När du har lagt till koden klickar du på knappen ”Update File” för att save your changes.
Nu, om du besöker din site, så kommer du att se den customize menyn i action.
Som standard kommer din menu att visas som en vanlig punktlista.
Du kan utforma den anpassade navigation menyn för att bättre matcha ditt WordPress tema eller företagets varumärke genom att lägga till custom CSS-kod på din site.
För att göra detta, gå till Appearance ” Customize.
I WordPress theme customize, klicka på ”Additional CSS”.
Detta öppnar en liten code type editor där du kan skriva in lite CSS.
Du kan nu utforma din meny med hjälp av den CSS-klass som du lade till i temamallen. I vårt exempel är detta .custom_menu_class
.
I Följer lägger vi till marginaler och padding, ställer in textfärgen till svart och ordnar menu-items i en horisontell layout:
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;
}
WordPress Customizer kommer att uppdateras automatiskt.
Den visar nu hur menyn kommer att se ut med den nya stilen.
Om du är nöjd med hur menyn ser ut klickar du på ”Publicera” för att göra dina ändringar.
För mer information, vänligen se vår guide om hur du stylar WordPress navigations menyer.
Expertguider: Gör mer med navigeringsmenyer i WordPress
Med WordPress kan du skapa alla typer av användbara och engagerande menyer. Med detta i åtanke kommer här några expertguider som hjälper dig att få ut ännu mer av dina navigeringsmenyer:
- Så här lägger du till Imagely-ikoner med navigeringsmenyer i WordPress
- Så här lägger du till villkorlig logik i menyer i WordPress (steg för steg)
- Så här lägger du till menybeskrivningar i dina WordPress-teman
- Så här lägger du till en responsiv meny i fullskärm i WordPress
- Så här lägger du till en megameny på din WordPress-webbplats (steg för steg)
Vi hoppas att den här ultimata guiden hjälpte dig att lära dig hur du lägger till en anpassad navigeringsmeny i WordPress. Du kanske också vill se våra guider om hur du lägger till en knapp i din rubrikmeny i WordPress eller hur du markerar ett menyalternativ i WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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?
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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.
Administratör
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
Administratör
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 <<
Administratör
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.
Administratör
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.
Administratör
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