Haven't done a website since about 2008. This is definitely a big life saver for me. Going through it right now as i try the 2022 theme. I love the block formatting they're doing it makes things a lot easier without having to relearn HTML and CSS again.
Gregg, this was ENORMOUSLY helpful! Thank you for taking the time to create this walk-through. I set up several WP sites years ago and haven't had to do much with them until recently, and I wasn't having a lot of luck with customizing 2020 themes, so decided to give 2022 a whirl. I was so frustrated trying to figure out what was what until I watched your tutorial - there is almost no documentation out there that is intelligible to ordinary people. And I'm glad the whole making the title go away on a page thing wasn't just me. 😂 Now I feel a whole lot more confident as I build my new site. You're a rock star, truly.
Thanks Lori! I appreciate so much that you took the time to write this...I hope to be able to provide more of these on this channel, I'm just starting out on it!
I feel the same way! I'm not stupid --I've created and maintained several sites in the past but this was such a challenge. Until I came across your tutorial. There is NOTHING else that explains any of this. Kudos - I wish I could put you on my keychain! PS A lot has changed since you create this video but it's not hard to figure out what and where. Thank you so much!
Thank you so much. I've just started reacquainting myself with WordPress after a number of years. Your tutorial is the best I've come across so far in terms of clarity and breadth of information. Keep up the good work👍👍👍
This was SO HELPFUL! Thank you so much for digging in where other folks are flying over. I especially appreciate that you left in the unexpected bits and unwelcome surprises, because they're things I would've done and where I would've looked, and now I've seen what to do instead 👍🏾😊
Thank you Gregg for this amazing tutorial on making a new WordPress website by editor beta. I had some confusion about making pages but now I understand to make pages with different other options. I like the way you told everything about a blog.
Thank you Gregg, After downloading WP 5.9.3, I wasn't aware that I would have to install/activate the Guttenberg plugin. I had assumed that the feature set was intrinsic to these later versions. I wonder what other tibits that I'm not aware of might be lurking out there? I say this with hand on heart, this is informative and robust, however is it possible to reduce the length and the verbosity? Perhaps a version of this video that assumes more with WP?
Sure Elliot, thanks for the suggestion. I'm going to be creating more videos, and certainly shorter ones that make their point in less time. Gutenberg is no longer required to be activated to use Twenty Twenty-two or other block themes since WordPress 6.0, but it does give you more options while editing and creating content on your site. Gregg
After watching your video I have created a full series tutorial regarding full site editing. I hope you will like it. Feel free to share your feedback and comments. And thanks again for this early video.
Hello - Absolutely wonderful video covering the exciting features of WP 5.9! and the theme 2022. just had to hit the Subscribe button! Thanks a ton! !😳♥
Many thanks for this great video and your channel🔥🎉🙏👍❤ Awesome to see your video - it helps the worldwide community: Appreciate all the efforts you put in to make this awesome tutorial. - keep up your great work - i look forward to see more. btw: - would love to see more vids covering WP 6.1
Hi Linda, Yes, WooCommerce will actually work with almost any theme, and Twenty Twenty-Two is on-board also. However, there aren't any "specially-designed" WooCommerce pages like cart and checkout customizations, so you'll end up with the default WooCommerce layouts for those pages. They will work great, but you don't have as many options for changing the design as with Divi or Kadence, for example.
I'm just learning full site editing. I followed you up until the "About" page. The featured image isn't working. I googled it and found a ton of complaints about this. It's a bug in the theme. I don't know how you were able to do it successfully.
Trying to decide which FSE theme I should use...I'm thinking it doesn't matter much since I know how to customize things? Would 2022 be coded best? Should I choose one that has the fonts I want so I don't have to upload fonts? I notice there are only 2 in the wordpress repository that have "accessibility ready" but why isn't 2022 there? I'm guessing many of them are accessibility ready but didn't think of listing that as one of their features?
Hey! I might suggest trying Twenty Twenty-three now that it's out - it's just like 2022 but has a bunch of sty;e variations that can save you time and give you ideas. Plus I think it's accessible also.
This was excellent. Learned so much creating this project with you. Have 3 questions: 1. Guttenberg plugin did not come with my new installation. 2022 seems to work well without it. Do I need to install this plugin; 2. Never saw or missed how you got HOME to appear in the navigation and 3. Can menu items be rearranged? Thank you!
Hi L, thanks! Those are good questions. 1. No, Gutenberg plugin is not required to be installed and activated to power Twenty Twenty-Two. It may add some extra block-based features if you use it, and it will not "break" the theme or your site - it just adds the most recent additions to WordPress blocks in the editor before they are available in the WP core versions. Block-based themes used to require Gutenberg before WP 5.9 was released, because the Site Editor and other Full Site Editing features weren't yet available in WP core - but as of 5.9 and later, they are, so Gutenberg isn't required. 2. You can add Home to a navigation menu in two ways: when you are editing the Navigation Block (highlighted in the list view), you can add another Navigation item by clicking the plus icon in the editing window - then you can either choose Home with a search or from the list, or usr a custom link, and paste the home URL, labeling it Home manually as a custom link. 3. Yes, there are two ways to rearrange menu items, one is to open the list view and drag the items into a different order there, or you can use the left-right arrows in the block toolbar, when one of the menu items is selected, to switch it with the other items to the left or the right. --Gregg
Hi Emmanuel - it's Gregg actually...Great question! Twenty Twenty-Two doesn't have a sidebar in the traditional sense, which used to be set using Widgets. The Twenty Twenty-Two theme doesn't have a sidebar in the "index" template either, which displays a list of posts. So, you could create a new template with a sidebar and use it on the Blog archive pages, as you mentioned, or if you wanted a sidebar on the entire site you could add one to the Page template that's used site-wide. You could even create a Template Part which is a sidebar, and use it inside any template you choose.
@@LeverageWP Thank you so much Gregg. Kind of you to reply. What you mentioned is what I suspected. So you have to use block on that Page with some css or some css? Any reference link on how to do it?
Hi Manny, you don't have to use any code or CSS - you could create a Template Part, in the Site Editor, by adding it using the Add New button at the top right under Template Parts. Then you can customize it by adding blocks or block patterns and save. Next, Open the index Template in the Site Editor, and click the plus at the top left, and search template in the search bar and click Template Part, which will bring in a Template Part block to the layout. You can choose your new Sidebar template part by clicking the blue button in the block, and then arrange it in a column by adding a columns block and designing the layout in the index template. Save the index template when you're done and when you use that template on any page (like a blog Posts page, or the homepage), then it will display your sidebar. Another way which might be easier would be to create a new Template from a Page Editing screen (at the right under Templates) and use a sidebar layout block pattern - there's some under Patterns > Pages, which include blog posts and a sidebar. I'll create more tutorials for this soon.
I’ve noticed the blog posts on this theme don’t have share buttons so people can share blog posts. Surely that would affect traffic? How would you go about adding share buttons at the bottom of blog posts, possibly with showing the number of times it’s been shared via Facebook/Pinterest etc? Sorry if this has been covered in your video I’m only 12 minutes in
Thanks for this lesson, exactly what I needed. I started adding a couple of page templates. But . . . do you know what will happen if an update for the theme is executed? Will your custom made templates survive the update? Or do we have to consider tricks and magic with child themes, if even possible with custom templates.
Hi Trader, thanks for your question, it's a good one. A theme update will not overwrite customized or custom created templates in a block-based theme. The template changes and custom templates added to a particular WordPress installation are stored in the database, and no new files are created when you add a new template or template part. So, there's actually no need for a child theme or other "magic" tricks to fully customize a site using a block-based theme and full site editing.
Hey, thanks for your comment! I'm using Camtasia from Techsmith. It's a great screen-capture and editing program. One of the thing I like about it is that you can capture the webcam video at the same time, then use it to create that corner headshot while the screen-capture footage stays synced to the audio and video.
Hello. I've been following along and really appreciate this guide. Just what I had been looking for. I've been working on a site, was able to build pages and create a navigation menu with drop-downs and I believe I saved it in the templates. But I want to remove a redundant drop-down link and can't find the template. Is there a way to identify which header template is being used for all of the pages? Same thing for the footer. The site looks proper, but when I look at all of the footer templates, I don't see the one that I had modified... unless I did it in another part of WP? Thanks.
I decided to just edit the page (again). Changed the header; changed the footer and they took for all of the pages. But I cannot find where it is being saved so that I can make additional changes. If I just choose to edit the page, the nav menu flattens out, and most of the content of the footer disappears. I'm not getting it. If I look at all of the headers and footer in template parts... no help there. Looks like it came out of the box with site title and pages spelled out horizontally.
Hi Carl, you've likely edited the navigation in a Template Part - you can find which template a given page is using, and then which template part is being used as the header with the nav menu, like this: Open the Page in the WP dashboard, and look at the Template dropdown on the right, to see which template is being used to display the content. Go back to Appearance > Editor and click the "W" at the top left to open the editor menu, and click Templates and then the Template Title to open the editor. Click the dropdown at the top middle, and you'll see the template parts that are being used, and you can edit here or click to the Template Parts screen and edit there. --Gregg
Hi Alec, thanks it's a good question. The 2022 theme, and others that are using Full Site Editing, are not yet ready for production sites, as far as having all the features and options available to other themes and page builders. FSE has just been released at version 5.9 of WordPress last month (Feb 2022), and will keep getting better, but there are only a handful of themes available right now, and they don't compare with other block-based themes available, or with page builders as far as available options or features. So, for right now, this is more experimental, and represents the future of WordPress themes, but more developed themes and block plugins are the way to go, OR page builders like Divi. I recommend Kadence theme and Kadence Blocks plugin, or Divi Theme and Visual Builder, as far as the most robust ways of building WordPress websites right now.
How do I add additional CSS. I added the Contact Form 7 plugin and theres no css on the plugin. I tried just adding css in the editor for the theme and it doesnt do anything.
Hi Jason, I would suggest using a CSS plugin now that block themes don't provide easy access to the Customizer and the Additional CSS area in WordPress. Simple Custom CSS is a great one. Gregg
Hi Lionel, it's Gregg - yes, you are correct, Gutenberg is no longer required to make the Site Editor work with a block-based FSE theme, because that functionality is now included with WordPress core 5.9 and later. However, running Gutenberg does give you some more advanced blocks and design capability, as it adds the newest features that aren't yet merged into core.
I will add as well, what about just a new blank template and not a "Front Page Template". It's truly incredible to me that you can't do that, even in a beta. We are also unable to cleanly access the Customizer (you still can, but you have to type in the path to the php file in your browser). FSE, as far as I'm concerned, is still in Alpha, and frankly, the Twenty Twenty-Two theme should not have been released until FSE was more thoroughly user-tested. Twenty Eighteen was skipped, so it's not like theres no precedent for such a decision. It's just extremely disappointing to have a mostly functional editor that is missing the most fundamental of features (adding blank templates, duplicating templates, and cleanly accessing Customizer features like site-wide Additional CSS).
Final gripe: imagine the user experience as a new or aspiring site admin or WP developer. You are presented with block editing and a new template with a default FSE activation (albeit, one with severely limited functionality). You assume this is "the way of doing things" and quickly get frustrated by the lack of functionality. Maybe you blow a lot of time, then eventually find your way back to a more traditional method of building WP sites. Or worse, you are so confused by the experience that you simply decide WP isn't worth it or is too complicated and decide to go another route with another product. Not a great way for WP to present itself to new users, and not a great way to onboard people to the "future paradigm" of WP.
Hi Alex, Sure, I agree with a lot of what you're saying here. The new way forward with Full Site Editing opens up a new way of working with codeless WordPress, but there aren't enough themes taking advantage of the possibilities yet, and the Twenty Twenty-Two theme is the simplest possible version of what's coming. When people start fresh with Twenty Twenty-Two, they aren't getting as robust an experience as using a classic theme or page builder. Block based themes and full site editing will be a big part of the next generation of WordPress design tools, but those haven't been born yet. I'm still fully using Divi and Kadence for all of my production work for clients and my own sites.
Hi Alex, yeah, not being able to duplicate a template is definitely a missing feature - and it's a little weird to have to go to a particular page and click New under Templates to be able to create a new Template from scratch. I'm not sure what's coming next in version 6.0 but you can find that info at make.wordpress.org.
Really well done and helpful Gregg, but I can't imagine why anyone would want to build a WP site using FSE rather than a good page builder like Elementor. Am I missing something?
You're right, the page builders have a much more robust feature set, and they will for a long time if not forever. Using something that's closer to core WordPress is one reason people might choose this, for performance and lightweight site delivery from the server. I expect FSE will continue to develop into its own version of a "page builder" but won't ever overtake the commercial builders out there.
Hi, it's Gregg, thanks for your question. It depends on the theme whether there's a site-wide color change option, and Twenty Twenty-Two has a new global colors system, as well as the ability to edit templates and template parts to define different sections with different styles if needed. For site-wide editing of typography, colors, and Layout (currently just padding), from any Site Editor template editing page, click the split circle icon at the top right to open the Style Settings panel. From there you can control global colors, fonts, and layout for the site. For templates and template parts: Open Appearance > Editor and click Template parts, and edit the Header Dark (Large) for example by clicking the title. Then open the list view at the top left, click the first Group and on the right open the Block Editor with the gear icon if it's not already. In the right column choose color and you can define the Text, Background and Link colors for that template. You can even choose a gradient - you can repeat for any other template or template part, and in that way redefine the colors of the whole site. You can also define colors and typography settings site-wide.
Hi Gregg, This is great! We are facing a bit of an issue with actually starting afresh with this template. We had mistakenly edited the menus and thus the sample landing pages had disappeared. Since we are new on wordpress and are trying to build a simple yet elegant blog page for our nature education fir, we would love the actual simple landing pages to return but we are unable to do a master reset so that everything goes back to what the theme offers. Could we request some help in this regard?
Hi Ninox, if you've made edits to the header, those changes are saved in the database, so if you don't have content yet in this development site, you could start over from a fresh WordPress installation. That would reset your header changes and get you back to the initial install design with the site templates that are used by default. You can also restore those templates manually, if you need to preserve content elsewhere in the site.
Hi Gregg, this message probably doesn’t belong here but I recently enrolled in your Wordpress business course 2.0 but I’m half way through your first course. Do you recommend switching to 2.0 now or complete your original course first?
Hi Alec, thanks for asking - I would recommend going straight to the 2.0 course at this point. I created it as a replacement for the 1.0 version, which has some outdated material.
@@LeverageWP Ok but I noticed your 2.0 course is drastically different from your first course. Do you no longer recommend local by flywheel? If not, is there a way to use Wordpress locally? I also noticed your new course is shorter so I am wondering if we should still use your first course for reference.
@@alec82xxx Hi Alec, I would say the course is slightly different, but it is a replacement for the original. I still recommend Local (by Flywheel) as a local development environment, and teach Local during the 2.0 course. (It's now called Local, not Local by Flywheel.) The new course is almost as long as the original, and covers all the same concepts, in the new ways that I'm using them in my own business.
Hey Gregg! Thanks for taking the time to make this super thorough tutorial, so helpful! I usually use Divi but I have always wanted to use the wordpress native block editor.. I an giving it a try but I can't seem to find an option to change the default fonts. Is it possible to change fonts? I've seen some option but they are not really working for me. Thanks again and thanks in advance! :)
Thanks David! Font choices aren’t natively available like they are in Divi, but I will try and find a good solution, I’m sure others would appreciate it too. Right now it’s up to the theme to choose; there are plugins to help with this.
@@irfanmoosani7771 Hi Irfan, when you select the Navigation block, and click the Plus to add an item, there's an option to add Home as one of the Nav links, in the selection list.
Thanks for your clear, well-paced tutorial. A January newbie (went from 5.8 to 5.9 overnight between 1/24 and 1/25), I needed help. Although I've stuck with 2022 because of its motif, and though I'm Linuxy enough to use Arch and to have blogged years back, 5.9 seems a challenge. Like you I agree WP's "beta" editor isn't "alpha" yet - but hey, B+ work is good. A question: @ 1:03:26+ your title on the "About" page vanishes after you delete the paragraph below. Are the two paired? Another question: if the "About" remains, how do you reduce excess space between the theme's header and text? Does it demand some backend .php work? Again, my double thanks for all your help.
Hi Dale, thanks for your comment. Yes, it's fun to experiment with for now, and also to think about how themes will be made in the future, but WordPress with the Site Editor and Full Site Editing is pretty limited right now. There are a few developers working to expand the design options on some themes, like WP Engine's Frost (frostwp.com), but it will take some time for robust page=building capability to be available. For that reason, I prefer to work with Kadence theme and blocks plugin right now, or Divi Theme and Page Builder, for my current workflow. As for the About page title that disappears when I click Save at 1:03:26, the reason that happens is that the About page is using a particular Page Template from the Site Editor - the Header Dark (Large) template. That template itself does not show the "Post Title" fro any page r post content that it's used to display. So, when I save that page, it doesn't show the title in the front end - it's actually only showing to me as a reference while I'm on the editing screen of that page itself. And to reduce spacing between elements that are displayed with the Template - you don't need to use any code. You can edit that spacing using the Block tools within the Template editing area itself. You would edit that template under Site Tools - Templates. I hope that helps! --Gregg
@@LeverageWP Thanks, Gregg. I appreciate your kind reply. It turns out I asked my questions too soon, indeed writing at just that point. I'd simply a short-term memory lapse there, forgetting that the template you were replicating had no title. Fortunately the next two segments of your tutorial revealed, for me at least, the a secret of block editing: it's to edit/make templates rather than posts/pages. With that trick I was able to make others, allowing (on a newly-developing localhost WP site about raptors) new headers featuring appropriate multiple raptor cover-images as background. All space problems 2022 presented me then disappeared. You can see, too, why WordPress's 2022's motif attracted me. My triple thanks now for your extraordinarily helpful work. I'm a really happy subscriber!
Thank you very much Gregg for this great tutorial. I've followed it step by step and end at the same result than you, but It looks like the home button is missing in the header (1:38:16). It is then not possible to reach the home page. How to fix that?
Hey thanks for your comment. You can edit the Header Template Part, and add a navigation item to the Nav Block - there's one available for a Home Link. Another thing you can do is make the logo image clickable to the Home URL as well.
I wish this was my ideal 2022 theme tutorial, but I found it merely long winded and unhelpful. Or, maybe 2022 is just very complex and confusing? I am a WordPress developer, BTW, and have been using WP since the mid 2000s.
Hey Peter, Gregg here, thanks for the feedback! Yeah, I agree 2022 and full site editing isn't really ready for production sites yet. I'm with you, it's kind of complex and confusing, and I'm not using yet on any real sites. However, 2022 does provide a good insight into where WordPress defaults and theme development is going - in particular, block patterns and pre-designed blocks instead of a rigid design controlled by the theme. Anyway, I was thinking of trying to build some more real-life examples with FSE to see if I might be able to make it work in production - if you've read this far, maybe you might have some ideas for what you might like to see built with 2022? Like, what kind of site could I build with it to make a tutorial more helpful as far as learning what FSE and block patterns in the site editor can do?
OK, I'm following up. Two things come to mind. First, I tried to change the header image on the home page, and I was disappointed to find that what I thought was a full-width header was actually a centered header on a black background. Plus, I could not find a photo that looked good on the black background. So, in terms of design, I'm not sure what do do with that problematic header. Second, it would be handy is there was a block editor for building forms. But maybe that is jumping ahead to advanced stuff? In general, if you had a PDF of a design, such as you might be given by a designer, and showed how to transform the default 2022 theme to match the design, that would be interesting. It seems like thats the promise of the FSE for WordPress.
Haven't done a website since about 2008. This is definitely a big life saver for me. Going through it right now as i try the 2022 theme. I love the block formatting they're doing it makes things a lot easier without having to relearn HTML and CSS again.
Gregg, this was ENORMOUSLY helpful! Thank you for taking the time to create this walk-through. I set up several WP sites years ago and haven't had to do much with them until recently, and I wasn't having a lot of luck with customizing 2020 themes, so decided to give 2022 a whirl. I was so frustrated trying to figure out what was what until I watched your tutorial - there is almost no documentation out there that is intelligible to ordinary people. And I'm glad the whole making the title go away on a page thing wasn't just me. 😂 Now I feel a whole lot more confident as I build my new site. You're a rock star, truly.
Thanks Lori! I appreciate so much that you took the time to write this...I hope to be able to provide more of these on this channel, I'm just starting out on it!
I feel the same way! I'm not stupid --I've created and maintained several sites in the past but this was such a challenge. Until I came across your tutorial. There is NOTHING else that explains any of this. Kudos - I wish I could put you on my keychain! PS A lot has changed since you create this video but it's not hard to figure out what and where. Thank you so much!
Thank you so much. I've just started reacquainting myself with WordPress after a number of years. Your tutorial is the best I've come across so far in terms of clarity and breadth of information. Keep up the good work👍👍👍
Thank you!
I'm really proud of him because he's my teacher on Udemy and I have learned WordPress from him. 💌
Thanks!
This was SO HELPFUL! Thank you so much for digging in where other folks are flying over. I especially appreciate that you left in the unexpected bits and unwelcome surprises, because they're things I would've done and where I would've looked, and now I've seen what to do instead 👍🏾😊
Hi Crystal, thanks so much for your comment! I'm glad that leaving the "oops" moments is helpful - I had hoped doing that would be valuable. --Gregg
Thank you Gregg for this amazing tutorial on making a new WordPress website by editor beta. I had some confusion about making pages but now I understand to make pages with different other options. I like the way you told everything about a blog.
Thanks Greg! I followed along and got the hang of it. All the best my friend!😅
Thanks, you too!
Informative!
Thanks a lot for this wonderful detailed video
Awesome. Highly educative
Thank you Gregg,
After downloading WP 5.9.3, I wasn't aware that I would have to install/activate the Guttenberg plugin. I had assumed that the feature set was intrinsic to these later versions.
I wonder what other tibits that I'm not aware of might be lurking out there? I say this with hand on heart, this is informative and robust, however is it possible to reduce the length and the verbosity? Perhaps a version of this video that assumes more with WP?
Sure Elliot, thanks for the suggestion. I'm going to be creating more videos, and certainly shorter ones that make their point in less time.
Gutenberg is no longer required to be activated to use Twenty Twenty-two or other block themes since WordPress 6.0, but it does give you more options while editing and creating content on your site.
Gregg
Very helpful, thank you
After watching your video I have created a full series tutorial regarding full site editing. I hope you will like it. Feel free to share your feedback and comments. And thanks again for this early video.
I will check it out
Hello - Absolutely wonderful video covering the exciting features of WP 5.9! and the theme 2022. just had to hit the Subscribe button! Thanks a ton! !😳♥
thanks Martin, I appreciate your comment!
how to change colour of the main header from black to white for example. ( the header that comes with this theme) thanks
Thank you so much; I've been waiting exactly for something like this 😊
Thanks!
Many thanks for this great video and your channel🔥🎉🙏👍❤ Awesome to see your video - it helps the worldwide community: Appreciate all the efforts you put in to make this awesome tutorial. - keep up your great work - i look forward to see more. btw: - would love to see more vids covering WP 6.1
Thank you so much!
Very good work!
Thank you! I appreciate your comment!
Thanks ! Great video. Is it possible to add woocommerce in this theme ?
Hi Linda, Yes, WooCommerce will actually work with almost any theme, and Twenty Twenty-Two is on-board also. However, there aren't any "specially-designed" WooCommerce pages like cart and checkout customizations, so you'll end up with the default WooCommerce layouts for those pages. They will work great, but you don't have as many options for changing the design as with Divi or Kadence, for example.
I'm just learning full site editing. I followed you up until the "About" page. The featured image isn't working. I googled it and found a ton of complaints about this. It's a bug in the theme. I don't know how you were able to do it successfully.
Trying to decide which FSE theme I should use...I'm thinking it doesn't matter much since I know how to customize things? Would 2022 be coded best? Should I choose one that has the fonts I want so I don't have to upload fonts? I notice there are only 2 in the wordpress repository that have "accessibility ready" but why isn't 2022 there? I'm guessing many of them are accessibility ready but didn't think of listing that as one of their features?
Update: I read an article by WordPress that says Twenty Twenty-Two theme is slated to be "accessibility-ready" by November 1.
Hey! I might suggest trying Twenty Twenty-three now that it's out - it's just like 2022 but has a bunch of sty;e variations that can save you time and give you ideas. Plus I think it's accessible also.
Hello, thanks for useful content
This was excellent. Learned so much creating this project with you. Have 3 questions: 1. Guttenberg plugin did not come with my new installation. 2022 seems to work well without it. Do I need to install this plugin; 2. Never saw or missed how you got HOME to appear in the navigation and 3. Can menu items be rearranged? Thank you!
Hi L, thanks! Those are good questions. 1. No, Gutenberg plugin is not required to be installed and activated to power Twenty Twenty-Two. It may add some extra block-based features if you use it, and it will not "break" the theme or your site - it just adds the most recent additions to WordPress blocks in the editor before they are available in the WP core versions. Block-based themes used to require Gutenberg before WP 5.9 was released, because the Site Editor and other Full Site Editing features weren't yet available in WP core - but as of 5.9 and later, they are, so Gutenberg isn't required. 2. You can add Home to a navigation menu in two ways: when you are editing the Navigation Block (highlighted in the list view), you can add another Navigation item by clicking the plus icon in the editing window - then you can either choose Home with a search or from the list, or usr a custom link, and paste the home URL, labeling it Home manually as a custom link. 3. Yes, there are two ways to rearrange menu items, one is to open the list view and drag the items into a different order there, or you can use the left-right arrows in the block toolbar, when one of the menu items is selected, to switch it with the other items to the left or the right. --Gregg
I have create a full-width page For the text but what would be the normal steps just in case I'm missing something?
Thanks Sir
Thanks for this Martin. Does this come with a site right sidebar or do you need to create a template for it?
Hi Emmanuel - it's Gregg actually...Great question! Twenty Twenty-Two doesn't have a sidebar in the traditional sense, which used to be set using Widgets. The Twenty Twenty-Two theme doesn't have a sidebar in the "index" template either, which displays a list of posts. So, you could create a new template with a sidebar and use it on the Blog archive pages, as you mentioned, or if you wanted a sidebar on the entire site you could add one to the Page template that's used site-wide. You could even create a Template Part which is a sidebar, and use it inside any template you choose.
@@LeverageWP Thank you so much Gregg. Kind of you to reply. What you mentioned is what I suspected. So you have to use block on that Page with some css or some css? Any reference link on how to do it?
Hi Manny, you don't have to use any code or CSS - you could create a Template Part, in the Site Editor, by adding it using the Add New button at the top right under Template Parts. Then you can customize it by adding blocks or block patterns and save. Next, Open the index Template in the Site Editor, and click the plus at the top left, and search template in the search bar and click Template Part, which will bring in a Template Part block to the layout. You can choose your new Sidebar template part by clicking the blue button in the block, and then arrange it in a column by adding a columns block and designing the layout in the index template. Save the index template when you're done and when you use that template on any page (like a blog Posts page, or the homepage), then it will display your sidebar. Another way which might be easier would be to create a new Template from a Page Editing screen (at the right under Templates) and use a sidebar layout block pattern - there's some under Patterns > Pages, which include blog posts and a sidebar. I'll create more tutorials for this soon.
Why dont I have GutenBurg option
You likely jusy need to install the Gutenburg plugin.
I’ve noticed the blog posts on this theme don’t have share buttons so people can share blog posts. Surely that would affect traffic? How would you go about adding share buttons at the bottom of blog posts, possibly with showing the number of times it’s been shared via Facebook/Pinterest etc? Sorry if this has been covered in your video I’m only 12 minutes in
hi! Share buttons are generally provided through plugins in WordPress, rather than from the theme. There are lots to choose from.
Thanks for this lesson, exactly what I needed. I started adding a couple of page templates. But . . . do you know what will happen if an update for the theme is executed? Will your custom made templates survive the update? Or do we have to consider tricks and magic with child themes, if even possible with custom templates.
Hi Trader, thanks for your question, it's a good one. A theme update will not overwrite customized or custom created templates in a block-based theme. The template changes and custom templates added to a particular WordPress installation are stored in the database, and no new files are created when you add a new template or template part. So, there's actually no need for a child theme or other "magic" tricks to fully customize a site using a block-based theme and full site editing.
Gregg what software did you use to create this. Film it for us? Good job.
Hey, thanks for your comment! I'm using Camtasia from Techsmith. It's a great screen-capture and editing program. One of the thing I like about it is that you can capture the webcam video at the same time, then use it to create that corner headshot while the screen-capture footage stays synced to the audio and video.
@@LeverageWP Thank you so much.
Hello. I've been following along and really appreciate this guide. Just what I had been looking for. I've been working on a site, was able to build pages and create a navigation menu with drop-downs and I believe I saved it in the templates. But I want to remove a redundant drop-down link and can't find the template. Is there a way to identify which header template is being used for all of the pages? Same thing for the footer. The site looks proper, but when I look at all of the footer templates, I don't see the one that I had modified... unless I did it in another part of WP? Thanks.
I decided to just edit the page (again). Changed the header; changed the footer and they took for all of the pages. But I cannot find where it is being saved so that I can make additional changes. If I just choose to edit the page, the nav menu flattens out, and most of the content of the footer disappears. I'm not getting it. If I look at all of the headers and footer in template parts... no help there. Looks like it came out of the box with site title and pages spelled out horizontally.
Hi Carl, you've likely edited the navigation in a Template Part - you can find which template a given page is using, and then which template part is being used as the header with the nav menu, like this: Open the Page in the WP dashboard, and look at the Template dropdown on the right, to see which template is being used to display the content. Go back to Appearance > Editor and click the "W" at the top left to open the editor menu, and click Templates and then the Template Title to open the editor. Click the dropdown at the top middle, and you'll see the template parts that are being used, and you can edit here or click to the Template Parts screen and edit there. --Gregg
Hi Gregg, in your opinion. Is this the best and fastest way to build a website, the block editor or with a site builder like Divi or Elementor?
Hi Alec, thanks it's a good question. The 2022 theme, and others that are using Full Site Editing, are not yet ready for production sites, as far as having all the features and options available to other themes and page builders. FSE has just been released at version 5.9 of WordPress last month (Feb 2022), and will keep getting better, but there are only a handful of themes available right now, and they don't compare with other block-based themes available, or with page builders as far as available options or features. So, for right now, this is more experimental, and represents the future of WordPress themes, but more developed themes and block plugins are the way to go, OR page builders like Divi. I recommend Kadence theme and Kadence Blocks plugin, or Divi Theme and Visual Builder, as far as the most robust ways of building WordPress websites right now.
How do I add additional CSS. I added the Contact Form 7 plugin and theres no css on the plugin. I tried just adding css in the editor for the theme and it doesnt do anything.
Hi Jason,
I would suggest using a CSS plugin now that block themes don't provide easy access to the Customizer and the Additional CSS area in WordPress.
Simple Custom CSS is a great one.
Gregg
Hello, I was thinking that you do not still need Gutenberg plugin with Wordpress version 5.9, isnt't it?
Hi Lionel, it's Gregg - yes, you are correct, Gutenberg is no longer required to make the Site Editor work with a block-based FSE theme, because that functionality is now included with WordPress core 5.9 and later. However, running Gutenberg does give you some more advanced blocks and design capability, as it adds the newest features that aren't yet merged into core.
@@LeverageWP Thank you for the answer, Gregg
Is there any momentum on duplicating templates? This is an absolutely CRITICAL feature, and it is absurd that it's not already a feature.
I will add as well, what about just a new blank template and not a "Front Page Template". It's truly incredible to me that you can't do that, even in a beta. We are also unable to cleanly access the Customizer (you still can, but you have to type in the path to the php file in your browser). FSE, as far as I'm concerned, is still in Alpha, and frankly, the Twenty Twenty-Two theme should not have been released until FSE was more thoroughly user-tested. Twenty Eighteen was skipped, so it's not like theres no precedent for such a decision. It's just extremely disappointing to have a mostly functional editor that is missing the most fundamental of features (adding blank templates, duplicating templates, and cleanly accessing Customizer features like site-wide Additional CSS).
Final gripe: imagine the user experience as a new or aspiring site admin or WP developer. You are presented with block editing and a new template with a default FSE activation (albeit, one with severely limited functionality). You assume this is "the way of doing things" and quickly get frustrated by the lack of functionality. Maybe you blow a lot of time, then eventually find your way back to a more traditional method of building WP sites. Or worse, you are so confused by the experience that you simply decide WP isn't worth it or is too complicated and decide to go another route with another product. Not a great way for WP to present itself to new users, and not a great way to onboard people to the "future paradigm" of WP.
Hi Alex, Sure, I agree with a lot of what you're saying here. The new way forward with Full Site Editing opens up a new way of working with codeless WordPress, but there aren't enough themes taking advantage of the possibilities yet, and the Twenty Twenty-Two theme is the simplest possible version of what's coming. When people start fresh with Twenty Twenty-Two, they aren't getting as robust an experience as using a classic theme or page builder. Block based themes and full site editing will be a big part of the next generation of WordPress design tools, but those haven't been born yet. I'm still fully using Divi and Kadence for all of my production work for clients and my own sites.
Hi Alex, yeah, not being able to duplicate a template is definitely a missing feature - and it's a little weird to have to go to a particular page and click New under Templates to be able to create a new Template from scratch. I'm not sure what's coming next in version 6.0 but you can find that info at make.wordpress.org.
Really well done and helpful Gregg, but I can't imagine why anyone would want to build a WP site using FSE rather than a good page builder like Elementor. Am I missing something?
You're right, the page builders have a much more robust feature set, and they will for a long time if not forever. Using something that's closer to core WordPress is one reason people might choose this, for performance and lightweight site delivery from the server. I expect FSE will continue to develop into its own version of a "page builder" but won't ever overtake the commercial builders out there.
can you tell me how to change website complete color
Leverage WordPress
Hi, it's Gregg, thanks for your question. It depends on the theme whether there's a site-wide color change option, and Twenty Twenty-Two has a new global colors system, as well as the ability to edit templates and template parts to define different sections with different styles if needed. For site-wide editing of typography, colors, and Layout (currently just padding), from any Site Editor template editing page, click the split circle icon at the top right to open the Style Settings panel. From there you can control global colors, fonts, and layout for the site. For templates and template parts: Open Appearance > Editor and click Template parts, and edit the Header Dark (Large) for example by clicking the title. Then open the list view at the top left, click the first Group and on the right open the Block Editor with the gear icon if it's not already. In the right column choose color and you can define the Text, Background and Link colors for that template. You can even choose a gradient - you can repeat for any other template or template part, and in that way redefine the colors of the whole site. You can also define colors and typography settings site-wide.
Hi Gregg,
This is great!
We are facing a bit of an issue with actually starting afresh with this template. We had mistakenly edited the menus and thus the sample landing pages had disappeared. Since we are new on wordpress and are trying to build a simple yet elegant blog page for our nature education fir, we would love the actual simple landing pages to return but we are unable to do a master reset so that everything goes back to what the theme offers. Could we request some help in this regard?
Hi Ninox, if you've made edits to the header, those changes are saved in the database, so if you don't have content yet in this development site, you could start over from a fresh WordPress installation. That would reset your header changes and get you back to the initial install design with the site templates that are used by default. You can also restore those templates manually, if you need to preserve content elsewhere in the site.
Where download the simple picture?
you can find a link to download images for Twenty Twenty-two here: leveragewp.com/resources/
Hi Gregg, this message probably doesn’t belong here but I recently enrolled in your Wordpress business course 2.0 but I’m half way through your first course. Do you recommend switching to 2.0 now or complete your original course first?
Hi Alec, thanks for asking - I would recommend going straight to the 2.0 course at this point. I created it as a replacement for the 1.0 version, which has some outdated material.
@@LeverageWP Ok but I noticed your 2.0 course is drastically different from your first course. Do you no longer recommend local by flywheel? If not, is there a way to use Wordpress locally? I also noticed your new course is shorter so I am wondering if we should still use your first course for reference.
@@alec82xxx Hi Alec, I would say the course is slightly different, but it is a replacement for the original. I still recommend Local (by Flywheel) as a local development environment, and teach Local during the 2.0 course. (It's now called Local, not Local by Flywheel.) The new course is almost as long as the original, and covers all the same concepts, in the new ways that I'm using them in my own business.
Hey Gregg! Thanks for taking the time to make this super thorough tutorial, so helpful! I usually use Divi but I have always wanted to use the wordpress native block editor.. I an giving it a try but I can't seem to find an option to change the default fonts. Is it possible to change fonts? I've seen some option but they are not really working for me. Thanks again and thanks in advance! :)
Thanks David! Font choices aren’t natively available like they are in Divi, but I will try and find a good solution, I’m sure others would appreciate it too. Right now it’s up to the theme to choose; there are plugins to help with this.
How did you add HOME menu item in the header and footer menu?
@@irfanmoosani7771 Hi Irfan, when you select the Navigation block, and click the Plus to add an item, there's an option to add Home as one of the Nav links, in the selection list.
@@LeverageWP Thank you!
nice
Thanks for your clear, well-paced tutorial. A January newbie (went from 5.8 to 5.9 overnight between 1/24 and 1/25), I needed help. Although I've stuck with 2022 because of its motif, and though I'm Linuxy enough to use Arch and to have blogged years back, 5.9 seems a challenge. Like you I agree WP's "beta" editor isn't "alpha" yet - but hey, B+ work is good. A question: @ 1:03:26+ your title on the "About" page vanishes after you delete the paragraph below. Are the two paired? Another question: if the "About" remains, how do you reduce excess space between the theme's header and text? Does it demand some backend .php work? Again, my double thanks for all your help.
Hi Dale, thanks for your comment. Yes, it's fun to experiment with for now, and also to think about how themes will be made in the future, but WordPress with the Site Editor and Full Site Editing is pretty limited right now. There are a few developers working to expand the design options on some themes, like WP Engine's Frost (frostwp.com), but it will take some time for robust page=building capability to be available. For that reason, I prefer to work with Kadence theme and blocks plugin right now, or Divi Theme and Page Builder, for my current workflow. As for the About page title that disappears when I click Save at 1:03:26, the reason that happens is that the About page is using a particular Page Template from the Site Editor - the Header Dark (Large) template. That template itself does not show the "Post Title" fro any page r post content that it's used to display. So, when I save that page, it doesn't show the title in the front end - it's actually only showing to me as a reference while I'm on the editing screen of that page itself. And to reduce spacing between elements that are displayed with the Template - you don't need to use any code. You can edit that spacing using the Block tools within the Template editing area itself. You would edit that template under Site Tools - Templates. I hope that helps! --Gregg
@@LeverageWP Thanks, Gregg. I appreciate your kind reply. It turns out I asked my questions too soon, indeed writing at just that point. I'd simply a short-term memory lapse there, forgetting that the template you were replicating had no title. Fortunately the next two segments of your tutorial revealed, for me at least, the a secret of block editing: it's to edit/make templates rather than posts/pages. With that trick I was able to make others, allowing (on a newly-developing localhost WP site about raptors) new headers featuring appropriate multiple raptor cover-images as background. All space problems 2022 presented me then disappeared. You can see, too, why WordPress's 2022's motif attracted me. My triple thanks now for your extraordinarily helpful work. I'm a really happy subscriber!
Thank you very much Gregg for this great tutorial. I've followed it step by step and end at the same result than you, but It looks like the home button is missing in the header (1:38:16). It is then not possible to reach the home page. How to fix that?
Hey thanks for your comment. You can edit the Header Template Part, and add a navigation item to the Nav Block - there's one available for a Home Link. Another thing you can do is make the logo image clickable to the Home URL as well.
I wish this was my ideal 2022 theme tutorial, but I found it merely long winded and unhelpful. Or, maybe 2022 is just very complex and confusing? I am a WordPress developer, BTW, and have been using WP since the mid 2000s.
Hey Peter, Gregg here, thanks for the feedback! Yeah, I agree 2022 and full site editing isn't really ready for production sites yet. I'm with you, it's kind of complex and confusing, and I'm not using yet on any real sites. However, 2022 does provide a good insight into where WordPress defaults and theme development is going - in particular, block patterns and pre-designed blocks instead of a rigid design controlled by the theme. Anyway, I was thinking of trying to build some more real-life examples with FSE to see if I might be able to make it work in production - if you've read this far, maybe you might have some ideas for what you might like to see built with 2022? Like, what kind of site could I build with it to make a tutorial more helpful as far as learning what FSE and block patterns in the site editor can do?
Thats fair, Gregg. I'll take another crack at it, and let you know what I'm trying to accomplish.
OK, I'm following up. Two things come to mind. First, I tried to change the header image on the home page, and I was disappointed to find that what I thought was a full-width header was actually a centered header on a black background. Plus, I could not find a photo that looked good on the black background. So, in terms of design, I'm not sure what do do with that problematic header. Second, it would be handy is there was a block editor for building forms. But maybe that is jumping ahead to advanced stuff?
In general, if you had a PDF of a design, such as you might be given by a designer, and showed how to transform the default 2022 theme to match the design, that would be interesting. It seems like thats the promise of the FSE for WordPress.
You are done a great job👍🏻 But...
Where is the final result of your customisation? Just the review, nothing more.
Boring 🥱
I have created a complete playlist with a custom design. I hope you will like it.
Thanks for the suggestion, Vitas. 2022.wordpress.net/
nice
nice