WordPress Block Theme Development

Рет қаралды 21,205

6 ай бұрын

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.

Пікірлер: 115

@DamDominiciMusic 2 ай бұрын

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!

@elliottrichmondwp 2 ай бұрын

Haha! Love your comment, thank you so much 👍

@vojtechsebek0 3 ай бұрын

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

@elliottrichmondwp 3 ай бұрын

You're welcome!

@jimmyfal 5 ай бұрын

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! 👍👍👍

@elliottrichmondwp 5 ай бұрын

Your kind words mean a lot, and I genuinely appreciate the feedback. Thank you so much for taking the time to share your thoughts 👍

@_kovshenin 6 ай бұрын

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.

@elliottrichmondwp 6 ай бұрын

Thank you so much Konstantin! Really appreciate your feedback, especially coming from someone with your depth of experience in WordPress. It means a lot, considering our shared history in this space. I'm glad the visual explanation resonated with you, even as an anti-JS/Gutenberg skeptic, I was also one :) Here's to two decades of WordPress and many more to come!

@raisingbarssince1978 8 күн бұрын

Fantastic video and love the music!

@aogunnaike 3 ай бұрын

i'm a wordpress dev and i love your contents, you got a new follower buddy

@jeroenrotty 5 ай бұрын

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

@elliottrichmondwp 5 ай бұрын

My pleasure! And thank you for the positive feedback, much appreciated 🙏

@martinkaspar5095 5 ай бұрын

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... ;)

@elliottrichmondwp 5 ай бұрын

Wow! I am truly humbled by the feedback 👍🙌 You're so welcome! And thank you 🙏

@pkg2885 2 ай бұрын

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

@elliottrichmondwp Ай бұрын

Thank you 🙏

@byAnasMALLAKH 5 ай бұрын

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.

@elliottrichmondwp 5 ай бұрын

Wow, thanks for the feedback! Delighted to hear that you found the tutorial clear and engaging, means a lot to me. Stay tuned for more videos, and feel free to suggest any topics you'd like to see covered. Thanks again for your support

@byfunkyoid2917 5 ай бұрын

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.

@elliottrichmondwp 5 ай бұрын

Great idea! Noted 👍 and thanks for your feedback 🙏

@joycejeyaratnam433 Ай бұрын

This is one of the best videos on WordPress theme dev across KZfaq. 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 😊

@elliottrichmondwp Ай бұрын

Yeah, I could probably update this video, things are moving so quickly with core but hopefully the fundamentals still come across 🤞

@joycejeyaratnam433 Ай бұрын

@@elliottrichmondwpdon't update this video, I still like it, and you do a great job at explaining. I need you to make more WordPress videos!!! 😊😊

@elliottrichmondwp Ай бұрын

Kind words, thank you 🙏

@Matt-mu6wt Ай бұрын

Whichever way things change, and they will change, it’s always good to keep up with the times. There will be frustrations along the way for sure. Since I’ve started exploring the block themes, having hated blocks for a long time myself, I’m starting to see how this may be a game changer. I’ve already started shifting away from the page builders and was so keen to find out how the new block themes work. As a dev, I think it’s always good to familiarise with the architecture behind whatever stack you’re building on. I’ve followed a couple channels now and have to say thank you for shading light to this topic. My goal is to eliminate the use of third party plugins as much as possible and develop themes that I truly understand and have control of.

@binaryfire 2 ай бұрын

Great video mate. One suggestion re: sound - the music is a lot louder than the voice which makes it a bit hard to listen to. Using a compressor plugin on the audio track in your video editor would improve that a lot.

@elliottrichmondwp 2 ай бұрын

Thanks for the advice, I did have eq & compression on post production but I don't think I had the balance right so as always, still learning :)

@ahmadpak 5 ай бұрын

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.

@elliottrichmondwp 5 ай бұрын

Appreciat the comment, thanks for that 🙏

@danimatuko 6 ай бұрын

Great video and editing! Would definitely like to see more quality content on wordpress development which is rare to find. I appreciate you efforts 👌🏾

@elliottrichmondwp 6 ай бұрын

You got it! Thanks for the feedback 🙏

@richtabor 5 ай бұрын

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

@elliottrichmondwp 5 ай бұрын

Thank you, @richtabor! I genuinely appreciate your feedback. Your support and encouragement mean a lot to me. It's truly motivating to receive such positive comments from someone I've admired for long time. Thanks again for taking the time to share your thoughts!

@derhalk 4 ай бұрын

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

@mithridates0 19 күн бұрын

Great tutorial ❤ thank you

@elliottrichmondwp 19 күн бұрын

You’re welcome 😇

@BrunoMonteiroLx 5 ай бұрын

Thank you, Elliott, for this wonderful resource. Instantly subscribed your channel.

@elliottrichmondwp 5 ай бұрын

Awesome, thank you! Hope I don’t disappoint 🤞🙌👍

@TiborPaulsch 5 ай бұрын

Thank you for sharing! Very well explained and super useful!

@elliottrichmondwp 5 ай бұрын

Thank you for your feedback; I genuinely appreciate it 🙏 I'm glad you found it useful. Please stay tuned for more updates, and if you think it could benefit your fellow developers, I would be grateful if you shared it with them 🙌

@AntonioOrtizOrtega 6 ай бұрын

Great content, thanks Elliott.

@elliottrichmondwp 6 ай бұрын

Thanks for the feedback and the subscribe 👍

@tricaexmachina2899 4 ай бұрын

What an excellent resource, subscribed!

@elliottrichmondwp 4 ай бұрын

Thank you 🙏

@dagossYT 6 ай бұрын

This video was extremely helpful. I come from a non-wordpress dev background, and understanding how to set this stuff up, the database overriding my theme, etc has been a real challenge.

@elliottrichmondwp 6 ай бұрын

Great feedback, thank you and I'm glad you've found this useful :)

@asif-rahaman 5 ай бұрын

Awesome tutorial. Very helpful. Please create more videos like this. Thanks a lot.

@elliottrichmondwp 5 ай бұрын

Thank you so much for your kind words 🙏 I'm thrilled to hear that you found the tutorial helpful. I'll definitely be working on creating more content like this 👍 And if you think your fellow developers could benefit from it, feel free to share it with them 🚀 Thanks again 🙌

@vitasc 6 ай бұрын

Thank you Sir. This is really useful content with amazing step by step explanation.

@elliottrichmondwp 6 ай бұрын

My pleasure and thank you for the positive feedback 🙏

@brianmartinuk 6 ай бұрын

Great video, really useful, thanks Elliott

@elliottrichmondwp 6 ай бұрын

Glad you enjoyed it pal 🙏

@jamiewp 6 ай бұрын

Great work Elliot 👍

@elliottrichmondwp 6 ай бұрын

Legend! Thanks Jamie 🙌

@cholo2605 6 ай бұрын

Thanks, amazing tutorial !!!

@elliottrichmondwp 6 ай бұрын

You're welcome & thanks! I really appreciate the feedback 🙏

@dmitrymayorov9174 6 ай бұрын

Very well explained!

@elliottrichmondwp 6 ай бұрын

Thanks @dmitrymayorov9174 I appreciate the feedback

@aenzgg 6 ай бұрын

great content, thanks!

@elliottrichmondwp 6 ай бұрын

Glad you liked it!

@LileshJadav 5 ай бұрын

Can’t believe you’ve less than 500 subscribers. This stuff is on par with million Subscribers level youtube channel.

@elliottrichmondwp 5 ай бұрын

Thanks @LileshJadav - I only really started my YT in June last year :)

@ddrci88 5 ай бұрын

@@elliottrichmondwp hope that you will not discontinue. Wish you the best !

@calebmatteis9155 6 ай бұрын

Great video!! A fellow Reason user nice!!!

@elliottrichmondwp 6 ай бұрын

Hey, thanks! I really appreciate the feedback 🙏

@webguy_ak 5 ай бұрын

Thank you so much

@elliottrichmondwp 5 ай бұрын

You're most welcome

@visualmodo 6 ай бұрын

Really good work! =DDD

@elliottrichmondwp 6 ай бұрын

Thanks for the feedback, much appreciated 👍

@andgoedu 4 ай бұрын

I am really tired of classic themes this video is awesome.

@elliottrichmondwp 4 ай бұрын

Thank you 🙏

@andgoedu 4 ай бұрын

Your most welcome mate and you deserve more recognition BTW great job.@@elliottrichmondwp

@ddrci88 5 ай бұрын

niceee, was looking for this.!

@elliottrichmondwp 5 ай бұрын

Glad I could help

@ddrci88 5 ай бұрын

@@elliottrichmondwpare you gonna make part 2 ? 😂

@elliottrichmondwp 5 ай бұрын

@ddrci88 what would you like to see in part 2?

@elliottrichmondwp 5 ай бұрын

@@ddrci88 for sure, what would you like to see in part 2?

@ddrci88 5 ай бұрын

@@elliottrichmondwp I think its much advance to do eCommerce store ( using Woo ) to doing block themes? This can teach us very well i belive.

@yasershahian3134 5 ай бұрын

Great Video

@elliottrichmondwp 5 ай бұрын

Thanks you :)

@tinny77 Ай бұрын

Thanks for your fantastic content. Could you share the two sh scripts you used at the beginning?

@elliottrichmondwp Ай бұрын

Hey, thanks for reaching out, you can find the script in one of my gists on github, you will need to change some of the parameters to match your local setup but hopefully this should help get you started: gist.github.com/eirichmond/10cf1861e38d56d83df9d5c895c08769

@thebilalafsar 6 ай бұрын

Hey, bro! Great content! Could you create an in-depth tutorial on WordPress speed optimization? I'm eager to learn how to achieve a 90%+ Google Page Speed score and pass Core Web Vitals without solely relying on plugins. Thanks a bunch!

@elliottrichmondwp 6 ай бұрын

Ah interesting question, have you tried building a block theme without any plugins and running it through CWV? I think you’ll be pleasantly surprised 😊 I know that’s not always possible but adding any plugins or any custom work will always have the potential of injecting overhead, keeping plugins to a minimum and building a block theme will all help towards getting a good score in CWV 👍

@UCcdTp7XpCkVLkaRCsDcifFg Ай бұрын

great explanation, next wothout music

@elliottrichmondwp 20 күн бұрын

Noted! Thanks for the feedback :)

@user-mz4bs3pp4e 6 ай бұрын

This seems really great so far, looks like great knowledge and presentation coming. I wanted to mention that the music kicks in kind if loud here in my office setup.. I turn up the speakers (logitech 2.1 / 3 piece ) to hear the voice.. then the transition music comes in and it's super loud for just a moment.. (by the time I reach for the volume control it's over) then I struggle to hear the voice.. this happening again at 4:21-ish makes me stop the video, make a comment, and consider if I can find a compressor / limiter for windows 11, if I should switch to headphones or if I should go start a comment thread about how youtube could use AI to allow us to balance the audio and strip music bumps or increase the spoken words to make the levels so I can hear and then turn the whole speaker system down.

@elliottrichmondwp 6 ай бұрын

Noted @user-mz4bs3pp4e, although there is a limiter on the narrative I probably forgot on the music channel, and its not the first comment like this so I will keep an ear out for future video's - thank you for the feedback

@aztecs8879 Ай бұрын

Great video loved the content; I did find the music a bit loud and irritating at times as it broke my concentration. but thanks anyway.

@elliottrichmondwp 20 күн бұрын

Noted! Thanks for the feedback :)

@AshishBanerjee 3 ай бұрын

How can we implement license check functionality (check whether the user has genuinely purchased the theme) and update notification feature (notify users a new theme update is available) ? Kindly make a video on this topic as well

@elliottrichmondwp 2 ай бұрын

You can use Easy Digital Downloads with the Software Licensing add on, that will do what you need 👍 Unfortuently because it's a licenced addon I don't think I can create a video on that specifically topic but for EDD for sure I can.

@michieltieleman9462 6 ай бұрын

Great and clear video, thank you. However, since you specifically mention how you enjoy the editing, might I suggest something that honestly made me not want to watch it? The different transitions in your video were quite inconsistent. I was watching/listening to this with headphones. Every time a transition played the volume shoots up so hard that I had to take of my headset. Perhaps this is something you could consider tweaking for your future videos?

@elliottrichmondwp 6 ай бұрын

Oh that’s great feedback thank you so much, I’m so new to editing so this is constructive, I’ll definitely review my levels 👍

@valens5287 5 ай бұрын

Very useful video, thanks a lot for it. If you allow me a slight criticism, maybe I just overlooked or missed it but initially it wasn't clear to me how did you get the header/footer template parts into the index.html template file. I read in a tutorial that the wp:template-part markup would be used for this, is that the correct way? Thanks

@elliottrichmondwp 5 ай бұрын

Yes that is correct, sorry to hear it wasn't clear, I tend to build in the editor without saving the templates and instead go the > Code Editor > then copy out the code and paste it in to the template files in my /wp-content/themes/mytheme - folder, in the index.html file the are top and bottom as follows; &

@Sonya_Makepeace 6 ай бұрын

There's one thing I can't seem to do. I can't adjust my page width and content width for different devices. Example; on a desktop, I want the content width to be 70% with the site width to be 85%. On a mobile phone, I want the content width to be 90% and the site width 100%. This doesn't seem to work when using blocks, only when using a classic theme. How do it get around this?

@elliottrichmondwp 6 ай бұрын

Without the intervention of code, you can’t set different parameters for different devices, there are some PHP hooks you can use to achieve this, how comfortable are you using core action hooks and filters in the functions.php file?

@Sonya_Makepeace 6 ай бұрын

@@elliottrichmondwp I've dabled with the funtions file, but I'm more used to writing media queries in css,

@elliottrichmondwp 6 ай бұрын

Yeah the nature of blocks means you can load more performant css, meaning.. if you don’t use the block then you shouldn’t load the css so i guess that’s the reason why core have decided if you need to extend blocks with css you need to use action hook to load css specifically for core blocks… if that makes sense.

@Sonya_Makepeace 6 ай бұрын

Hi Elliot, i've got another question. How do I use a different template for my blog archive page? I notice in the templates there's a Blog Alternative template, but I wanted to make my own one using Gutenverse. I don't know how to get Wordpress to use it. I tried making a page, then a template just how I want it to look, but WordPress defaults to the original template. HELP!!!

@elliottrichmondwp 6 ай бұрын

Hey @Sonya_Makepeace thats a good question, ensure your theme doesn't have a home.html template in the /wp-content/theme/xxx folder, this will always override your blog index, also ensure you have the pages setup and under Dashboard > Settings > Reading >Your homepage display is set to "A static page" and your Homepage and Posts page are set to you choosen pages - hope that helps 👍

@Sonya_Makepeace 6 ай бұрын

@@elliottrichmondwp Thanks Elliot, I will give that a go and report back. xxx

@Sonya_Makepeace 6 ай бұрын

@@elliottrichmondwp Elliot - you are a star! That worked! I've spent countless hours trying to sort this.

@elliottrichmondwp 6 ай бұрын

@@Sonya_Makepeace awesome! Glad I could help :)

@TheBeeOBee 2 ай бұрын

I wish the new way to add fonts didn't add it to your uploads folder and still stuck it in your assets folder.

@elliottrichmondwp 12 күн бұрын

I believe if you use the Create Block Theme plugin it does exactly that no?

@charlesluck8921 5 ай бұрын

Yo aaaaay! I must've missed the part where you tell us where to find ALL the entries for the theme.json file. If it isn't one thing, it's another, regardless of the video. When Charleston Heston screamed out in the Planet of the Apes, do you remember what he said.... what is "It's a BLOODY FAAAAAAAAFF!!!!!".

@elliottrichmondwp 12 күн бұрын

You’ll find all the examples you need under /wp-incudes/theme.json