Master the new WordPress Menu System

Ғылым және технология

The way we create menus has completely changed with Full Site Editing and in this video I will take you step by step how to manage WordPress menus when using a Block Based Theme and the new Gutenberg Navigation Block.
Important note - you'll only have access to the new menu system if you are using a full site editing theme.
Sign up for my newsletter www.pootlepress.com/sign-up-t...
Email me: jamie@pootlepress.com
Our lovely Gutenberg WordPress plugins 🔥 www.pootlepress.com/wordpress...
Timeline
0:00 - Intro
0:50 - The classic menu system
1:00 - Adding an existing menu to a FSE Theme
4:00 - Creating a new Gutenberg menu
5:50 - How to add a sub menu or drop down menu to Gutenberg navigation
7:15 - How to move or remove a menu item
7:43 - How to add search to your menu
8:55 - How to add social icons to your menu
10:00 - How to add space between menu items
11:00 - How to add a phone number to your menu
11:20 - How to add your email to your menu
11:55 - How to change the text colour and background colour of your menu

Пікірлер: 127

  • @mikhail2876
    @mikhail28762 жыл бұрын

    I'll never get tired of that intro song

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    thank you - it's all my daughters work 🙏

  • @gabbyl7247

    @gabbyl7247

    2 жыл бұрын

    Me either, in fact I look forward to it!

  • @TsuiFeiCHEN

    @TsuiFeiCHEN

    2 жыл бұрын

    @@jamiewp So amazing! When I first heard about it, I figured it would be your daughter's creation... very interesting!

  • @IgnasiTort
    @IgnasiTort Жыл бұрын

    Just in case someone in Wordpress reads the comment. This new menu is so complicated that I needed to watch this very informative video to comprehend how to do things! I needed an hour to make the first menu. And I think it's due to two different issues: UI experience is poor and it is more complicated if you work in a laptop (you can not see all information together in the screen) . Thank you for this great video!

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thank you 🙏

  • @PaulVoorberg

    @PaulVoorberg

    10 ай бұрын

    Wordpress is so behind, still als clunky to use as an old Dutch bike that's just been dragged out of the canal after laying at the bottom for 3 years.

  • @spitsparrow

    @spitsparrow

    7 күн бұрын

    Its already changed and some of the methods here no longer work.

  • @faultierinderschule9543
    @faultierinderschule9543 Жыл бұрын

    Finally someone who can explain this to me, thank you. ^^;

  • @jamiewp

    @jamiewp

    Жыл бұрын

    My pleasure

  • @ilboscodellegallinevolanti7595
    @ilboscodellegallinevolanti7595 Жыл бұрын

    thank you very much for the simple and very useful video, the only one that made me understand how menu construction works. If you happen to come to northern Italy, I'll gladly offer you a good glass of Barolo

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Sounds good to me 👍

  • @agnesbury9056
    @agnesbury90562 жыл бұрын

    Thank you for the tip on how to add some space between menu items and the one about hitting Return that adds a placeholder. Super useful. And also thank you for the timeline for this video with meaningful headings.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Glad it was useful Agnes 👍

  • @user-sw1ko7kc2w
    @user-sw1ko7kc2w Жыл бұрын

    intro is FIRE

  • @chichimichael007
    @chichimichael0072 жыл бұрын

    Thank you for this, very helpful.

  • @kristinaus4634
    @kristinaus46342 жыл бұрын

    Thank you! Really appreciate your approach to teaching us all FSE. Practical tips are great - and for me the only way to learn this.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Thank you Kristin 😀

  • @florlopezpeze_
    @florlopezpeze_ Жыл бұрын

    i loved the little song!

  • @gogee8510
    @gogee8510 Жыл бұрын

    Thank you for your video. I did not realise this new menu system came in a year ago. I had trouble on a new site which I was doing with WordPress 6.1 and I thought it was a new feature; but you have explained it very well, better than any other video. Thanks again.

  • @natashajakimovska6319
    @natashajakimovska6319 Жыл бұрын

    I was struggling with days to create my new menu till today. U saved my nerves and time. Thank you!

  • @jamiewp

    @jamiewp

    Жыл бұрын

    That’s great to hear 😀

  • @PaulGillard-English-Artist
    @PaulGillard-English-Artist Жыл бұрын

    This is a very useful tutorial. Thanks Jamie!

  • @adriancuellar9384
    @adriancuellar9384 Жыл бұрын

    Many thanks friend :) Cheers from Spain!

  • @harmonicresonanceproject
    @harmonicresonanceproject Жыл бұрын

    This really is the only YT vid that explains this properly. Thanks!

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thank you 🙏

  • @rmcellig
    @rmcellig2 жыл бұрын

    Excellent and so easy and straightforward!!😀

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    thank you 🙏

  • @RonNVids
    @RonNVids Жыл бұрын

    Came back to this video to sort out a problem I was having displaying the social icons block. Thanks for all the great content!

  • @jamiewp

    @jamiewp

    Жыл бұрын

    That’s great to hear - thanks for taking the time to comment 😀

  • @mahermuhtadi
    @mahermuhtadi2 жыл бұрын

    Loved it! And the cat treat is awesome :-)

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    thanks Maher 😀

  • @susanpearson-creativefibro
    @susanpearson-creativefibro Жыл бұрын

    Thank you, I am basically searching your KZread channel instead of Google now for Gutenberg questions.

  • @jamiewp

    @jamiewp

    Жыл бұрын

    😀

  • @chris56864
    @chris568642 жыл бұрын

    Never seen a tuto video that well done. Keep it up

  • @anitalhummel3862
    @anitalhummel38622 жыл бұрын

    Wow this was great. Thank you so much. Just what I needed

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    👍

  • @amandarodriguez1752
    @amandarodriguez17522 жыл бұрын

    You have literally saved my life! Thank you so much!

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi Amanda, that's so great to hear. Thanks for letting me know 😀

  • @nataliaskalska3955
    @nataliaskalska39552 жыл бұрын

    Jamie you doing a good job BIG THANKS

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Thanks Natalia - this one took me a day to put together so that's great to hear 😀

  • @NorItu
    @NorItu Жыл бұрын

    Well explaned! Thanks

  • @JamiiCorley
    @JamiiCorley2 жыл бұрын

    Thanks for lowering my frustration level! Really nice overview. Do you know if it's possible to have the social media icons open in a new tab? I figured out how to do that for links, but not for the social icons.

  • @visualmodo
    @visualmodo2 жыл бұрын

    Truly good work!

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    thank you 🙏

  • @juangadiel
    @juangadiel Жыл бұрын

    Awesome tutorial!

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Thank you 🙏

  • @scotimages
    @scotimages6 ай бұрын

    Excellent !

  • @jamiewp

    @jamiewp

    6 ай бұрын

    Thanks Steve

  • @njvanheerden2157
    @njvanheerden21572 жыл бұрын

    Thanks Jamie.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    👍

  • @loliradotopper
    @loliradotopper2 жыл бұрын

    Thank you for choosing Bai theme. I’m a big fan .

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Yup agree, it's great!

  • @jokerdesigner
    @jokerdesigner2 жыл бұрын

    "Simply the best" by Tina Turner | SIMPLE AND THE BEST! by me

  • @PanchoMarconi
    @PanchoMarconi2 жыл бұрын

    Great!

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Thanks Francisco 😀

  • @nando6159
    @nando61597 ай бұрын

    Thanks for this great video. There are several design options available. I miss others. For example, do you see a way to insert dividers or separators in dropdown menus the easy way?

  • @spiritualhealth1318
    @spiritualhealth13182 жыл бұрын

    Hello Sir thanks for an wonderful video. Just wondering if u know how to fix Menus both in Desktop and mobile. In the desktop version it seems perfect but on mobile all my primary menu and footer menu shows together. I just can't get rid of them from mobile version. What to do??

  • @advanced-developers
    @advanced-developers Жыл бұрын

    Good video

  • @ReinerSchwope
    @ReinerSchwope2 жыл бұрын

    Thank you! Great introduction. Only one think I can't find right now. Possible you will know this. I want to change in the theme twentytwentytwo the h1-h6 headers. The basic stil is source serif pro. I want to have the system font. Where I can change this. If you know it will be very kind to help me out. Many greetings Reiner

  • @wizdude
    @wizdude2 жыл бұрын

    I’m in Australia and we have the identical cat treats but they are called “Temptations”. The artwork on the packet is identical apart from the name. Must be a licensing or name clash why they are different between our countries. Thanks for the video. New sub here and enjoying your Gutenberg content. Cheers!

  • @jamiewp

    @jamiewp

    Жыл бұрын

    thank you - i lived in oz for a while :)

  • @JulieWolf
    @JulieWolf2 жыл бұрын

    Very easy to follow. Thanks for the time links in description. Wow wp menu's sure are different now. I liked and sub'd - I hope your cat doesn't get too fat! I predict lots of Likes! good work.

  • @hamidlatrache1450
    @hamidlatrache1450 Жыл бұрын

    Thanks boss

  • @jamiewp

    @jamiewp

    Жыл бұрын

    👍

  • @ViktorChuprin
    @ViktorChuprin2 жыл бұрын

    Can't wait WP 5.9 to be released!

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Me too!

  • @KaiBuskirk
    @KaiBuskirk2 жыл бұрын

    New Sub! You Rock!

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Great and thanks 🙏

  • @peterbradney9159
    @peterbradney91592 жыл бұрын

    Does the drop down menu work well with responsive mobile situations

  • @francisfarinacci3395
    @francisfarinacci33952 жыл бұрын

    Hi Jamie, I'm in Boston, MA, since half way through this intro great video of how to add a Creating a New Menu. I notice my plus '+' symbol is on the Right side of the Navigation Block. A few questions: 1. How to switch the plus '+' symbol from Right to Left? Or is part of WordPress? 2. I notice that your menu items are not setup to be linked, on mine, I can see that my menu items under the List View are already linked to the page. Does this mean all pages are linked together? 3. Regarding Site Title. Widgets are not shown in my Dashboard. How do I add a Site Title within the Navigation Bar? Thanks for all your great videos! Francis

  • @alixnotes
    @alixnotes2 жыл бұрын

    Great video and thanks. I notice that the spacer block changes from width to height. In the nav block its width but put anywhere else it height. Any ideas why? Or how to choose between either width or height?

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi, i would need to dig a little deeper, but i think it only is available as a width option in the Navigation Block. I agree it might be nice in some situations to be able to choose.

  • @theoneandonlyzulu3342
    @theoneandonlyzulu33422 жыл бұрын

    Great explanation on the state of this block. Though it does have me worried that this is the direction WordPress are going in, if this is taking over from "classic" navigation, it's got a long way to go. At the moment it feels very flimsy, almost like I'm hacking the theme, or I'm using something that was built as a poc for a tech demo and not something that was ready for core.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Yup i agree the navigation block needs some work (but that is happening)

  • @lawrencejorgers
    @lawrencejorgers2 жыл бұрын

    Thank you, very nice video! One question: can we have a always visible navigation block?

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi , do you mean a sticky menu ?

  • @spitsparrow
    @spitsparrow7 күн бұрын

    I think the custom links doesnt work this way anymore. I want to be able to add a naked heading (is that what its called) just a title called Products. i have no actual products page but i have 4 pages that are all my different products. I need just a heading that will then drop down to 4 pages as submenus. I havent found any examples of people achieving this with the FSE yet.

  • @elfonzo4298
    @elfonzo4298 Жыл бұрын

    Hi, exellent tips, but how i can put flags from translatepress plugin to main menu?

  • @22271748
    @222717483 ай бұрын

    That sounds good... but it didn't work for me! The first stages, I did not find some of the things you pointed to and I loaded Gutenberg plugin.

  • @navnathsalunke1986
    @navnathsalunke1986 Жыл бұрын

    How to create horizontal scoreble menu to nevigation block Gutenberg help me please

  • @ixxgxx
    @ixxgxx Жыл бұрын

    How do you change the sub menu flow direction. As of now, its just flowing to the right, I dont want to go into the JavaScript...

  • @letsgobrandonpodcast
    @letsgobrandonpodcast2 жыл бұрын

    not bad, but how to i get it to add a category, then that category to spit out and show all the pages within that category as links, rather than just going to the big category page?

  • @Guitar4C
    @Guitar4C2 жыл бұрын

    Great! In the skeleton approach, you showed how to make Home the page that opens when a person first enters the site. Can you tell me how that is done now?

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi Carl - its just the same in full site editing - no change 😀

  • @brianhardaway5469
    @brianhardaway54692 жыл бұрын

    Thank you for such a well presented site. I am using Tove theme but my navigation menu is showing vertically and I cannot find a layout option to convert it to horizontal. Do I need an additional plug-in?

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi Brian - there is an option to display the navigation menu vertically so i think you may have selected that by mistake. Here's where you can find the setting www.pootlepress.com/wp-content/uploads/2022/03/screely-1648650901259.png

  • @brianhardaway5469

    @brianhardaway5469

    2 жыл бұрын

    @@jamiewp Thanks for such a prompt reply. I started over again and the problem 'disappeared', so I guess it was a case of Murphy's Law. I'm pretty good with that!

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    @@brianhardaway5469 Good to hear - turn it off and on again also works for me 😀

  • @mostafizurrahman5648
    @mostafizurrahman56482 жыл бұрын

    Hey, I am a beginner in web development field I have some questions for you. Will WordPress Gutenberg block editing decrease the demand of WordPress custom theme developer and should I learn WordPress Gutenberg block development as beginner?

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi, nope there will still be a great demand for custom theme development - it will grow in my view with FSE!

  • @TheViewsGH
    @TheViewsGH Жыл бұрын

    second Error (array_unique() expects parameter 1 to be array, null given in C:\xampp\htdocs\Csuc_Wp\wp-includes\blocks avigation.php on line 354)

  • @_batia_es
    @_batia_es Жыл бұрын

    Thanx, this is very helpful, but how to add link for Post Archive or CPT Archive Page? Only by custom link?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    That would certainly work

  • @TheViewsGH
    @TheViewsGH Жыл бұрын

    Error i got after i watch ur video to create menu in wordpress 6.1 (array_merge() expects at least 1 parameter, 0 given in C:\xampp\htdocs\Csuc_Wp\wp-includes\blocks avigation.php on line 354) any help

  • @zaldygadiana7973
    @zaldygadiana79732 жыл бұрын

    What plugin do you recommend to create mega menu with Gutenberg? Thank you..

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi, there isn't one yet, but I'm sure it won't be long - it will probably be possible without a plugin in the future 😀

  • @richmaniow
    @richmaniow2 жыл бұрын

    Very useful Jamie, just wondering is the menu page still separate from the content editing or can you go on to add page content below the menu you created, if that makes sense.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi Richard, yes it's separate , which makes sense for me

  • @richmaniow

    @richmaniow

    2 жыл бұрын

    @@jamiewp Cheers, another quick question, can you add a header image above the menu bar i.e position the menu where you like on the content page or is it always fixed to the top of the page, thanks again.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    @@richmaniow hi Richard, if i understand correctly then yes, you can move it anywhere

  • @DaveOnWP

    @DaveOnWP

    2 жыл бұрын

    HI Richard. When you are within the Site Editor you can edit any Navigation block (i.e. "menu") that you see there. In this video Jamie shows editing by switching to the Header template but in general we've moved away from having a dedicated "Menus" page in favour of the direct site editing enabled by Full Site Editing. The idea is that whatever you see in the site editor should match what you (and your site visitors!) see on the front of your website.

  • @richmaniow

    @richmaniow

    2 жыл бұрын

    @@DaveOnWP cheers Dave, that's good news, always found having to edit the menu separately a bit clunky..

  • @koodikoodi1040
    @koodikoodi1040 Жыл бұрын

    It doesn't seem possible to add a submenu which is not a page link. Disappointing. Even in the old menu system it was "hacky" to achieve that. EDIT: I figured out how to "unlink" the submenu block. This removes the value from the href attribute which means the block remains a clickable link which acts like a refresh button. This is undesirable. Instead the href attribute should be removed altogether. Can you please fix this?

  • @AnneGoggansQHHT
    @AnneGoggansQHHT2 жыл бұрын

    Imagine I’ve been fighting with this system for a couple of days before finding this and my site is a cluster&uck….a couple of days later, it was some glitches. Had to uninstall and reinstall plug-ins.

  • @timostv
    @timostv Жыл бұрын

    Hello, I remember seeing a plugin you used in one of your videos that puts a line around blocks. What is that plugin name please?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    It’s called Block Outline

  • @Patitpavan108
    @Patitpavan108 Жыл бұрын

    How to make the Navigation menu full width?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    If you group it, then you should see the full width option

  • @DeborahChapin
    @DeborahChapin Жыл бұрын

    The problem I’m having is that I don’t even see the template at the beginning I can’t I click on the thing there’s nothing there. I can’t edit my classic menu and other than creating a new header and doing it the old-fashioned way by hand I don’t see the templates so I can’t go into the header except through my old Theme menu which is all I have I don’t have a theme. So is there another way to enter the templates so that I can access this header for a new menu?

  • @jamiewp

    @jamiewp

    Жыл бұрын

    Are you using a block theme ?

  • @DeborahChapin

    @DeborahChapin

    Жыл бұрын

    No I’m not using a theme technically. Just a menu from a theme. I used to use beaver builder but they weren’t servicing the theme so I got off the theme merry go round.

  • @DeborahChapin

    @DeborahChapin

    Жыл бұрын

    Is there a way just do use the blocks without a theme?

  • @artgo8305
    @artgo83052 жыл бұрын

    there is no option for me to click on edit site.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    It sounds like you are not using a block theme

  • @faizrehman7937
    @faizrehman79372 жыл бұрын

    When I try to edit the menu it says, "You do not have permission to create navigation menues".

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    hmm not sure what that is - what theme are you using?

  • @faizrehman7937

    @faizrehman7937

    2 жыл бұрын

    @@jamiewp I installed the TT1 theme & the Gutenberg plugin. All the templates with the new interface are showing correctly but it doesn't allow me to edit anything.

  • @ayandeep7598
    @ayandeep75982 жыл бұрын

    Where from you have appeared on the fast screen ? I mean the menu system. This is not clear.

  • @jamiewp

    @jamiewp

    2 жыл бұрын

    Hi , sorry which screen?

  • @rrmatt4660
    @rrmatt4660 Жыл бұрын

    Darn, I thought you were going to cover vertical spacing between sub-menu items :(

  • @jamiewp

    @jamiewp

    Жыл бұрын

    What theme are you using ??

  • @xiaofha
    @xiaofha2 жыл бұрын

    Hi Jamie! I'm having a little trouble. At 2:06 you mention clicking on the W to see more options. When I click on it, it just goes back to the Dashboard. I'm trying to edit the appearance of my menu items. Any idea what's going on? Thank you!

  • @xiaofha

    @xiaofha

    2 жыл бұрын

    Ha! I figured out how to change the existing menu items. It’s under color on the customize page.

  • @troysweb
    @troysweb2 жыл бұрын

    Another example where minimalism makes things harder vs easier...

  • @dinorossi6611
    @dinorossi66112 жыл бұрын

    Great video. Did you gain a bit of weight?

Келесі