Beginner's Guide: Switching to a WordPress Block Theme

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

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

Пікірлер: 93

  • @sevencaye
    @sevencaye9 ай бұрын

    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

    @jamiewp

    9 ай бұрын

    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
    @Sonya_Makepeace7 ай бұрын

    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

    @jamiewp

    7 ай бұрын

    Thanks Sonya 🙏

  • @e.rohner5704
    @e.rohner57049 ай бұрын

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

  • @jamiewp

    @jamiewp

    9 ай бұрын

    Thank you 🙏

  • @peternilsson2372
    @peternilsson23729 ай бұрын

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

  • @jamiewp

    @jamiewp

    9 ай бұрын

    Thanks Peter

  • @SuttonsNest
    @SuttonsNest2 ай бұрын

    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

    @jamiewp

    2 ай бұрын

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

  • @lisastangroom67
    @lisastangroom679 ай бұрын

    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

    @jamiewp

    9 ай бұрын

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

  • @kawaiimombear
    @kawaiimombear4 ай бұрын

    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

    @jamiewp

    4 ай бұрын

    Great to hear

  • @jettedh123
    @jettedh1239 ай бұрын

    Thank you. I love your lists on the whiteboard 😊

  • @jamiewp

    @jamiewp

    9 ай бұрын

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

  • @jettedh123

    @jettedh123

    9 ай бұрын

    @@jamiewp 😂

  • @visualmodo
    @visualmodo9 ай бұрын

    Excellent content!

  • @jamiewp

    @jamiewp

    9 ай бұрын

    Thanks

  • @gr33n000
    @gr33n0009 ай бұрын

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

  • @jamiewp

    @jamiewp

    9 ай бұрын

    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! kzread.info/dash/bejne/oJuT2aikfcefZcY.html

  • @karl-ford
    @karl-ford9 ай бұрын

    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

    @jamiewp

    9 ай бұрын

    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

    @karl-ford

    9 ай бұрын

    @@jamiewp Excellent, thank you Jamie!

  • @stuartmorley6338
    @stuartmorley63388 ай бұрын

    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

    @jamiewp

    8 ай бұрын

    thanks Stu

  • @FANTIE
    @FANTIE9 ай бұрын

    *Great Content as always thx*

  • @jamiewp

    @jamiewp

    9 ай бұрын

    thank you 👍

  • @LjubomirTesic
    @LjubomirTesic5 ай бұрын

    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

    @jamiewp

    5 ай бұрын

    Glad it was helpful!

  • @Sonya_Makepeace
    @Sonya_Makepeace7 ай бұрын

    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.

  • @peternilsson2372
    @peternilsson23728 ай бұрын

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

  • @jamiewp

    @jamiewp

    8 ай бұрын

    Great

  • @richmaniow
    @richmaniow9 ай бұрын

    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

    @jamiewp

    9 ай бұрын

    100 % agree about global styles 👍

  • @John.Rearden
    @John.Rearden9 ай бұрын

    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

    @jamiewp

    9 ай бұрын

    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

  • @kaffeeringe
    @kaffeeringe9 ай бұрын

    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

    @jamiewp

    9 ай бұрын

    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.

  • @SweXperts
    @SweXperts9 ай бұрын

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

  • @jamiewp

    @jamiewp

    9 ай бұрын

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

  • @aditmb

    @aditmb

    9 ай бұрын

    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

  • @marionyeosaki
    @marionyeosaki5 ай бұрын

    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

    @jamiewp

    5 ай бұрын

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

  • @Jack_Warner
    @Jack_Warner8 ай бұрын

    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.

  • @softnwords
    @softnwords3 ай бұрын

    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?

  • @wells2671
    @wells26718 ай бұрын

    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

    @jamiewp

    8 ай бұрын

    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

    @wells2671

    8 ай бұрын

    @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

    @jamiewp

    8 ай бұрын

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

  • @jamiewp

    @jamiewp

    8 ай бұрын

    Also, what theme are you using?

  • @wells2671

    @wells2671

    8 ай бұрын

    @@jamiewpI'm using Ollie block theme version 1.1.0

  • @eamonnfitzgerald1260
    @eamonnfitzgerald12608 ай бұрын

    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

    @jamiewp

    8 ай бұрын

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

  • @derek-hanson
    @derek-hanson9 ай бұрын

    Ooh! Would love to see the shortcode converters.

  • @jamiewp

    @jamiewp

    9 ай бұрын

    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

    @jamiewp

    9 ай бұрын

    Oh and here's a 2 years old tutorial that shows how to move from Divi to Gutenberg kzread.info/dash/bejne/gnWKl9irhtmfedY.htmlsi=pOc3jkaOTQQk4mlj

  • @ClaudiuPopa
    @ClaudiuPopa3 ай бұрын

    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?

  • @p__wing
    @p__wing9 ай бұрын

    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

    @jamiewp

    9 ай бұрын

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

  • @jugibur2117
    @jugibur21179 ай бұрын

    @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

    @jamiewp

    9 ай бұрын

    Yup only styles are loaded when used 👍

  • @hellemller8448
    @hellemller84486 ай бұрын

    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

    @jamiewp

    6 ай бұрын

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

  • @pacesferry
    @pacesferry2 ай бұрын

    What about mobile breakpoints?

  • @acegase
    @acegase8 ай бұрын

    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

    @jamiewp

    8 ай бұрын

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

  • @Mafiakitty
    @Mafiakitty4 ай бұрын

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

  • @jamiewp

    @jamiewp

    4 ай бұрын

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

  • @peternilsson2372
    @peternilsson23728 ай бұрын

    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

    @PaulMcCannWebBuilder

    8 ай бұрын

    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

    @peternilsson2372

    8 ай бұрын

    Thanks! @@PaulMcCannWebBuilder

  • @slingsandarrows
    @slingsandarrows8 ай бұрын

    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

    @jamiewp

    8 ай бұрын

    You could use a plugin

  • @CopperNic1972
    @CopperNic19728 ай бұрын

    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

    @jamiewp

    8 ай бұрын

    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 kzread.info/dash/bejne/o6OMldeHnaubfLw.htmlsi=DeMuCk-38_vbTsqt

  • @muuthirmuhammed9497
    @muuthirmuhammed94976 ай бұрын

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

  • @jamiewp

    @jamiewp

    6 ай бұрын

    Yes you can create your own templates

  • @john.helyar
    @john.helyar8 ай бұрын

    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

    @jamiewp

    8 ай бұрын

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

  • @john.helyar

    @john.helyar

    8 ай бұрын

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

  • @surjaa.c
    @surjaa.c9 ай бұрын

    From where are you getting the time to read block?

  • @jamiewp

    @jamiewp

    9 ай бұрын

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

  • @aditmb
    @aditmb9 ай бұрын

    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

    @jamiewp

    9 ай бұрын

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

  • @aditmb

    @aditmb

    9 ай бұрын

    @@jamiewp thanks for the answer 👌🏻

  • @gashumba888
    @gashumba8889 ай бұрын

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

  • @jrmc732

    @jrmc732

    8 ай бұрын

    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
    @markw.618 ай бұрын

    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

    @jamiewp

    8 ай бұрын

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

Келесі