Block Themes From Scratch: Part 2 - Theme Templates

[@johnrobinson5489]

Thanks so much for the effort you've put into these videos Adam. As a designer of classic themes I was really struggling to understand how everything fits together and how on earth you're supposed to put a site together with it. This has really, really helped.

[@snipkin]

Excellent! These are easily the best series of videos I've found that clearly introduce WordPress Block Themes. Thank you! Note that, in the upcoming version 6.7 of WordPress, the setting for the Query Loop block of 'Inherit query from template' has been removed and the Query Loop block should now default to this behaviour. So, in WordPress 6.7, check that your Query Loop blocks have the new 'Default' setting selected under 'Settings' in the side bar - essential for your 'All Archives' and 'Search' templates to work as they should.

[@AdamLoweIO]

Thanks for the compliment and for pointing out the change. It’s frustrating they block themes are such a moving target right now, but at least they are making some good changes and adding much needed features.

[@markjszymanski]

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.

[@KatrinaDierking]

In reference to the comments you received about mixed signals... regardless of whether you like block themes or not, that's the way WP is going, so I greatly appreciate you taking the time to teach it. We don't have to like block themes. But if we're going to work in WP and build themes for our clients, it would behoove us to know block themes -- and again I thank you.

[@copaceticobserver]

I just started learning classic theme development a few weeks back and then decided to see what block themes are about... this is a lot different

[@gristlesoup]

phenomenal vidya! WOW! Thank you so much for taking the time to share your knowledge. well done!

[@jamesrushton2441]

This course is what we need, thank you.

[@Sonya_Makepeace]

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]

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]

@@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]

@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]

@@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]

@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]

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 KZbin 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]

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.

[@strongerartist]

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.

[@AdamLoweIO]

So sorry for taking so long to respond... I somehow missed seeing this comment. Regardless, I don't have a good answer for you other than "it's the way I've always done it." What you suggest works just as well and is probably even a better solution.

[@strongerartist]

​@@AdamLoweIO No worries, Adam...I appreciate the response. I can see using the Row block as the "go to" container if there's a possibility that Flexbox properties will be needed in the design. Since both Groups and Rows map as 's in the HTML, I don't think it really matters which one is used. The only exception that comes to mind is if the container includes child elements that have to float, such as paragraphs wrapping around images.

[@bluetheredpanda]

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]

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]

@@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?)

[@PhalgunnMaharishi]

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]

Yes, blank canvas is fine. I just wanted to show all the steps behind the scenes.

[@PhalgunnMaharishi]

@@AdamLoweIO Awesome! Subscribed. 🙂 Your channel is like a hidden gem when it comes to WordPress Blocks 😀 A really great job!

[@franciscoubilla5158]

Is there any reason to make a system that was almost perfect so complex? Will they plan to move away from PHP in the future? Really dont understand

[@AdamLoweIO]

Perfect for whom? You and me... yeah, classic themes are the bees knees. For the average DIY website owner who barely knows how to login, editing a PHP file or trying to understand the WP hierarchy is enough to drive them completely away from the platform. Then you have enterprise clients where the rigidity of classic themes made managing the sites a nightmare of technical workarounds, bureaucratic governance, and development silos. The "promise" of block themes has a lot to offer them, where control over certain aspects can be delegated to their respective business owners without the need to have everything centrally controlled by a dedicated team of developers. They aren't entirely there yet, but I'm starting to see where it might be headed. The issue is, and lots of us have been beating this drum for a long time, that WordPress is focusing all their energy on the low-end user (Wordpress.com) and the Enterprise customers while putting medium-sized sites and small web agencies in a bad position.

[@Sinha.ritesh]

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]

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.

[@douglasallen5243]

Great Video! Part 3? Hopefully covering theme.json

[@AdamLoweIO]

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.

[@alansebastian-hn4bg]

can u make a video about creating a custom blocks, using block.json, and adding it to a newly created theme from the scratch

[@AdamLoweIO]

Building blocks manually isn't my specialty, so you are probably better off checking out one of the channels that focus on block development. My agency uses Pinegrow to build custom blocks, and you can find a metric ton of videos about it on this channel.

[@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.

[@carolway3674]

Great Video! Thanks for sharing your experience.

[@NikoTravels]

Not a complaint, but just an FYI. Second video in and you have lost me already. Perhaps I am not the target audience for your course but there are a few simple additions that would allow less experienced people such as myself to be able to follow along. And I may not be extremely knowledgeable, but I once took some design and development programs in school so I have an understanding of some things, and experience with html and css. But those courses were so fast paced and so long ago that I forget much of it. Generally I just build websites for myself so I always just work on a live site which I know is not the professional way. This means I am just buying a domain, and putting it up and then editing live. Because I have been doing that for so long, I have already completely forgotten about working locally. I don't know where to begin or how to link visual studio to a local WP. Having a separate video showing how to get started would have been very helpful.

[@AdamLoweIO]

Thanks for the feedback. Everyone comes from a different place with different experience levels, so making a video that works for everyone is something only a few rare people manage to do.

[@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]

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]

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]

@@AdamLoweIOThanks !!

[@crosales1979]

Waiting for the video where Pinegrow comes to the rescue 🛟

[@AdamLoweIO]

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]

So I guess Pinegrow will be limited to the creation of blocks importing them as a plugin. Great video by the way.

[@AdamLoweIO]

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.