WordPress Block Theme Development

If you're a WordPress developer and you've mastered classic theme development and you want to explore the new Block Theme approach to full site editing, then you're in the right place. In this video, I'm going to show you my approach to modern WordPress Block Theme Development.

Block Themes represent a modern approach to full site editing inspired by the block editor, which in turn is powered by Gutenberg.

In contrast, WordPress theme developers would need to have a fairly extensive knowledge of PHP to create things which are now referred to as Classic Themes.

Block themes simplify this process allowing developers to create fairly simple HTML themes lowering the barrier to entry for WordPress enthusiasts, and also adds the benefit of using a block based approach to building websites through the full site editing experience.

This leverages the full capability of using the block editor allowing you to easily rearrange, add and remove blocks to create unique layouts without the necessity for advanced coding skills.

Also, behind the scenes WordPress Core blocks already have responsive design considerations built in meaning that if you take the Block Theme approach websites will display optimally on both desktop and mobile and as always, WordPress continues to evolve.

So by taking the Block Theme approach serves as a great strategy for future proofing your website.

Chapters:
00:00 - Introduction to WordPress Block Theme Development
00:20 - What is a WordPress Block Theme
01:17 - Like and subscribe
01:46 - Tools needed for WordPress Block Theme Development
02:23 - How to audit a website before building a WordPress Block Theme
05:05 - How to create a WordPress Block Theme manually
07:11 - How to activate the WordPress Block Theme
09:33 - How to setup development mode in the WordPress Block Theme
09:59 - How to create a WordPress Block Theme with the Create Block Theme plugin
11:55 - Understanding theme, global and block settings and styles in a WordPress Block Theme
17:28 - How to manage colors in a WordPress Block Theme
25:56 - How to setup the header template in a WordPress Block Theme
27:39 - How to setup the header template in a WordPress Block Theme
27:50 - How to use Pixel Perfect Pro to layout a WordPress Block Theme
29:30 - Understanding where template files are stored in a WordPress Block Theme
30:46 - Where to find template parts stored in the database of a WordPress Block Theme
31:01 - Where to find template part code in the site editor of a WordPress Block Theme
31:28 - How to clear all customisation in the WordPress Block Theme
32:21 - Understanding the template structure in the WordPress Block Theme
34:13 - How to setup the page template for full site editing in the WordPress Block Theme
35:10 - How to setup patterns for full site editing in the WordPress Block Theme
38:17 - How to include images in from the theme folder of a WordPress Block Theme
40:25 - How to include patterns in the template files of a WordPress Block Theme
42:05 - How to style core blocks in a WordPress Block Theme

[Skeropero]

This is the best Wordpress block theme tutorial i’ve seen, thanks bro! :D

[_kovshenin]

Very well explained, thank you! I've been doing WordPress for almost two decades and am one of those anti-JS/Gutenberg skeptics, but this is likely one of the best visual explanations on block theme dev I've seen.

[MuskSucks]

Awesome! I can see myself coming back to this video again and again until I have got my head around block themes.

[a-plans]

Super helpful! Coming from working with react/C# and not familiar with wordpress outside the very basics. This was very easy to follow!

[martinkaspar]

Elliott - many thanks!!! i am just overwhelmed, you're indeed a blessing to the whole WordPress-community! : ❤ 😊👍 👏👏💥 🎆💥🎆 plz keep up your great work we love you... ;)

[jeroenrotty]

Very well explained. Thank you for taking the time to create this one Elliott!

[cambevis]

As a seasoned web developer VERY frustrated that I didn't know how to get to different style elements ("Where IS this coming from!!" :)), this was EXTREMELY helpful.
One note for others, graphical typography changes (at least as of 6.7.1) seem to have been moved out of Create Block Theme over to a first class spot in styles.

[jimmyfal]

I am quite sure I have never seen someone so good at explaining complex stuff. Although I will never create my own Themes, just watching this video did in fact give me a TON of foundational knowledge to help me understand Block Themes and the Block Theme editor in general. You are VERY good at what you do! 👍👍👍

[usmankhalid]

Best Wordpress Block Theme tutorial on the internet. Thanks a lot

[CapriPrimal]

This video is really helpful in helping to explain how to get started with building a block theme but I feel like they have made it more complicated to build themes than it was the classic way and there are so many more steps to getting templates set up.

[byAnasMALLAKH]

This must be one of the best explained tutorial I've ever watched, precise, short and 0 boredom, well done.
Thank you so much, looking forward to your next videos.

[byfunkyoid]

Love this. I would love to see each section as individual videos with a more slower walkthrough. I’m new to all of this so maybe it’s my understanding level but for a total beginner I still found it extremely useful. The best I’ve seen. You’ve a new subscriber.

[DamDominiciMusic]

I hit the suscribe button when you said you composed the music! Fellos musician and developer here.

Thank you for making this incredible video 🙏

Music stood out from the first second I love it so much, would be perfect for a bank heist type of movie too, lol!

[ahmadpak]

Great tutorial. Super clean explanation. I highly suggest to viewers to read the documentation and then watch the video again. It makes a lot more sense.

[danimatuko]

Great video and editing!
Would definitely like to see more quality content on wordpress development which is rare to find.

I appreciate you efforts 👌🏾

[joycejeyaratnam]

This is one of the best videos on WordPress theme dev across YouTube. You make it look so easy. There were a couple of places where I had to stall because even though your video is only 5 months old, WordPress had already made changes to how the site editor looks, but overall, I'm so glad that you showed me how uncomplicated it is. Thank you 😊

[pkg]

Thank you for your tutorial. You help me see the possibility of working with Block themes. You are now having me as the follower ^_^

[richtabor]

SOLID. Really gets into the technicalities of block theme development. Good stuff.

[derhalk]

Great video and very helpful. I would love more detailed video instructions like this

[johanneskingma]

23:32 here I tend to rename the slug to something more generic like primary and headers. This way if reusing the theme or in case a customer has a second thought I only have to change FontFace section.