Beginner's Guide: Switching to a WordPress Block Theme

👉 Stay in touch with WordPress news: www.pootlepres...
👉 Get WordPress help : www.pootlepres...
👉 Channel Sponsorship opportunities www.pootlepres...
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.

[@sevencaye]

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.

[@jamiewp]

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 😉

[@Sonya_Makepeace]

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.

[@jamiewp]

Thanks Sonya 🙏

[@SuttonsNest]

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!

[@jamiewp]

Great to hear it was useful - looking forward to that cheeseburger 🍔😃

[@lisastangroom67]

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.

[@jamiewp]

Thanks Lisa / block themes comparison is on the list 👍 did you see my video about How to choose a Block Theme ?

[@kawaiimombear]

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!

[@jamiewp]

Great to hear

[@e.rohner5704]

Thanks again. Always seem to learn ‘something’ watching your videos!

[@jamiewp]

Thank you 🙏

[@karl-ford]

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!

[@jamiewp]

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?

[@karl-ford]

@@jamiewp Excellent, thank you Jamie!

[@peternilsson2372]

Great video Jamie! Have been waiting for a video like this.

[@jamiewp]

Thanks Peter

[@jettedh123]

Thank you. I love your lists on the whiteboard 😊

[@jamiewp]

Thanks Jette, I'll keep the little whiteboard then 👍

[@jettedh123]

@@jamiewp 😂

[@stuartmorley6338]

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.

[@jamiewp]

thanks Stu

[@gr33n000]

Many thanks. You make it look so easy. I'd be interested to see and Elementor -> Block Themes video.

[@jamiewp]

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! kzbin.info/www/bejne/pJjCqHmhgslsa8U

[@LjubomirTesic]

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!

[@jamiewp]

Glad it was helpful!

[@visualmodo]

Excellent content!

[@jamiewp]

Thanks

[@peternilsson2372]

Never mind Jamie! I found the solution. Sometimes it is easier than you think it is 😀

[@jamiewp]

Great

[@FANTIE]

*Great Content as always thx*

[@jamiewp]

thank you 👍

[@Sonya_Makepeace]

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.

[@kaffeeringe]

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. 😄

[@jamiewp]

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.

[@marionyeosaki]

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 ?

[@jamiewp]

Yup the 2023 and 2024 adhere to the best WordPress coding standards, are constantly updated, and are very secure.

[@John.Rearden]

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?

[@jamiewp]

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

[@richmaniow]

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..

[@jamiewp]

100 % agree about global styles 👍

[@wells2671]

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?

[@jamiewp]

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

[@wells2671]

@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.

[@jamiewp]

ok try adding the columns block inside a group block and then making the columns block full width@@wells2671

[@jamiewp]

Also, what theme are you using?

[@wells2671]

@@jamiewpI'm using Ollie block theme version 1.1.0

[@derek-hanson]

Ooh! Would love to see the shortcode converters.

[@jamiewp]

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

[@jamiewp]

Oh and here's a 2 years old tutorial that shows how to move from Divi to Gutenberg kzbin.info/www/bejne/hnK5Zqmoi9tsf9Usi=pOc3jkaOTQQk4mlj

[@eamonnfitzgerald1260]

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

[@jamiewp]

Great to hear Eamonn - there’s so many advantages if you can stick to core (for devs and customers)

[@pacesferry]

What about mobile breakpoints?

[@softnwords]

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?

[@hellemller8448]

Thank you! I am looking for a block theme which supports both a menu bar on top and one on the left side. Anyone?

[@jamiewp]

Every block theme can do this - ive done a few videos that do this on my channel - check out my techcrunch video

[@Mafiakitty]

Are there are starter page templates plugins out there that only use native Gutenberg blocks and not their own blocks?

[@jamiewp]

Check out the Twentig plugin , they have some - also my free block themes (built from 2024 www.pootlepress.com/free-wordpress-themes/)

[@slingsandarrows]

What do I do with custom functions I've added to my website when WordPress block themes do not have a functions.php file?

[@jamiewp]

You could use a plugin

[@SweXperts]

Thank you for the great tutorial as usual. Really appreciate! Question: Can we use different (multiple) headers with Block theme?

[@jamiewp]

Yes absolutely- one way is to create custom templates (very easy)

[@aditmb]

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

[@ClaudiuPopa]

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?

[@acegase]

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?

[@jamiewp]

That’s what most themes are 👍 if you have used Gutenberg to create your pages and posts then the process will be the same

[@muuthirmuhammed9497]

can you add your own template on this version of wordpress ?

[@jamiewp]

Yes you can create your own templates

[@jugibur2117]

@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!

[@jamiewp]

Yup only styles are loaded when used 👍

[@peternilsson2372]

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 😀

[@PaulMcCannWebBuilder]

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.

[@peternilsson2372]

Thanks! @@PaulMcCannWebBuilder

[@p__wing]

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!

[@jamiewp]

Yup - I’d just use the create block theme plugin to add them for now 👍

[@john.helyar]

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

[@jamiewp]

It really depends on the project spec and whether you want to go all in on Block Themes 😉

[@john.helyar]

Thats the idea want to go all in with blocks @@jamiewp

[@CopperNic1972]

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.

[@jamiewp]

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 kzbin.info/www/bejne/p6C7ZKiEoq1ogrssi=DeMuCk-38_vbTsqt

[@surjaa.c]

From where are you getting the time to read block?

[@jamiewp]

At the moment you can get if you install the free Gutenberg plugin (not recommended for production sites)

[@aditmb]

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

[@jamiewp]

Hi , yes perfectly legal 👍 and not bad practice at all

[@aditmb]

@@jamiewp thanks for the answer 👌🏻

[@gashumba888]

Wouldn't be nice for the WordPress team to just adopts standards? Why not call 'Groups' 'Containers' to stay uniform with industry standards.

[@jrmc732]

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

[@markw.61]

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.

[@jamiewp]

Hi Mark - sorry about that, maybe try the half speed function in KZbin 😉 Also i didnt use any plugins 👍