PRO Themer builds a WORDPRESS website with Twenty Twenty Four
Vložit
- čas přidán 21. 07. 2024
- I'm joined by Maggie Cabrera, co-lead for the Twenty Twenty Four Theme in WordPress 6.4, as we build out an entire website from scratch for a fictional business.
🔗 Resource Links - please see pinned comment (below).
⏱ Timecodes
00:00 Intro
00:25 Welcome
00:51 Who is Maggie Cabrera?
01:52 Rules for the website build
03:13 Website build (Start)
04:09 Home page template selection
05:18 Styles & Color
07:50 Changing Fonts (Typography)
09:41 Logo and site name
10:48 Adding Homepage Content
13:25 Renaming Homepage Sections
15:23 Blog Post Listing (Query Loop)
16:37 Adding a Background Image
17:16 Preview the Homepage
17:55 About page template selection
19:52 Accordion using Details Block
20:51 Hiding the Page Title
21:39 Our Team page creation
23:04 Customising a Pattern in the Editor
26:13 Lightboxes for Images (Zoom)
27:17 Pricing page
29:13 Navigation Menu updates
30:42 Reusing Content across pages
32:45 Website review
33:15 Switching to Twenty Twenty Four
33:49 Previewing a Theme in WordPress
34:27 Feedback & Questions on TT4
35:20 Follow Maggie Cabrera
35:45 Goodbye
Note: MusoPress is a fictional business and no trade mark violations are intended. If you become aware of a trademark violation please let me know in the comments. - Věda a technologie
I have been using wordpress for about 20 years. I never used the standard install theme. But having started a new site for myself and seeing the WP was offering an new version and new theme I thought I would give it a go. I always preferred to javascript my needs into WP but this new theme looks like it will convince me to start working with blocks more as it is offering solutions that I once had to code in. And I found this video a great starting place.
(I) Could do with a manual.
It's great to hear you are considering giving blocks a go. It's not perfect but it will only continue to get better with each release. The pace of progress is rapid.
Glad the video was helpful to you! Maggie did a great job.
@@DaveOnWP Actually I havent been using WP for 20 years lol it ain't that old. I have been a web designer on and off since the mid 90s and I started my own site about 20 years ago, coding 'by hand' so to speak. I guess I started using WP about 8 years ago. In fact although I have continued to code private projects even through WP I stopped designing for others a long time ago.
I really like the direction WP is going. Looking forward to seeing it develop. Thanks for sharing your skills and knowledge.
@@TheCompleteGuitarist Hi Can you guide me, I want to build editor option like latest wordpress theme in my custom theme, Do you how I can achieve this
Thanks Maggie Cabrera and Dave and for this verry helpful and valuable content in this brief overview of the new Theme! The Twenty Twenty Four Theme is a good basis, good work!
You are very welcome. We felt a practical guide would be best rather than just showing all the features. Glad it was useful!
Dave & Maggie I must say this was breathtaking more simplified though a steep learning curve working with Wp Block Theme
Great stuff! So useful to help people get started with site building in WordPress.
Thank you. I'm glad you found it helpful!
excellent tutorial - love this theme... thanks
After years of passing through different themes. I have decided to make my last chance with your theme. It looks great and i wish that you enhance it for woocommerce too. It is just awesome theme
Truly good content!
Fantastic stuff thank you so much!
You are very welcome! If there's anything else you'd like to see covered please let me know. I'm open to suggestions.
If you like this, you might also enjoy this video I did which covers all the features in WordPress 6.4 (latest version)
czcams.com/video/erT8LxuI5r4/video.html
🔗 RESOURCE LINKS 🔗
⬇Download Twenty Twenty Four Theme - wordpress.org/themes/twentytwentyfour/
👀Theme Demo - 2024.wordpress.net/
🦺Twenty Twenty Four Theme support forum - wordpress.org/support/theme/twentytwentyfour/
✍Review TT4 - wordpress.org/support/theme/twentytwentyfour/reviews/#new-post
🧰Create block Theme Plugin - wordpress.org/plugins/create-block-theme/
📖Core Details block documentation page - wordpress.org/documentation/article/details-block/
Follow Maggie on X (Twitter) - twitter.com/one_maggie
HI! very interesting video.
I have two questions:
1 - Do you recommend creating a child theme even if you make very few changes?
2 - If I want to change to another default WordPress theme the content would adapt better?
Thank you!
is there a way to use a custom font? like uploading it to the wordpress and using a font customizer? is just that ned to use a specific font
At this time I would use wordpress.org/plugins/create-block-theme/ to achieve this.
In the future this functionality is likely to be bundled as part of WP itself.
Hey @TFGourmet in the upcoming WordPress 6.5 one will be able to upload fonts.
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.
Hi there. Yes you can do this.
- Make each "section" you want to link to a "Group" block (it might be this already).
- Select the section Group block and open the block's right hand sidebar ("Block Settings").
- Look for "Advanced" -> "HTML Anchor"
- Type in a unique slug for the section (e.g. `welcome-home`). Note the instructional text below the input for more information on what you can place here.
- Repeat for each section you want to link to.
- Save the Site.
Now in your Navigation block:
- Click + to add a new menu item
- In the search box type "#" (no quotes) and then the slug of the section you want to link to (e.g. #welcome-home ). The "#" tells the browser that this is an internal link.
- Repeat for each section.
- Save
- Go to front of your site and clicking should jump to the section.
If you want smooth scroll you might need to look for a simple Plugin like this one which will smooth scroll when you are moving between internal anchor links (note I did not test or endorse this Plugin - I just found it):
wordpress.org/plugins/page-scroll-to-id/
I hope that helps?
@@DaveOnWP thanks, Dave !
I have question regarding page templates (maybe I'm using the wrong terminology here), but what I'm trying to create is a page template or layout using all of the blocks and/or patterns that I want to have on a page, and then save that page layout so that I can reuse it multiple times. For example, Let's say that I have 6 categories and would like to have a page for each, but still keep the layout of the page uniform across all 6 pages. In the end, I'd like to be able to create a new page, pull up this category template, and then add the items associated with that specific category. Every attempt that I've made always results in a blank page. Not sure if I'm supposed to populate the blocks with content (only to delete it and add the correct category content later), but when try to create the template by just adding the blocks and patterns that I want on that page, and the save it, I can never find it later. What am I doing wrong?
That sounds like a tricky problem.
Typically the WordPress template hierarchy allows you to define a `category.html` (in Classic WP this was .php but we'll use .html here) template which is the template that will be used for ALL categories.
If you need a layout for a specific category then you'd need to follow the hierarchy and create templates such as category-{slug}.html or category-{ID}.html (replace the bit with brackets with the correct value for your site).
So using "Pages" probably isn't the correct approach which is why you are finding it so difficult.
In the site editor sidebar you can create a template for a specific category: under Templates, click on the + > Add template: category archives > Category (for a specific item) > select the category and then create the template there.
I hope that helps? If not then maybe you could share a video for us to better understand the issue?
@@DaveOnWP Hi Dave, thanks for the reply, and for the great video. Please allow me to explain further, and hopefully my goal will become clearer. In your video, you guys used the supplied Homepage design/template and modified it to make it your own by replacing the original image with a new piano image and you also modified the text on the page. I'm assuming that if you wanted to, you could have added a New Page, and once again imported that original Homepage design supplied in the theme, and then customized it so that despite having a similar layout, the content would be different from that of the Homepage. What I would like to create, is a similar page template with a look and layout of my liking and save it as a template, so that I could pull it up and use it multiple times on the website. In my case, I would have buttons on the homepage that when clicked on, would open to a page that represents the topic/category assigned to that button. So, if I have 6 topics/categories, I will then have 6 buttons/icon on the homepage, and each one would link to its respective page. Ultimately each page would use the same layout, but just like in your video, I would have the ability to change the content to match the page's specific topic. In short, how do I go about creating a page template such as the homepage template supplied in the theme? I've tried doing so by creating a page, adding the blocks that I want, and then saving it as a template, but then I can't pull it up since it doesn't get added to My Templates. I've even tried (and I'm sure it's wrong) to add it as a Page template on the right where you can change from Pages to Full Width Pages. I'm sure I'm doing something wrong.
@@DaveOnWP @DaveOnWP Hi Dave, thanks for the reply, and for the great video. Please allow me to explain further, and hopefully my goal will become clearer. In your video, you guys used the supplied Homepage design/template and modified it to make it your own by replacing the original image with a new piano image and you also modified the text on the page. I'm assuming that if you wanted to, you could have added a New Page, and once again imported that original Homepage design supplied in the theme, and then customized it so that despite having a similar layout, the content would be different from that of the Homepage. What I would like to create, is a similar page template with a look and layout of my liking and save it as a template, so that I could pull it up and use it multiple times on the website. In my case, I would have buttons on the homepage that when clicked on, would open to a page that represents the topic/category assigned to that button. So, if I have 6 topics/categories, I will then have 6 buttons/icon on the homepage, and each one would link to its respective page. Ultimately each page would use the same layout, but just like in your video, I would have the ability to change the content to match the page's specific topic. In short, how do I go about creating a page template such as the homepage template supplied in the theme? I've tried doing so by creating a page, adding the blocks that I want, and then saving it as a template, but then I can't pull it up since it doesn't get added to My Templates. I've even tried (and I'm sure it's wrong) to add it as a Page template on the right where you can change from Pages to Full Width Pages. I'm sure I'm doing something wrong.
amazing
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.
Thanks for your feedback. I'll be sure to pass this on to Maggie and the other folks working on the default Theme for the next release so hopefully we can have better options for font size.
I absolutely agree. The jump from the default (Medium) to "Large" is too extreme.
I think perhaps another size would help here.
Obviously you can use a custom value using the toggle to the top right of the font size picker, but that's not ideal.
@@DaveOnWP Thank you for your response. Maybe you didn't understand what the problem was. The big jump from Medium to Large is not a problem. It is not a problem to change the text font size manually. The problem is that when I change the text font size manually (to any size) the text font normally increases on the desktop, but the text font size decreases on the phone. So the problem is that the text font size is displayed incorrectly on the phone.
@@DejanBuric Thanks for clarifying. I'll pass that on as it sounds like a potential bug.
For a WP tea, i was expecting a easy flow through the templates and the parts and configurations. The presentation was kind of a discussion but that also defeats the short time to go through the different aspects one would like to see and learn.
May be this feedback will help you to be prepared for the next presentation.
Always happy to receive feedback.
I don't think building a Theme would work well in a short video presentation. In fact Maggie and I did prepare for this discussion otherwise it would probably have been x2 as long 🙂
That said, I'm sure we could slim this done for a future episode.]
Appreciate you taking the time to let me know your thoughts.
What if you wanted drop downs on your top nav items? This is where I find things get bothersome.
Thanks for the comment.
I'd love to understand more about the struggles you've have with dropdowns. What specifically makes this challenging? Your feedback would be much appreciated.
@@DaveOnWP I would simply like to learn how to build them out without using code (except maybe css) or a plugin? It would be good to have transitions on the drop downs as well.
Yes you can do this by adding submenu blocks. Please see this video
d.pr/v/nviE9P/vhlTw9Ra3h
How to show custom field (image type) on post front end?
The editor doesn't handle custom fields that well at the moment. That being said, the next release of WordPress coming in March/April should ship a new API which will ultimately lead to the ability to create/update custom fields and attach these values to blocks.
You can follow along here
github.com/WordPress/gutenberg/issues/53300#issuecomment-1910659879
Hello can you please make a video on customisation for mobile view in block editor. Without or minimal usage of plugins
Hi there. This isn't a topic I will be able to cover as I don't specialise in Plugins.
The editor's focus is on intrinsic design principles which (ideally) avoids the need for customising the layout for specific device sizes. Rather the content should auto-layout.
There are always scenarios where this breaks down and WordPress is looking into these specific instances to try and enable work arounds for users. For example in the Navigation block:
github.com/WordPress/gutenberg/issues/43852
In general though, it's doubtful you'll see any kind of controls that control things based on screensize in WP Core.
There are a lot of Plugins that seem to provide this feature though so worth checking one out.
Sorry I was't able to be of more help this time.
@@DaveOnWP thanks for the help sir. Hope WP teams considers this and acts sooner.due to the increased use of mobile devices. I love your content sir. As I am a new learner and trying to work using Gutenberg and minimal plugins.
@@vinayp5944 You are welcome. Rest assured the developers working on the project are very aware of the requirement and are always working on the best possible solution for the long term.
In the meantime, I would definitely do some research into Plugins that might provide the stop gap you are looking for in terms of fine grained responsive controls.
The Plugin ecosystem is what makes WP great. I would recommend you continue to adopt your current strategy to use the block editor but extend it as required with minimal Plugins.
Been working with this theme past 24 hours - been finding that building navigation is difficult...
Hi Stephen. Thanks for your feedback. Hope you're made some progress with your Theme?
I agree that Navigation can be...challenging. As someone who works on this feature quite a bit I wonder if you would be willing to share any specific issues you've encountered?
For reference here is the place where we are tracking all the outstanding tasks for the block:
github.com/WordPress/gutenberg/issues/38275
I'm a 100 Beginner to WordPress and have been advised not to use Twenty Twenty Four theme as it's too difficult for beginners. I am struggling through the middle of it all to work it out. What do you suggest, persevere or go to an earlier theme?
I think TT4 is probably the best theme to use right now, even for beginners.
Which parts are you struggling with specifically?
I've been reading heaps and kinda understand the names and concepts but I can't even get my front page template connected to a page properly. Currently I have a new page, I attempted to apply the template but it won't show in editor but shows in View page. I'm worried now that with all my tinkering I've damaged stuff. @@DaveOnWP
Dave - that is great - you inspire WordPress-user - all over the globe: ❤ 😊👍 👏👏💥 🎆💥🎆🌟🌟🌟🎆💥👏👏👏👏👏🎆 plz keep up your great work we love you... ;)
Thank you 🙏
You mention a font plugin, but I'm not seeing it pinned in the comments. Fair warning, it might be right in front of me and I still may not see it. But thanks for adding it if you have it handy.
Ah sorry if that wasn't clear. The Create Block Theme Plugin (wordpress.org/plugins/create-block-theme/) allows you to:
- Embed Google Fonts in your theme.
- Embed local font assets in your theme.
Install and activate the Plugin and then look for the "Manage fonts" screen.
I'll be doing a video on this topic soon - make sure you subscribe to avoid missing it.
Also, if you enjoyed this video, you might also enjoy this video I did which covers all the features in WordPress 6.4 (latest version)
czcams.com/video/erT8LxuI5r4/video.html
mobile view doesnt work
Great tutorial 😂
Thanks 😅