WordPress Block Theme Development
Вставка
- Опубліковано 16 січ 2024
- 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.
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!
Haha! Love your comment, thank you so much 👍
Very well explained. Thank you for taking the time to create this one Elliott!
My pleasure! And thank you for the positive feedback, much appreciated 🙏
This is the best Wordpress block theme tutorial i’ve seen, thanks bro! :D
You're welcome!
i'm a wordpress dev and i love your contents, you got a new follower buddy
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.
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
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... ;)
Wow! I am truly humbled by the feedback 👍🙌 You're so welcome! And thank you 🙏
Great video and very helpful. I would love more detailed video instructions like this
SOLID. Really gets into the technicalities of block theme development. Good stuff.
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!
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! 👍👍👍
Your kind words mean a lot, and I genuinely appreciate the feedback. Thank you so much for taking the time to share your thoughts 👍
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.
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!
Great video and editing!
Would definitely like to see more quality content on wordpress development which is rare to find.
I appreciate you efforts 👌🏾
You got it! Thanks for the feedback 🙏
Thank you, Elliott, for this wonderful resource. Instantly subscribed your channel.
Awesome, thank you! Hope I don’t disappoint 🤞🙌👍
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.
Appreciat the comment, thanks for that 🙏
Thank you for sharing! Very well explained and super useful!
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 🙌
Great content, thanks Elliott.
Thanks for the feedback and the subscribe 👍
Thank you for your tutorial. You help me see the possibility of working with Block themes. You are now having me as the follower ^_^
Thank you 🙏
What an excellent resource, subscribed!
Thank you 🙏
Awesome tutorial. Very helpful. Please create more videos like this. Thanks a lot.
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 🙌
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.
Great idea! Noted 👍 and thanks for your feedback 🙏
Great video, really useful, thanks Elliott
Glad you enjoyed it pal 🙏
Fantastic video and love the music!
This is one of the best videos on WordPress theme dev across UA-cam. 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 😊
Yeah, I could probably update this video, things are moving so quickly with core but hopefully the fundamentals still come across 🤞
@@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!!! 😊😊
Kind words, thank you 🙏
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.
Thanks, amazing tutorial !!!
You're welcome & thanks! I really appreciate the feedback 🙏
Great work Elliot 👍
Legend! Thanks Jamie 🙌
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.
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 :)
Thank you Sir. This is really useful content with amazing step by step explanation.
My pleasure and thank you for the positive feedback 🙏
Very well explained!
Thanks @dmitrymayorov9174 I appreciate the feedback
great content, thanks!
Glad you liked it!
Great tutorial ❤ thank you
You’re welcome 😇
Thank you so much
You're most welcome
Great video!! A fellow Reason user nice!!!
Hey, thanks! I really appreciate the feedback 🙏
Really good work! =DDD
Thanks for the feedback, much appreciated 👍
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.
Great feedback, thank you and I'm glad you've found this useful :)
Great Video
Thanks you :)
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.
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
niceee, was looking for this.!
Glad I could help
@@elliottrichmondwpare you gonna make part 2 ? 😂
@ddrci88 what would you like to see in part 2?
@@ddrci88 for sure, what would you like to see in part 2?
@@elliottrichmondwp I think its much advance to do eCommerce store ( using Woo ) to doing block themes? This can teach us very well i belive.
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
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;
&
Thanks for your fantastic content. Could you share the two sh scripts you used at the beginning?
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
Can’t believe you’ve less than 500 subscribers.
This stuff is on par with million Subscribers level youtube channel.
Thanks @LileshJadav - I only really started my YT in June last year :)
@@elliottrichmondwp hope that you will not discontinue. Wish you the best !
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
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.
I am really tired of classic themes this video is awesome.
Thank you 🙏
Your most welcome mate and you deserve more recognition BTW great job.@@elliottrichmondwp
great explanation, next wothout music
Noted! Thanks for the feedback :)
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!
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 👍
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?
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 👍
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!!!
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 👍
@@elliottrichmondwp Thanks Elliot, I will give that a go and report back. xxx
@@elliottrichmondwp Elliot - you are a star! That worked! I've spent countless hours trying to sort this.
@@Sonya_Makepeace awesome! Glad I could help :)
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.
Noted! Thanks for the feedback :)
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?
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?
@@elliottrichmondwp I've dabled with the funtions file, but I'm more used to writing media queries in css,
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.
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!!!!!".
You’ll find all the examples you need under /wp-incudes/theme.json
I wish the new way to add fonts didn't add it to your uploads folder and still stuck it in your assets folder.
I believe if you use the Create Block Theme plugin it does exactly that no?
such an ugly dev experience. Its about time to put wp in trash and head for laravel and vuejs. Great tutorial though.
Yes bro.The code syntax of Laravel and Vue.js❤❤❤
Nice presentation, but can I say, the music became annoying.
Sorry to hear that, it must be the musician in me, I just can’t resist 😋 was it the levels or did you just find it distracting?
@@elliottrichmondwp Yes it was too loud, I found myself having to keep adjusting the volme.