Block Themes From Scratch: Part 2 - Theme Templates
Рет қаралды 4,607
Күн бұрын‼️ 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
• KZfaq: / @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
@jamesrushton2441 Ай бұрын
This course is what we need, thank you.
@markjszymanski 6 ай бұрын
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.
@Sonya_Makepeace 5 ай бұрын
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
@AdamLoweIO 5 ай бұрын
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.
@Sonya_Makepeace 5 ай бұрын
@@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.
@AdamLoweIO 5 ай бұрын
@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.
@Sonya_Makepeace 5 ай бұрын
@@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.
@AdamLoweIO 5 ай бұрын
@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.
@bluetheredpanda 6 ай бұрын
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! 😅
@AdamLoweIO 6 ай бұрын
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.
@bluetheredpanda 6 ай бұрын
@@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!
@estevancarlos Ай бұрын
Holy hell. I don't think I want to bother with block themes. This is crazy.
@AdamLoweIO Ай бұрын
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?)
@carolway3674 4 ай бұрын
Great Video! Thanks for sharing your experience.
@bluetheredpanda 6 ай бұрын
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 KZfaq 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 😅
@AdamLoweIO 6 ай бұрын
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.
@douglasallen5243 6 ай бұрын
Great Video! Part 3? Hopefully covering theme.json
@AdamLoweIO 6 ай бұрын
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.
@strongerartist 2 ай бұрын
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.
@Sinha.ritesh 2 ай бұрын
amazing video. Thanku.. just one suggestion, you should have made one video on wplocal as well. somehow i figured out but it was hectic.
@AdamLoweIO 2 ай бұрын
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.
@PhalgunnMaharishi 2 ай бұрын
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?
@AdamLoweIO 2 ай бұрын
Yes, blank canvas is fine. I just wanted to show all the steps behind the scenes.
@PhalgunnMaharishi 2 ай бұрын
@@AdamLoweIO Awesome! Subscribed. 🙂 Your channel is like a hidden gem when it comes to WordPress Blocks 😀 A really great job!
@mitchhoneysett7674 14 күн бұрын
Where does the extra data come from
@isheevaa Ай бұрын
I have a few questions in my mind, how can we create complex navigations like sidebar navigations?
@AdamLoweIO Ай бұрын
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.
@Jack_Warner 2 ай бұрын
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?
@AdamLoweIO 2 ай бұрын
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.
@Jack_Warner 2 ай бұрын
@@AdamLoweIO Good advice, i'll check that and let you know.
@martintaylor5949 2 ай бұрын
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.
@AdamLoweIO 2 ай бұрын
@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.
@Jack_Warner 2 ай бұрын
@@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.
@paszTube Ай бұрын
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.
@AdamLoweIO Ай бұрын
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.
@Daddy30011 3 ай бұрын
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.
@AdamLoweIO 3 ай бұрын
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)
@Daddy30011 3 ай бұрын
@@AdamLoweIOThanks !!
@crosales1979 6 ай бұрын
Waiting for the video where Pinegrow comes to the rescue 🛟
@AdamLoweIO 6 ай бұрын
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.
@crosales1979 6 ай бұрын
So I guess Pinegrow will be limited to the creation of blocks importing them as a plugin. Great video by the way.
@AdamLoweIO 6 ай бұрын
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.
KiKiDo
Рет қаралды 2,7 МЛН