Watch this before you try Twenty Twenty-Four theme for WordPress 🫣
Вставка
- Опубліковано 17 чер 2024
- In this in-depth look at the new Twenty Twenty-Four default theme for WordPress, I walk through how to build pages with group blocks, turn those groups into reusable patterns, and use the site editor to customize styles and templates. I compare the WordPress approach to themes like Kadence, show how to work with template parts like headers and footers, edit navigation menus, and leverage the power of the query loop block. While not yet perfect, Twenty Twenty-Four shows the direction WordPress is headed for easy site building without needing page builders or premium themes.
✅ Chapters:
00:00 - Intro
02:00 - On-page editing with groups
05:30 - Creating reusable patterns
09:00 - Using the site editor
13:30 - Editing templates
17:00 - Working with template parts
19:30 - Navigation
22:00 - The query loop block
25:30 - Recap
✅ Important URLs:
WordPress 2024 Theme - wordpress.org/themes/twentytw...
Cadence Theme - www.kadencewp.com/
Subscribe - thewpminute.com/subscribe
✅ Top 5 Takeaways:
Groups allow you to style sections of content and turn them into reusable patterns.
The site editor lets you edit styles, templates, and parts for the whole site.
Template parts like headers and footers apply across templates.
The query loop block customizes how posts/content are displayed.
While not perfect yet, TT4 shows the direction WordPress is headed for easy site building.
✅ Support the channel & get WordPress news!
WordPress news: thewpminute.com/
Subscribe to the newsletter: thewpminute.com/subscribe/
Donate to us or join the membership: thewpminute.com/support/
#WordPress
#WordPress2024
#WordPressTheme
#WordPressTutorial
#Gutenberg
#BlocksEditor
#SiteEditor
#Templates
#Patterns - Навчання та стиль
Over the years, I went through using the initial old-style themes, modifying child themes, designing my own themes (too much work), to GeneratePress (I have the full license), and have now decided to go all in on WP block designs starting with the 2024 theme. It looks to me like this theme can actually create any look you want if you put the effort in. Thank you for the tutorial! I didn't quite get it until you ran through the comparisons to Kadence.
Thanks for watching, Jerry!
I really like Template parts and patterns options, this really helps in adding your own custom sections anywhere on your website.
"Thanks for your clear and helpful content - you're a lifesaver!"
Like this direction & I like the idea of updating the patterns instead of a whole new Theme... Great job, thanks
Great explanation! Thank you for the video.
Thank you for this. It helped clear up a lot of comparison confusion for me.
You’re welcome!
Thank you so much for this great video.
Thank you for this great explanation and also a short tutorial. I have seen until now a lot of tutorials for the new theme, but you are the only one that answers the questions what is the difference between patterns, template parts and template pages. I also like the use of blocks. My only fear is with using blocks, that if you nest blocks in blocks, that it takes space in the output. That was always my problem in programming sites and using divs or sections.
I haven’t explored the different type of markup these output, but maybe a good idea for a future video! Thanks for watching and commenting.
Thank you Matt. This is exactly what I need and at the right time. Your presentation is great and right to the point. I look forward to exploring more of your work as I create a new website. For years I have been paying for themes and last year opted for free versions. But the free theme versions are restricting me with regular features offered in Twenty twenty-four. Thanks for your efforts Matt.
Thanks for watching!
What I like about annual themes is the ability to set the stage for the next year of site theming. It’s still fun and interesting to come together and build on top of all the latest tooling. I’d like to explore themes that can have patterns added post-publish, say via a patterns directory collection-which would allow us to push more patterns over the air to themes, instead of scary updates. :)
We built a few small business sites last year using only Twenty Twenty Three and while it was a bit of a learning curve, I really love it. I know a lot of people are hating on the FSE + Gutenberg, but it just feels like I'm finally working in WordPress again vs. WordPress + A Million 3rd Party Premium Themes and Plugins. They all just became so cumbersome. I love the simplicity of WP again. We're about to start another site using only Twenty Twenty Four and looking forward to being able to build on what we learned with Twenty Twenty Three!
Thanks for this video!
Glad it was helpful!
Superb explanation, thank you. So many well-intentioned "how-tos" just go through a bunch of the commands without showing the bigger picture and how it all fits together. This was exactly what I was looking for, as I am considering using the WP 2024 theme rather than one of the featured ones. I am still a bit fuzzy on just how the header works, so maybe I will give Kadence a try.
Your video confirmed what I had suspected, that the built-in WP themes are getting considerably more complete and capable. Worth keeping an eye on in the future. Thanks again!
Thanks for the comment and for watching!
Good WP tutorial. Thanks.
Great video. Soon we’ll get the WordPress pattern directory as rich as Kadence’s. It’s just a matter of time and effort at this point.
Matt, this is an excellent introduction to the new ways of building pages directly in WP rather than other themes or page builders. I'm glad you started with how to build boxes, using Groups and columns and other things. That's very much in the same style as making any post or page with Gutenberg, and it makes a lot of sense. But the site editor is still quite confusing to me! Hopefully they will "Gutenberg" it one day... Thanks for the demo.
thank you, It is beneficial for me as a new WP user as well!
Great to hear!
This video was very helpful as I adjust to the changes in WordPress over the past few years.Thank you! I have been on classic editor and finally switching over now. I am running a multi-site install with a few sites. If I make template edits to Twenty Twenty Four on one site, is there a way to make that available on other sites? (I want my header, footer, some style changes, etc. available to multiple sites. Thanks!!
Thank you. This was very helpful. I would appreciate some more content focussing on responsive design with theme2024 - what's your thoughts on this? Thx
Thanks for the overview tutorials. Can you come up with a more tutorials on custom heads; footers and full width page.
Dude, I also refer to the List View as "Block Navigator". 😅 That's what WP should have called it ❤
I also like your use of the term "Featured Themes". I use Kadence too and that's a good name for that type of product. I guess Power Themes would be another.
Good presentation.
Hello Matt. Great explanation and thank you for all your job. Probably, you have mentioned, but I can't get it out as english isn't my mother tongue and also I'm pretty new to these issues: One editor is Kadence (understood that), but the other, is it Gutenberg that comes natively with WP6.4? And, apart of Gutenberg, does WP6.4 brings natively any other way of editing sites? Thank you. All the best. Duarte Lisboa
Great job explaining the overview of the building "blocks". Also finding the Header and Footer in the Pattern area was worth the price of admission by itself! Do you have any videos on headers and footers in more depth? For instance, my header shows on all my pages but the footer is not, and I can't find a place to tell it to apply it to site (or pages).
I did make a video specifically for header/footer for TT4
Definitely better to have one theme with more patterns in my opinion! However, from what you've shown I'm getting the impression that the controls and settings throughout different WordPress themes are identical, the only thing that changes with the new annual designs is the homepage out of the box? Plus I guess you can copy stuff from different themes and just paste it in? One feature I'm really missing is different menus for desktop and mobile and more customisations in the mobile menu - what if I don't want it aligned on the same side as the desktop or want it transparent? I guess the way to achieve those things is through adding some custom code to the header through the HTML editor?
Thanks for this video. Is there any way to have a link for each section of the homepage ? In my case, I want a one page website and want the menu to point to each section of the homepage. Thank you.
Thanks Matt. I've been tinkering in Twenty Twenty-Four and this video helped shine some light. I miss straight forward nav, what am I missing, with how menus are built?
See my other video about headers and footers. The menu will be in the header template part.
Thankyou very informative video you inspired me to just start another website from scratch. But I'm also curious as to how this works on an existing website. For example I have activated the 2024 theme on an existing website. I created a test template and made a sidebar but I have no idea how to use that template with pages/posts that are already on the site. This issue is the same for other parts, like if I create a template, how do I allocate it to certain posts?
It depends on what theme you were running before. If you were using a default theme, posts and pages should work okay. If you came from a 3rd party theme, or custom post types, you will have to create a template that targets those.
Your video was not too long, it was just right! I've had some problems with that 2024 theme and watching the past couple of videos you've done on it helped a lot. Some of the experience is not particularly intuitive - like you pointed out why are the template parts (header and footer) buried in the patterns section? I like where it's all going but the learning curve has been a little bumpy.
I’ve got another video coming to recap important areas!
Yea, perhaps template parts should be moved back to the templates view. I’m finding that a bit odd as well.
Thank you for the video, nice presentation. I like this theme, I am going to use it on several websites.
At 22:12 you show a beautiful menu on the admin panel Appearance, as following: Themees / Customize / Widgets / Menus / Block Patterns / Kadence / Elements / Starter Templates / Theme File Editor.
But on my website I can only see Themes and Editor.
Can you please tell me, what should I set or install to activate all these functions?
That is part of the Kadence theme. I was comparing what core WordPress gives us vs. what 3rd party themes like Kadence have available.
Great video. It was a good idea to also show Kadence. The issue is that while you built Groups from scratch in the regular builder for some reason you skimmed that in Kadence and started showing prebuilt patterns. That's where you could have been guilty of going off topic.
I did like the video though. Kadence is amazing by the way. It's a good next step from the default theme.
Thanks, Mike!
Thanks for the clear tutorial. I return to WP to try it out after watching your video. I guess I don’t need to use a child-theme for customisation any more.
Will all of the changes and patterns that are created directly in Wordpress stay intact with the up and coming updates including the major branch updates? Will the styling and patterns work and remain intact with the 2025 theme if I update to it from the 2024 theme?
Thanks?
If you're making style changes in the 'Style Book' I'd say those will most likely be lost in a new theme. The patterns/blocks will remain, but will also look different for the future TT5 theme. As a side note, you don't _need_ to upgrade to the new theme when it arrives. The theme itself won't have new features, but it will/should have a new design.
Does this theme allow a menu navigation bar on top and one on the left-hand side? (Sorry, I know I should be able to find out for myself, but I am so tired of activating one theme after another only to find that they don't).
Have you checked Ollie FSE theme? It is amazing. Full of great patterns, page layout templates and so on. Could be a nice theme to make a tutorial.
Yep I looked at it. I’m not as impressed yet :)
I tried it and it’s just not as robust as I’d like it to be for my needs.
Hi how can j change pattern in articles?
Overall a valuable video to prevent jumping before ready with this theme. Would suggest you do a dry run before recording, to avoid those bits where you appear to be fumbling. It detracts from the overall impression. Good delivery, appreciate not greeting us with WASSUP!
I am following your videos about TT4 for which I thank you very much. On this video you showed that you can apply different footers in different pages using Kadence while in TT4 you can customize footer template part and it will apply to all website. Nevertheless we could create different footer patterns and apply them in different page templates as we wish. Am I wrong?
Yes you can. And I’m glad you recognized the point of this video :)
Kadence will have more options than TT4 right now. I wanted to portray what’s on the market (a lot of themes do this) versus what we’re all getting out of core WordPress.
I’m old and have bad eyesight. Seeing what you were doing was difficult in many instances. We need bigger curser and slower to show what you’re teaching.
I see this is the direction we’re going. I will learn the basics and then hire a graphic artist/Techy to stay busy with the looks side. I’ll have my hands full working through advertising writing, reworking and writing articles.
I think it will all work out. For a non-technician like myself it’s going to require that I find a technician to help me. That’s good for the industry that has developed. Not so good for those of us who don’t have big money to invest. That’s modern life.
Thanks for the help. SN
Great tutorial, one thing I don't think you covered that I was trying to figure out is, how does it know that the "Blog Home" template should display as the site home page? How would I design a new template and use that one instead?
You have to set the blog “page” in the reading settings and then apply the template on the page you designated. It’s a weird extra step they created for sure.
@@WPMinute definitely not obvious. I figured it out, thanks. It seems like if you create a page using the Front Page template, it overrides everything else and sets that as the home page, and if you use Blog Home template and set the menu to go to the /blog page, it works as the blog home page. And then I have my reading settings to static pages, home set to anything (gets overridden by front page), blog set to blog page which is the "blog home" template.
Update: I now like the 2024 theme. I've edited the theme json file to my liking and I really like it now.
Thanks for all the info. Tutorial is done well, a little fast for us geezers, but good nontheless.
Thanks, Charles!
Navigation in Wordpress 2024 Theme is terrible, just admit it lol. I tried creating with it on a very simple clients site and struggled for hours trying to figure out how to even add hover, visited, active states for the links. I still haven't figured that out. I hate it. I've gotta switch to something else because I can't even find the CUSTOMIZER because they disable it when you enable the 2024 theme at least on my install. That's frustrating. There's NO DOCUMENTATION on where/how to even add custom CSS to work with the navigation for those hover, active, visited states!
Yep, navigation is still in rough shape. Customizer doesn’t exist for extensive customization on block based themes, at least for default themes. You want to head to the site editor for what you’re looking for.
What is the url to the blog home template when you are using a front page template.
It will be the page you set as the blog in the reading settings.
I created a site with TT3 a few months ago but when I updated to WP 6.4.1 and activated the TT4 theme all my templates were messed up, and I lost my custom CSS when switching back to TT3. Do we still have to use a child theme to avoid this problem? I've got dozens of sites created with TT3, and now I'm stuck not being able to use TT4 unless I start a new site with it. How can I avoid this same problem when WP 6.5 comes out?
Few things here: templates will probably be harder to transfer from theme to theme until there are advancements in global styling. Aside from that, templates will always trend to be the more unique aspect of each theme. Where you’d see greater portability is page designs via patterns and blocks. Aside from styling, the structure and content should transfer more smoothly.
The good news is, 6.5 won’t have a new default theme, unless they surprise us (which I doubt) default themes generally come at the end of the year.
@@WPMinute Thanks for the explanation. Heh, may I suggest that some good step-by-step tutorials would be about how best to migrate from TT1-TT3 to TT4, and also, how best to migrate a classic theme like Kadence to TT4.
I'm not sure if this answered the child theme question, which is my question also, because I know just enough to be dangerous. Should we still use a Child Theme with TT4?@@WPMinute @MarkConstable
Is there a way to create a hero page in 2024 that uses a full page video like in Inspiro? Thanks!
You would make a full page template with the video embedded. It’s certainly possible!
How to add more default fonts to Twenty Twenty-Four theme?
Your best bet is to install the Gutenberg plugin. That will enable fonts in the style book. WordPress 6.5 will also ship with that feature.
I have a "blog" page (homepage showing a static page, and in my readings setting, I chose a blog page). When I activate 2024, it shows its own bullshit content instead of my blog posts (a commitment to innovation...). How can I fix this?
It’s how the theme is configured out of the box, the way you fixed it is fine.
The question is, do we now go for row blocks? There are so many ways to do everything. I just want to be the one who did it right and doesn't have to rebuild it for every new theme.
Fuck build bloaters, Keep it CORE please.
Great video but how to call a template that I save to a page?
If you’re creating a template in the site editor, you can select the template to load on a page in the page settings.
where do you add custom sitewide CSS ? Where do you add header code?
Inside the Site Editor, you can click the '3 dots' icon and open up the additional CSS option. See here in this GIF cln.sh/nbsC2KXfJNKztPlfmNWD
For the header code, you can try a plugin like 'Code Snippets' Their free version will work.
When you increase the text font size in the Twenty Twenty-Four theme, for example to 1.1 REM or 1.2 REM, the text on the phone becomes very small.
If i am not mistaken, you can design for different media, just by selecting phone, tablet or full size icon. And you could copy the used template and adapt it to template for for example a phone media
@@joukenienhuis6888 No matter what I design, if I change the font size for the text in the general settings, that text will be very small on the phone.
Seeing you struggle with the navigation links is so painful :( Navigation is one of the most important parts of a website, and this UI/UX is horrendous.
I can't even imagine telling some of my clients to do this.
Maybe 6.5 will bring improvements...
Great video btw!
Yeah, there are some really rough parts still. :( Thanks for watching!!
A number of concepts to improve navigation are in flight. I’m particularly interested in the concept of having a mobile menu overlay that you can edit/style/add whatever blocks to.
hello, I chose the Twenty Twenty-Four theme, I can't publish the pages I prepared online.
You might need to check with your hosting provider.
I understand what you were doing to also explain Cadnace but all it did was confuse me. I had no idea what Cadance is so it did not clarifiy anything for me. It would be like me trying to explain to a aircraft mechanic how to overhaul an engine in a piston plane by comparing it to overhauling a jet engine. I just blanked out any reference to Cadence in my mind when it is mentioned. I'll never use Cadenance. Thanks for the video.
What I did was introduce you to the jet engine plane and what it has to offer over the tried and true piston.
If you knew nothing about planes and wanted to build one that could get 200 people across the country in 8 hours - now you know :)
@@WPMinute Thank you, love your videos!
Is there a child theme available for 2024? I'd create one, but I think the block editor needs a JSON file.
You can use 'Create Block Theme' plugin.
I mostly really enjoy the video. I’m relatively new to WordPress however, and the back and forth with Kadence very confusing. I kept looking for Kadence in Twenty Twenty-Four. It took me a while to understand that these were different themes and that you were contrasting paid things with core WordPress features. That was kind of distracting, and didn’t add any value for me.
I don't like the 2024 theme. I am using the 2023 theme but modifying it. Although I've been using WP for just over two years. I am basically inept with it. I find it all very confusing, compared with coding in HTML and CSS.
Which part don’t you like? The overall design or something else?
@@WPMinute Yes, the design. Even the 2023 theme has those large buttons which look too Bootstrappy. I've been using HTML and CSS since 1999, and rarely run into problems, but I just can't make WordPress look how I want it to look. I keep going back to it, because I hate being defeated.
@@Jack_Warner haha! Winners never quit!!
I'm ashamed to say I'm struggling with customising twenty twenty-four. I want to eliminate all the page builders, the elementors, and full fledged theme framework packages etc... A lean Wordpress is a healthy Wordpress is how I feel. It was so easy working with PHP directly and creating tag.php (or any of it's parent pages)... as it stands, I can't even manage to get my Tag pages to display the description of the tag 😂. I thought it would be under Templates in the editor, where you can customize Search Results, Single Page, Page No Title etc.. etc.. - but alas, failing miserably. I'm tempted to just go ahead and make tag.php but then I'm going against the point of this theme paradigm!
It's really about the Full Site Editor lacking the features to customize specific category/tag templates. You can create your own, but they will load for ALL categories/tags archives. Until those features are introduced, there's nothing else to do other than custom coding or using a plugin that does it for you.
Kadence, not Cadence :)
Otherwise, very interesting. Thx!
That's what happens when I post without drinking my first cup of coffee!
If only we could get rid on these nuclear bright white background colors, that kills modern LED monitors and our eyes. And it is just out-right ugly.
Why did they move away from **whatever it was that was so much more intuitive that I used few years back**? Nothing about this editor feels intuitive at all.
Dude, you eventually lost me by switching between explaining WP 4 and Cadence. I don't care about Cadence and don't want to know how it's different from WP 4, because I have never used it, I don't want to use it. And trying to remember how to work 4 at the same time that I'm trying to not get confused by your endless talk about Cadence, is ridiculously cumbersome. You should warn viewers that half of your talk is going to be about something completely irrelevant to WP 4.
I did warn you in the intro :) I have lots of other TT4 videos if you’re looking for other areas. It’s important to show you what’s available in other themes so you realize there’s more out there than core WordPress.