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.
@garth00798987 ай бұрын
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!
@carstenaltena9 ай бұрын
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
@martinkaspar50956 ай бұрын
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
@RaddyDev6 ай бұрын
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.
@dadidesigns6633 Жыл бұрын
Super awesome to land here. Just what I was looking for. Cheers mate
@alasagard Жыл бұрын
wow 😍😍😍
@Adrenaline_nocopyrightmusic Жыл бұрын
Waiting for this kind of tutorial from last 4 months. ❤ thank you Boss
@como.faz.tutoriais Жыл бұрын
The best tutorial for what I was looking for! Thank you! Great work!
@badaramir24 Жыл бұрын
Thanks. for this tutorial.
@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_history10 ай бұрын
What's a CBT?
@marcodibona10 ай бұрын
@@everyday_history it's a drugs!😂 Not it's a code block theme
@ogisan-hr2gp10 ай бұрын
C*ck and ball torture?@@everyday_history
@Shawn-Mosher8 ай бұрын
More of these please, taking a design and converting them to block themes. These are hard to find
@fpavel040611 ай бұрын
Thanks a lot. Eventually I could figure out the WordPress structure...👍
@olivierg156611 ай бұрын
Thanks a lot, great tutorial
@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
@ahmedkhalil76d8 ай бұрын
Thank youu a lot
@RaddyDev8 ай бұрын
Welcome 😊
@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
@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.
@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
@MarceloMarconcini8 ай бұрын
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.
@RaddyDev8 ай бұрын
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
@MarceloMarconcini8 ай бұрын
@@RaddyDev tks so much!!!!
@olga_lc3 ай бұрын
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 👍
@RaddyDev3 ай бұрын
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_lc3 ай бұрын
@@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
@RaddyDev3 ай бұрын
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_lc3 ай бұрын
@@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 😅
@anversadutt Жыл бұрын
subbed :)
@RaddyDev Жыл бұрын
Thanks for the sub!
@monoloops11 ай бұрын
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?
@RaddyDev11 ай бұрын
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
@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
@etzbetz10 ай бұрын
Looks like you've added that now, but to me that archive is invalid/corrupted..@@RaddyDev
@RaddyDev10 ай бұрын
@@etzbetz thanks for letting me know I have re-uploaded the file
@X-factor611 ай бұрын
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.
@RaddyDev11 ай бұрын
Thank you. I've added the file in the Google Drive link
@bellatrixhp79 ай бұрын
This was so helpfull but what about Woocommerce.
@RaddyDev9 ай бұрын
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. kzfaq.info/get/bejne/d7KJq7Nyz7rImp8.html No need to watch it all, it's the same concept :-)
@bellatrixhp79 ай бұрын
@@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
@supafast131410 ай бұрын
Thanks for the video 👍 However is there any simple way to make this block based theme multilingual ?
@RaddyDev10 ай бұрын
I haven't had the chance to look into that yet. I've only done multilingual WP websites using the classic approach and ACF
@BMikel Жыл бұрын
Nobody knows where WP is shifting. Either to Gutenberg Page Builder, or 3rd parties page builders, or Headless technologies.
@a999868 ай бұрын
39:42
@floyd141110 ай бұрын
Hi Randy, would it be possible to make a tutorial on how to migrate a webflow html to a wordpress theme?
@RaddyDev10 ай бұрын
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 :-)
@floyd141110 ай бұрын
@@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?
@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 :)
@jackepner99847 ай бұрын
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...
@jackepner99847 ай бұрын
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.
@renealbrechtsen9743 Жыл бұрын
Would like a WP blocks theme tutorial that's purely written with code.
@RaddyDev Жыл бұрын
Already made one: kzfaq.info/get/bejne/Y7Cng62YxpvXgWQ.html 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 :)
@daeljessabelcaramol49749 ай бұрын
Hi @RaddyDev. Font sizes doesn't work. Any solution? Thank yoU!
@RaddyDev9 ай бұрын
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
@daeljessabelcaramol49749 ай бұрын
@@RaddyDev I'm unable to unable to change font sizes in general like in paragraphs
@RaddyDev9 ай бұрын
@@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.
@daeljessabelcaramol49749 ай бұрын
@@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?
@RaddyDev9 ай бұрын
@@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?
@stewtech10 ай бұрын
Is everything Free in this tutorial?
@RaddyDev10 ай бұрын
Yep, everything I used in this tutorial is free
@vaga75802 ай бұрын
your theme is static. we need dynamic data.
@RaddyDev2 ай бұрын
Can you give an example of something dynamic? Maybe I can incorporate it in the next video
@vaga75802 ай бұрын
@@RaddyDev menu from dashboard, site name from dashboard, grid posts, ...
@anirudhachakrabarty205011 ай бұрын
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...
@fodorsolya6 ай бұрын
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?
@RaddyDev6 ай бұрын
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; }
@fodorsolya6 ай бұрын
@@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
@Avat11 ай бұрын
@@RaddyDev That worked for me 😃 (not deleting cache on the website itself)