Block Themes From Scratch: Part 2 - Theme Templates
ฝัง
- เผยแพร่เมื่อ 19 มิ.ย. 2024
- ‼️ Important note: Do NOT reuse the query loop for the search template (46:02) as I show in the video. Instead, create that section manually or use the "detach" feature to include the query loop block in the template file directly.
In this Part 2 video, we create the core structure of the WordPress Block Theme. We build the critical theme files, 8 key theme templates, and 3 template parts, including the header and footer. In the next video, Part 3, we'll customize this Block Theme with theme.json.
🧰 Resources:
• Block Themes From Scratch Series Playlist: • Block Themes From Scra...
• Configuring WordPress with WP CLI: • Configuring WordPress ...
• WordPress is designed for everyone… Just not for us: • WordPress is designed ...
🌐 My Websites:
• adamlowe.io
• peakperformancedigital.com
✅ Connect with Me:
• Facebook: / peakperformancedigital
• LinkedIn: / adamshawnlowe
• TH-cam: / @adamloweio
• Twitter: / @adamslowe
⚙️Tools I Use:
• WordPress.org: wordpress.org/
• Pinegrow Website Editor: pinegrow.com/
⌚ Timestamps:
00:00 Introduction
02:05 Theme Files
05:26 Header Template
13:49 Footer Template
18:34 Index Loop
25:31 Patterns and Template Parts
27:58 Page and Post Templates
36:13 Front Page Template
37:20 Archive Template
38:22 Query Loop Template Part
41:53 Query Monitor
43:38 Home Template
46:02 Search Template
47:10 Block Themes vs. Classic -- A Rant
49:12 404 Template
50:22 Outro
This course is what we need, thank you.
LOVE the transparency and honesty in the intro, Adam!
And the straightforward explanation in this series has been terrific thus far. Definitely eye-opening for me.
Holy hell. I don't think I want to bother with block themes. This is crazy.
It’s batshit until you get the hang of it. Then it’s just annoying like a bad toothache. (I’m really selling this, aren’t I?)
Great Video! Thanks for sharing your experience.
What an insightful watch. Thanks for the video, Adam! I'm even starting to get an idea of what the worflow might look like.
The discrepancy between the styles in the block editor and the front-end is one of my biggest pet peeves as well - especially when they have to do with layout, as was the case in the video. I find it makes it much harder, not only to get a sense of what the page will look like, but also to stay in flow. I would 100% ahve switched to trying to understand the details of what was going on, and possibly to try to fix it, ah! 😅
A lot of it will start to come together when I introduce theme.json next week, which lets us turn on key features of the block editor, set css variables, and define our default styles.
@@AdamLoweIO Sounds neat. I started to play with it a little over the past couple of months (if only a little) to transform classic themes into hybrid ones. Can't wait to learn more!
Adam, thanks for this fine series of videos on block themes. I'm curious, though--why do you make your inner container a Row block when there are not side-by-side elements, and not just a Group? Is it because the Row gives you the option for side-by-side elements, when you might not know how a design is going to evolve, or is there another reason? I realize that both blocks translate to divs in the source code, but I'm wondering if I'm missing something here.
Lol I feel seen regarding the comments you're adressing 🙃 I haven't watched the whole video yet, but this prompted me to react:
Just for clarification, I wasn't saying it in a bad way at all. It's more that I find it interesting, I suppose: I love the fact that you have a complex, nuanced opinion - especially in the world of oversimplification, generalization and hyperboles that TH-cam can somtimes be. I tend to look at the world through the same lens, and to be very much on brand: while I will eagerly follow the rest of the series, I'm not sure yet that block themes are the approach I'm gonna adopt for client websites just yet 😅
Haha. It wasn’t just you, I also had several people message me privately. I’m so disgruntled by the whole Gutenberg Project, but it is what it is so I can either learn to deal with it or switch platforms. Unfortunately, page builders aren’t a good solution for the scale and scope of many of the projects I work on.
Hi Adam, this afternoon I followed along with this video, and I'm absolutely amazed at how easy it was to understand. The Template hierarchy, has always baffled me. I'm a little nearer to understanding something that makes no sense. But I really enjoyed this. Thank you very much for taking the time to make this series, and for educating us. xxx
Thanks for the kind words. Once you wrap your brain around the hierarchy, the rest all starts to fall into place. Let me know if you have questions or run into trouble.
@@AdamLoweIO I do have a question regarding that 'Front Page' Template. Where does it obtain its content from? I've been using a Front Page Template, but I've been adding my content to it, such as Hero cover images and Cards. Something tells me I shouldn't do this.
@Sonya_Makepeace the front page template is used to show the content on the front page if a static page is selected in settings > reading. (developer.wordpress.org/themes/functionality/custom-front-page-templates/#template-hierarchy-of-custom-front-page)
It gets the content from whatever page you select in settings > reading.
By default, Wordpress doesn’t show a page on the front page. Instead, it uses the home or index template, which normally shows your blog posts and some other content. This all stems back from the days when WP was mostly meant to be used as a blogging platform rather than for general-purpose sites.
@@AdamLoweIO Ah, now that's interesting, because I made an alternative archive page for the 2024 theme afew weeks ago, but I could only get the default archive to load. I asked another You Tuber about this and he told me that I shouldn't have a Home page in the theme. So when I deleted that Home page, I was able to load my new archive page. This is why I get confused with WordPress. Nothing is straightforward.
@Sonya_Makepeace you hit the nail on the head; nothing is straightforward. That’s especially true now that we have block themes, classic themes, page builders, headless, and a bajillion other ways to accomplish similar goals. There are good practices but there is rarely a single “right way” to do anything.
Great Video! Part 3? Hopefully covering theme.json
Yes. I’m aiming for Wednesday or Thursday this week and it will cover theme.json and style variations. I forgot that today is a U.S. holiday and they screwed my schedule up.
amazing video.
Thanku..
just one suggestion, you should have made one video on wplocal as well. somehow i figured out but it was hectic.
Thanks for the suggestion. I cover it in other videos, but you are right they are standalone video explaining how and why to use a local workflow (LocalWP or other solutions) would be beneficial.
Very beautifully explained video! I have been working on block themes to create one for my publication site, and I have a quick question. I saw you used VS Code to create a blank theme, but my question is, could we instead use 'Blank Canvas' theme? What is your thoughts?
Yes, blank canvas is fine. I just wanted to show all the steps behind the scenes.
@@AdamLoweIO Awesome! Subscribed. 🙂 Your channel is like a hidden gem when it comes to WordPress Blocks 😀 A really great job!
I have a few questions in my mind, how can we create complex navigations like sidebar navigations?
The navigation block is one of the weakest blocks WordPress offers. I almost always end up creating a custom block for navigation or using a 3rd party block.
Adam, I have a question regarding the search template. If I search for a certain title, or word, I get the whole archives list showing up. Similarly, if I click on a category, I get results for all categories. I'm sure there's a fix for this because if I use the 2024 theme it works. What am I doing wrong?
There could be a few things going on, but it sounds like the main loop is showing rather than the search query. I'd start by installing query monitor. That will let you see which template you are using when you get to a search results page. Once you have verified that the search template is being used, you'll need to make sure you are using the Query Loop block to show the results, and you probably want to have the "inherit query from template" setting toggled on.
@@AdamLoweIO Good advice, i'll check that and let you know.
I get the same - the category archives are listing every post in every category. I think it's because, following Adam's guidance, we copied the named query loop from the index page. I deleted that loop from the archive page, then added a new default query loop, and it works OK.
@martintaylor5949 interesting. I know it works on the site I built from the videos, so I may need to go back to see what I didn’t explain properly or just plain screwed up.
@@martintaylor5949 That's exactly what I've done. I made my first query loop a pattern and put it on my archives page, and it all got messed up from there. I still haven't got around to sorting it out, as i'm erecting a fence and it's taking up all my time.
I think I'm officially an "old man shouts at clouds" now. When I see the HTML that the WP editor produces, I see tons and tons of css classes on each tag, and I think "what an unreadable, unmaintainable mess". If I handcoded the same page, it would be one tenth the size, load faster, and more developer friendly (= code is more readable). With fast internet speeds nowadays, perhaps the bigger page weight doesn't make much of a difference. Also, why the hell do we have to type CSS like declaration into a JSON file? You'd think CSS code goes into, you know, a CSS file. We have CSS! And while it's nice to create a page design and styling with just a mouse, I think and experienced front end developer can create the same layouts quicker just by typing code. OK I'll shut up now. I'm just ranting, I know. I will be dragged into this new way of doing kicking and screaming, that's for sure.
I'm right there with you! Some of the decisions WordPress have been making lately are straight-up baffling. Of course, they are switching from a traditional PHP/HTML/CSS workflow to more of a component-based React workflow, so some things are naturally going to look odd. Still, it all feel like a strip of duct tape slapped over some super glue.
Hi Adam. I am having doubt that, I created template for Blog home. But how do i use that template ? Do i have to create a page ? if yes how to choose this template ? Thanks.
The behavior of the Blog Home template is dictated by the WordPress Template Hierarchy (wphierarchy.com/). The hierarchy just calls is home.php, but the site editor gives it the friendlier name. By default, it will apply to the site's homepage unless you have changed your homepage settings in "Settings > Reading" to a static page. In that case, it will apply to whatever you have set as your blog page. (wordpress.com/support/reading-settings/#reading-settings)
@@AdamLoweIOThanks !!
Waiting for the video where Pinegrow comes to the rescue 🛟
I wish I could say that it does come to the rescue. It does help an awful lot to be able to quickly make custom blocks, but there are still so many quirks with FSE that custom blocks can’t solve.
So I guess Pinegrow will be limited to the creation of blocks importing them as a plugin. Great video by the way.
That’s my understanding based on a few conversations with Matjaz and Emmanuel. I know they are looking for ways to streamline things since since there are so many challenges (opportunities for improvement) with Block Themes, but it sounds like they are tossing very preliminary ideas around to see what is possible or what might be useful.