How to Create a Custom WordPress Block Theme 2023 (FSE + CBT)

[@RaddyDev]

In order to achieve the desired functionality from my design, I had to add a few custom styles. It's worth noting that while the FSE & Guttenberg can handle most basic scenarios, there are certain situations where their capabilities may be limited.

[@garth0079898]

thanks man, I was debating if FSE is ready for pixel perfect mockups in an agency setting and while I don't think its quite there yet, its great for simple small sites. Thanks for the tutorial it answered alot of my questions on FSE!

[@carstenaltena]

I have hand coded many themes in the last 10 years but really like this approach. Yes, it’s not perfect… yet. FSE is young and very promising. Great video!

[@xelaju3d]

Can I sask what is your common stack? I want to get into theme creation, I know PHP, CSS and HTML + JS

[@dadidesigns6633]

Super awesome to land here. Just what I was looking for. Cheers mate

[@ramen_guru]

The best tutorial for what I was looking for! Thank you! Great work!

[@martinkaspar5095]

hi there Raddy - this is so overwhelming: you provide a fantastic explanation about Wordpress #block #theme. Really like the content of the information. Thanks for sharing! 📷📷📷 🎉🙏👍❤btw keep up your awesome project and do more WordPress videos... we need your work

[@RaddyDev]

Thanks Martin, I appreciate it! I will defiantly continue making WordPress videos. I will come up with a plan today and start working on it.

[@Adrenaline_nocopyrightmusic]

Waiting for this kind of tutorial from last 4 months. ❤ thank you Boss

[@badaramir24]

Thanks. for this tutorial.

[@Shawn-Mosher]

More of these please, taking a design and converting them to block themes. These are hard to find

[@alasagard]

wow 😍😍😍

[@apedreams277]

Thanks for the great tutorials. I'm trying to follow along, where can I get the images?

[@RaddyDev]

Hey, i am glad that you like the tutorials. The images are all from unsplash . com. If I find the specific links I will put them in the description

[@GeekMed1]

Clear and simple thank you! This will help a lot.

[@marcodibona]

Could you please create a single WordPress theme that utilizes FSE and CBT to design three pages: a captivating one-page scrolling homepage, a dynamic blog page showcasing articles, and an attractive WooCommerce shop page? By the way, great video! Keep up the excellent work!

[@RaddyDev]

Great suggestion! I'll have to think about it and plan something...

[@everyday_history]

What's a CBT?

[@marcodibona]

@@everyday_history it's a drugs!😂 Not it's a code block theme

[@ogisan-hr2gp]

C*ck and ball torture?@@everyday_history

[@olivierg1566]

Thanks a lot, great tutorial

[@fpavel0406]

Thanks a lot. Eventually I could figure out the WordPress structure...👍

[@lojickse7en]

Thanks for the tutorial! Quick question, when creating the homepage, was there a reason why you did not use the Frontpage template?

[@RaddyDev]

I found that using a single template for all pages worked fine for this particular design. However, if I were to make the front page completely unique I would defiantly used the Frontpage template

[@MarceloMarconcini]

Good afternoon Raddy. Thanks for the tutorial. Do you think it's possible to use what you teach to create themes and sell on Themeforest? Thanks.

[@RaddyDev]

Yes, absolutely. I've seen a few new FSE themes on Themeforest. I am not sure how strict their publishing guidelines are and how much they take of each sale now. It's good to explore and if you are not happy with it, you can sell themes on your own website and market them yourself

[@MarceloMarconcini]

@@RaddyDev tks so much!!!!

[@monoloops]

great tutorial, Thank you so much a have learned so much! I have one problem with the image cover. I have one hero cover right at the start as you know it. But every time add another one anywhere on the page, that cover replaces my hero cover and disappears from the second place... It drives me crazy.. can't find a solution.. any ideas?

[@RaddyDev]

That sounds like a strange bug. I haven't experienced that, I will have to check out to see if I can replicate it. It could be worth reporting if it's something that keeps happening

[@olga_lc]

Hi and thanks for the video! I am pretty new to Wordpress and was wondering what would be an approach if you have to make a complex frontend, the one with custom carousels, dropdowns, comlpex layouts, external libraries, a lot of JavaScript and styling? I am currently using classic theme for that type of projects. Is it possible to make complex layouts with modern block editor and fse? And is it worth the effort? Thanks a lot again, the video is 👍

[@RaddyDev]

Hello! If you are looking to create more complex sections, you can do that by making your own custom block. The "Block Editor Handbook" has a handy tutorial to get you started. You can use ReactJs to do that and in terms of libraries and styling you can do pretty much whatever you want. Everything integrates well with the block editor, which ultimately will make it easy to update and change settings. Regarding the effort involved, it depends on the context. If you are making a custom theme to sell it's defiantly worthwhile as it makes it super easy for the end-user to customize their theme. For example if you had a Slider, you can have an option of how many slides to show

[@olga_lc]

​@@RaddyDevthanks for the answer! Making blocks with React really looks like a way to go for creating a reusable theme or plugin. On the other hand, it looks like an overhead if you only need to create layout for a single website. I was thinking of Acf blocks instead, anyways you end up using Acf on larger and heavily customized projects. I am quite concerned with keeping styles consistent on frontend and admin dashboard though, it might be harder than it looks

[@RaddyDev]

It might be wroth sticking with using a classic theme. Check out this article about the state of WordPress: dbushell.com/2024/05/07/modern-wordpress-themes-yikes/. Maybe Classic is the way to go when it comes to custom development

[@olga_lc]

@@RaddyDev thanks for the article, that's exactly the point. If you look at classic theme files, you can see the logic behind it. But with block themes, the structure and code looks so messy that I have no idea where to begin and how to scale the project. Plus there is no good guide or starter template for custom development. I am still planning to try out Acf blocks on a pet project though 😅

[@X-factor6]

Nice tut. Anyway, the json file was most important, can you plesae share it? I couldn't find it in the project files you shared. There are only images.

[@RaddyDev]

Thank you. I've added the file in the Google Drive link

[@floyd1411]

Hi Randy, would it be possible to make a tutorial on how to migrate a webflow html to a wordpress theme?

[@RaddyDev]

I have tried Webflow once, and I don't know if there is a proper way of migrating to WordPress. I guess you just have to re-create the entire website as they work different. I will look it up, but no promises :-)

[@floyd1411]

@@RaddyDev there is an option with a paid plan to export the code. Which will generate an index.html, asset folder, css folder and js folder. I would think then the process would be similar to how to create a theme with html templates may be?

[@TRSFURY]

Sir make video on how we can edit Any theme css and html in visual studio

[@RaddyDev]

Like creating a classic theme?

[@TRSFURY]

@@RaddyDev yes

[@vlas73]

Hi, GREAT Tut!!!!! I've looking for a long time a wordpress tutorial as well explained as yours. Thanks a lot. One Question, I'm following it but when I've pulse export Zip from Created Block Theme, it shows an error saying: An error occurred while attempting to export the theme, Any idea how i can debug the error to fix it? Thanks again for your tutorials!!

[@RaddyDev]

Hi, glad to hear that you like the tut. That happens to me as well and the trick is to export it from the FSE editor. Click Edit Site and select any of your templates to edit. Click on the page so you go in "Edit" mode, where you can change stuff on the page / add blocks. From there on the top right corner you should see 3 dots. Click on them and you will see a section called Tools -> Export. That method should work

[@OlenaIaroshynska]

@@RaddyDev Hello. Thanks for the super useful and clear tutorial! Perhaps you can suggest a solution to my problem. When I export a theme from the FSE editor, it is downloaded. But when I try to unzip it, it shows an error "The archive is corrupt". Thank you!

[@RaddyDev]

@@OlenaIaroshynska Hello! Don't export it from the Create Block Plugin, but instead use the FSE export option. The instructions are the same as on the comment above. Also, just to mention, now there is an option for the Create Block Theme to be saved straight into the JSON file, meaning that you might not need to export, if that option is enabled. I haven't had the chance to test it, but it's worth trying on a test website

[@OlenaIaroshynska]

@@RaddyDev Hello Raddy! Thanks for the answer. I use the FSE export option and the archive is still broken. How to enable the option for the Create Block Theme to be saved straight into the JSON file?

[@RaddyDev]

@@OlenaIaroshynska Update the Create Block Theme plugin, and then on the back-end of your website. Navigate to Appearance -> Create Block Theme. From there you should be able to see the new options they have. The option that I was talking about is called "Overwrite [Theme Name] (new)". Give it a go and I hope that it works for you. Let us know how it goes :)

[@supafast1314]

Thanks for the video 👍 However is there any simple way to make this block based theme multilingual ?

[@RaddyDev]

I haven't had the chance to look into that yet. I've only done multilingual WP websites using the classic approach and ACF

[@ahmedkhalil76d]

Thank youu a lot

[@RaddyDev]

Welcome 😊

[@daeljessabelcaramol4974]

Hi @RaddyDev. Font sizes doesn't work. Any solution? Thank yoU!

[@RaddyDev]

Are you talking about the responsive headings where I used the CSS clamp property? Or you are unable to change font sizes in general? With the headings all you need is something like this: "fontSize": "clamp(3.05rem, 2.73vw + 2.37rem, 5rem)" and then just make sure that your page isn't cached. Try incognito mode if you have to

[@daeljessabelcaramol4974]

@@RaddyDev I'm unable to unable to change font sizes in general like in paragraphs

[@RaddyDev]

​@@daeljessabelcaramol4974 The options don't show? Could you check something for me please. In your Theme, open the file theme.json and look for "typography". Do you have different options for like this for example: { "fluid": { "max": "0.89rem", "min": "0.8rem" }, "name": "Small", "slug": "sm-r", "size": "0.89rem" }, This is an example for a "Small" size font. I wounder if yours where not added for some reason. If that is the case, you can easily copy my settings from the Repo in the description and change them to suit your needs.

[@daeljessabelcaramol4974]

@@RaddyDev I really appreciate your help on this. I copied your settings & still no sizes showing. Im using WP 6.3 is it probably because of the version?

[@RaddyDev]

​@@daeljessabelcaramol4974 I am also on 6.3.2 so it should be fine.Can you please try two more things: 1) Can you activate another FSE theme like Twenty Twenty-Three and see if it works there. That could tell us if it's the theme or there is something wrong with your WordPress setup. 2) Can you enable WordPress debug inside wp-config.php (root wp folder) by changing define('WP_DEBUG', false); to true. So this: define('WP_DEBUG', true); Do you get any errors when you refresh the website after the debug is switched on?

[@bellatrixhp7]

This was so helpfull but what about Woocommerce.

[@RaddyDev]

I did a full WooCommerce video using the FSE last year. Woo have been adding a lot of FSE/Gutenberg functionalities. You can literally drag and drop WooCommerce sections and change settings from the editor. You can skim through the video here. kzbin.info/www/bejne/d328qYN3n7mXoM0 No need to watch it all, it's the same concept :-)

[@bellatrixhp7]

@@RaddyDev awesome, but I was looking more for styling WooCommerce itself, like displaying short description text on the product preview, before it was possible by adding a snippet with functions.php, but with this new blocks theme I can't find functions.php, and I don't like to edit WooCommerce core code. Also, almost all the WooCommerce blocks are blocked, so they cannot be edited at all. At least now the purple is gone easily haha

[@Vorundor]

This is a great tutorial, for the first time I understand how to customize/create a theme using blocks. Thank you! Edit - How do you make blog page that displays your posts from new to old?

[@RaddyDev]

Glad you liked it! When you select the Query Loop, on the right side under the Block tab there should be a Setting - Inherit query from template. Untick that and you will see the options there

[@Vorundor]

@@RaddyDev Thank you so much!! I really appreciate you taking the time to reply to my comment.

[@jackepner9984]

Got to the header section.... no list elements, no header in search, no group, nothing. There is literally nothing, and no way to add anything I see available. I'm also having to get to the header in a different way - there is no Template Parts in the editor. So I don't know if I'm not getting to the right place...

[@jackepner9984]

Got it... not even sure how. There's a GH thread about this, as well, as apparently it was a known issue for some time.

[@anversadutt]

subbed :)

[@RaddyDev]

Thanks for the sub!

[@tanveermalik5027]

It would have been a lot better if you would have shared the Project Assets like Images, Style and JS files shared as a zip file as well.

[@RaddyDev]

That's true, I will add everything I have shortly. The Figma file does contain most of the stuff, but I guess you have to export which is time consuming

[@wordpresstipsntools960]

@@RaddyDev much appreciated

[@etzbetz]

Looks like you've added that now, but to me that archive is invalid/corrupted..@@RaddyDev

[@RaddyDev]

@@etzbetz thanks for letting me know I have re-uploaded the file

[@Uncaught_in_promise]

Nobody knows where WP is shifting. Either to Gutenberg Page Builder, or 3rd parties page builders, or Headless technologies.

[@stewtech]

Is everything Free in this tutorial?

[@RaddyDev]

Yep, everything I used in this tutorial is free

[@renealbrechtsen9743]

Would like a WP blocks theme tutorial that's purely written with code.

[@RaddyDev]

Already made one: kzbin.info/www/bejne/Y3vagX2dlpqmh5I There are a few new options that where added after the video, but it should give you a clear understanding on how everything works.

[@renealbrechtsen9743]

@@RaddyDev thanks so much :)

[@a99986]

39:42

[@GregoryPage-b7c]

0700 Leopold Mountains

[@anirudhachakrabarty2050]

I don't like this block themes by WordPress... It's time consuming and hectic... I would love to code my own theme from scratch... To create a header it took so much time and effort using block theme...

[@vaga7580]

your theme is static. we need dynamic data.

[@RaddyDev]

Can you give an example of something dynamic? Maybe I can incorporate it in the next video

[@vaga7580]

@@RaddyDev menu from dashboard, site name from dashboard, grid posts, ...

[@fodorsolya]

hi @RaddyDev custom css doesn't work for me neither. I tried to clear the cache, it doesn't fix it. Any other idea? This is the code that I use : if(!function_exists('fse_rad')) : function fse_rad() { wp_enqueue_style('rad-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version')); } endif; add_action('wp-enqueue-scripts', 'fse_rad'); I'm on the latest wp 6.4.3. What could be the problem?

[@RaddyDev]

I just tested on wp 6.4.3 and it seems to work for me. Do you get any errors? Maybe try to force a style with important on just to see if it makes a difference. Example: .wp-block-heading { color: red!important; }

[@fodorsolya]

@@RaddyDev thanks. i restarted the whole process, now it works. i don't know what the problem was 😅 thanks again❤

[@apedreams277]

Custom css is not working for me. Is this the right code for the functions.php file?

[@RaddyDev]

It could be a caching. Try Ctrl + Shift + R on the page. The code looks okay to me

[@Avat]

@@RaddyDev That worked for me 😃 (not deleting cache on the website itself)