Beginner's Guide: Switching to a WordPress Block Theme
HTML-код
- Опубликовано: 30 окт 2023
- 👉 Stay in touch with WordPress news: www.pootlepress.com/sign-up-t...
👉 Get WordPress help : www.pootlepress.com/get-wordp...
👉 Channel Sponsorship opportunities www.pootlepress.com/youtube-v...
Video summary
Learn how to easily migrate your WordPress site from a classic theme like Astra or GeneratePress to a WordPress block theme like the Default Twenty Twenty-Three theme in this helpful step-by-step beginner's guide.
In this video, you'll learn:
The main differences between classic themes like Astra and block themes like Twenty Twenty-Three. Block themes use the site editor for customization instead of the theme customizer.
Why you may want to switch to a block theme. Block themes are the future of WordPress development and provide better customization, speed, and consistency.
How to fix structural changes first when switching themes by editing the header, navigation menus, and page templates.
How to adjust the design next by changing fonts, colors, and padding/margins to get a similar look.
How a plugin like Create Block Theme can help manage Google fonts in WordPress since font libraries don't exist yet.
How to fully customize WooCommerce stores and clean up Divi shortcodes after deactivating the Divi theme.
That overall, switching from a classic to block theme is a relatively easy process if you methodically fix structure then design issues.
By the end of this helpful step-by-step beginner's guide, you'll have the knowledge to confidently migrate any WordPress site from a classic theme to a modern WordPress block theme. 
Наука
I never understood why options varied from one theme to another. Neither did I understand the difference between classic and block themes. Thanks again Jamie. Next time you’re in Iowa, I owe you a cheeseburger. I appreciate your videos, and that every time I hit like, your cats get a little treat!
Great to hear it was useful - looking forward to that cheeseburger 🍔😃
Thanks again. Always seem to learn ‘something’ watching your videos!
Thank you 🙏
Great video Jamie! Have been waiting for a video like this.
Thanks Peter
Thanks, Jamie for the incredible tutorial.
I think the problem with the block theme is communication.
Things were never appropriately communicated to the WordPress community on the block theme in an easy-to-understand way like you are doing here. I have watched videos from people who worked on the WordPress team and other WordPress creators, and both fail to explain how blocking them works.
From watching your videos now I understand that black themes have the customizer integrated with them, and the site editor is basically the customizer now, hence is no need for the customer.
I think is point has not been clearly communicated with the WordPress community hence the confusion and disarray about the block theme.
However, I still think the site editor and block are not yet ready for prime time, they are still kinks to be worked on.
Thanks so much for a great comment - the active install stats for Block Themes (video coming soon) back up your points perfectly. There are kinks but imo with 6.4 for those that are prepared for a few UI kinks we are ready 😉
Excellent tutorial Jamie. I'm playing about with my local site as I watch this, and I'm very impressed with what you've shown here.
Thanks Sonya 🙏
Thank you. I love your lists on the whiteboard 😊
Thanks Jette, I'll keep the little whiteboard then 👍
@@jamiewp 😂
Thank you for this excellent video, Jamie. I'm still ploughing on and gradually getting to grips with block themes. And whilst I basically jumped straight into using Gutenberg, I still found this video helpful. It's great to see that I'm finally getting things straightened out in my head, thanks in a large part to you!
For a future video, it would be really helpful if you could do some comparisons between different block themes after the next update to WP and the themes as a consequence.
Thanks Lisa / block themes comparison is on the list 👍 did you see my video about How to choose a Block Theme ?
Excellent content!
Thanks
All the cool edits are for the higher tier paid plans (I have the lowest paid plan), but you bet your butt I'm coming back to this video when I'm ready to upgrade my site 😊 This was very helpful, thank you!
Great to hear
*Great Content as always thx*
thank you 👍
Great video as always Jamie. I was just wondering about this and your video appeared. I can't wait to change over the FSE and get rid of all the bloatware plugins that I use. Many were needed to get WP to do simple things and often didn't work and weren't updated. They then caused compatibility issues and the standard response was always turn all plugins off. A bit like the garage saying put your car in the garage and don't use it and see if the problem exists. At least it looks like WP is finally growing up.
thanks Stu
Many thanks. You make it look so easy.
I'd be interested to see and Elementor -> Block Themes video.
I’m working on something around that subject atm - I’m the meantime here’s a head to head challenge between Elementor and Gutenberg featuring two of my daughters WordPress Gutenberg versus Elementor - The £20 Prize Beginners Challenge!
ruclips.net/video/ng_wFkMd95c/видео.html
Thanks for the great tutorial. I didn't catch everything well because of the speed with which you explain changing the featured image to the cover and adding the title to the cover. I had to slow down the video to 0.5 and I had a good laugh. Try it!😁😁 That's how I sound after a good party!
Glad it was helpful!
At 09:38 you mentioned subtly Jamie, but it's in fact one of the most important thing to know for avergae people. I don't know, for example, how to make a full screen page with an image background without using a plugin.. Thank you!
The Cover Block can do that - and in WordPress 6.4 coming out in 1 week the Group Block will have background image support. Does that help?
@@jamiewp Excellent, thank you Jamie!
Thank you for the great tutorial as usual. Really appreciate!
Question: Can we use different (multiple) headers with Block theme?
Yes absolutely- one way is to create custom templates (very easy)
Dont forget to change the content style template for each header used. For example: full width 1 for header 1 and full width 2 for header 2. So when you make a new page, select the page template accordingly
Thanks Jamie, this tutorial is very encouraging. I have questions about security, is this secure using the default theme like 2023 or 2024? Or what security plugins I should add to secure the site ?
Yup the 2023 and 2024 adhere to the best WordPress coding standards, are constantly updated, and are very secure.
Fab video, one of the big issues with WP is trying different themes and seeing the formatting go completely haywire, I've yet to find a theme that looks like the screenshots.
I still feel the global theme settings are buried far too deep requiring click this, click that and find the tiny icon etc but i guess that's not changing anyday soon so will have to keep practicing lol..
100 % agree about global styles 👍
Thank you! You've been talking about block themes for so long and at this point Inwas too afraid to ask, if this is simply the Gutenberg theme system. "Block Theme" sounds so old. 😄
hi, i have been talking about them for about 2 years now yes - im not 100% what the Gutenberg Theme System is, but it's probably the same thing.
Never mind Jamie! I found the solution. Sometimes it is easier than you think it is 😀
Great
@12:35 You've added all style variants. Is it that WordPress automatically loads only the styles that are used or should you specifically add only the styles that are really used to the theme for a real live website? Thanks for your efforts and sharing your knowledge!
Yup only styles are loaded when used 👍
Ooh! Would love to see the shortcode converters.
Last time i tested this it worked great, but as you can see it's been a while since it was updated wordpress.org/plugins/shortcode-cleaner-lite/ - Also Divi 5 when it comes out is apparently not shortcode based so it should be easier to switch to Gutenberg
Oh and here's a 2 years old tutorial that shows how to move from Divi to Gutenberg ruclips.net/video/PAV5vrVv9Is/видео.htmlsi=pOc3jkaOTQQk4mlj
Where is the CSS stored in WordPress? I want to make some changes such as transitions when hovering over buttons and other links. I also want to add text shadow to some heading blocks. I've got the Siteorigin CSS editor, but even that doesn't cover everything.
How do block themes compare to Bricks? If one is shelling out money t buy themes, what would be a better choice? Bricks or Block Themes?
Sorry for a vague answer but It really depends on the use case and the customer. For me, the customer is the most important factor in deciding which stack to use. Eg is technical debt going to hurt the customer down the track , does the customer have a requirement to edit templates easily, how long will the customer need the website, do they want their team to be trained up etc etc
Thank you, Jamie. I'm battling with this change as we speak. In my case I'm going from an older 2015 design built with Genesis and a child theme that was further customized by the original designer. I've decided to learn how to do this myself, and I set up a stag8ng site with clone of the live site. The goal is to minimize the number of plug-ins that are in use and also change the layout and design a bit. Unlike your example which had minor differences when comparing the block theme to the kadance, my website looked like absolute garbage and all sort of things that were previously in widgets disappeared. As a beginner, this has been quite the journey to get things to start looking halfway decent. At the moment I'm using the Ollie theme, and I'm having some issues trying to resize the columns in the Gallery block (there seems to be no width adjustment in the settings). I'm also having trouble accessing saved patterns that I created. I can see them, but they don't show up as options under the Patterns tab when I open a new page and try to add them. Maybe it's user error, may it's not. Any suggestions on how to correct these?
Do you want to have different widths for the gallery columns or just make the whole thing wider - if just wider , then try putting in a group block - then make the group block wide or full width
@jamiewp thanks for the reply. What I'd like to do is change the width of the individual columns in the gallery block so it can display the caption that is going over the image in complete words. Currently, the words are being broken up improperly. For example, the word Phonological is split into 2 lines, with phonological on top and gical below it. The other thing that isn't working is the saving of reusable patterns. I tried creating a page template that I could use for multiple categories, after saving it, I can see it under manage all my patterns, but it doesn't show up as an option in the patterns tab where I would select it for use.
ok try adding the columns block inside a group block and then making the columns block full width@@wells2671
Also, what theme are you using?
@@jamiewpI'm using Ollie block theme version 1.1.0
Im starting to come around to your way of thinking Jamie,was using Divi and found it very slow and problematic going forward,However using wordpress itself was lightening speed as its installed directly on the server it may not b fancy and shiny however it gives you tons of control which in my opinion most of us want is control over our business and lives going forward
Great to hear Eamonn - there’s so many advantages if you can stick to core (for devs and customers)
If you delete the page title using your method, it also deletes the pages titles on the blog posts. So I did it by editing the code.
I have looked at this excellent video a couple of times and is wondering about the cover block. Is there any chance one could change the height on it? Since I am a photographer and want to showcase my images I find it hard when the cover block cuts the height on it because the image does not show the picture as it should. I do however lov the fact that I could have the title over the image 😀
There's a height control on the image (circle anchor on the bottom), a
'toggle full height' in the control bar and a minimum height control in the cover block's style tab. You can even change it to 'vh' for a percentage of the viewport's height. Technically in CSS, 'cover' means fill the element with an image, cropping it to make sure it covers whatever the aspect is of the area. Honestly, I could write the CSS faster than trying to figure out where these controls are and how to set them.
Thanks! @@PaulMcCannWebBuilder
I have installed nodejs in vps and trying to execute npm install @wordpress/scripts --save-dev and it triggered my vps nginx to stop and no further actions seems.Am I missing something?
Thank you! I am looking for a block theme which supports both a menu bar on top and one on the left side. Anyone?
Every block theme can do this - ive done a few videos that do this on my channel - check out my techcrunch video
Are there are starter page templates plugins out there that only use native Gutenberg blocks and not their own blocks?
Check out the Twentig plugin , they have some - also my free block themes (built from 2024 www.pootlepress.com/free-wordpress-themes/)
What do I do with custom functions I've added to my website when WordPress block themes do not have a functions.php file?
You could use a plugin
I take it the process would be the same switching from Kadence to Astra as all my sites are built using Kadence and i want to swap them all over to blocks and remove everything to do with kadence, what would you recommend as the best base theme to start with 2023, Astra or SpectraOne
It really depends on the project spec and whether you want to go all in on Block Themes 😉
Thats the idea want to go all in with blocks @@jamiewp
Jamie, I need advice. Since using block theme, I think I'm hooked! Now, I got a project from an agency which requires me to white label the theme name.
Is it legal for me to make a child theme for lets say tt3 and rename it with create block theme plugin? I know I can even clone and rename it, but I think it's a bad practice.
Or.. do you know a block theme that offers white label? Thanks Jammie
Hi , yes perfectly legal 👍 and not bad practice at all
@@jamiewp thanks for the answer 👌🏻
Hey - I hope somebody smarter than me can land me a hand. I want to switch to the latest version of WordPress from GeneratePress to default block theme Twenty Twenty-Four. But I have something that's holding me back: In GeneratePress, when I make a setting (let's say font-size, or padding) to a block for - let's say - mobile, I can override that setting for desktop and make the font-size/padding different. Is it also possible to do that in the Twenty Twenty-Four full-site editing interface?
Nice tutorial but Kadence is basically a block based theme except for header & footer. So it translates quite easily. What happens with a regular non block theme?
That’s what most themes are 👍 if you have used Gutenberg to create your pages and posts then the process will be the same
can you add your own template on this version of wordpress ?
Yes you can create your own templates
Unfortunately it looks like the Fonts Manager is slipping to 6.5 in early 2023. So we're not a week away from hand-coding fonts in theme.json being a thing of the past, but its days are numbered!
Yup - I’d just use the create block theme plugin to add them for now 👍
What about mobile breakpoints?
From where are you getting the time to read block?
At the moment you can get if you install the free Gutenberg plugin (not recommended for production sites)
II love writing code in theme development. I don’t want to get forced into changing every aspect through the gui. They take too long. I haven’t written a theme in a while. Mostly just maintaining multi sites. Most of these blocks seems to have to same old design aspect. Say for instance if I want a left side bar with a nav and logo and right side content. How can I do that? I’ve been trying and it just seems completely not user friendly at all. The one thing I was drawn to wp was the simplicity. It seems more like spaghetti.
Hi - you can still write code and not use the Gui if you want - block themes just give you a gui if you want to use it, but you dont have to. Check out this video , it shows you how to create the layout you mentioned ruclips.net/video/qoX3uNmH5LY/видео.htmlsi=DeMuCk-38_vbTsqt
Wouldn't be nice for the WordPress team to just adopts standards? Why not call 'Groups' 'Containers' to stay uniform with industry standards.
And call 'Blocks' 'Components' which is industry standard. I Agree with you but I think Advanced developers are not the target group, they still want to milk all the normal people who stick around since the early 2000's
Too fast for me Jamie…. Been 10 years since I used WP. Back then I could change all in Classic without so many annoying plugins.
Hi Mark - sorry about that, maybe try the half speed function in RUclips 😉 Also i didnt use any plugins 👍