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

6 ай бұрын

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!

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!

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

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

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

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

wow 😍😍😍

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

4 ай бұрын

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.

Thanks. for this tutorial.

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

This was excellent mate! Thanks for your time. Compared to basic coding, I find Wordpress really confusing.

Thanks a lot, great tutorial

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

Thank youu a lot

@RaddyDev

7 ай бұрын

Welcome 😊

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

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

10 ай бұрын

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

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

@RaddyDev

11 ай бұрын

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

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

11 ай бұрын

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

@everyday_history

8 ай бұрын

What's a CBT?

@marcodibona

8 ай бұрын

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

@ogisan-hr2gp

8 ай бұрын

C*ck and ball torture?@@everyday_history

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

@RaddyDev

8 ай бұрын

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

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

6 ай бұрын

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

6 ай бұрын

@@RaddyDev tks so much!!!!

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_c

Ай бұрын

​@@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_c

Ай бұрын

@@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 😅

subbed :)

@RaddyDev

11 ай бұрын

Thanks for the sub!

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 :)

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

9 ай бұрын

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

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.

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

@RaddyDev

9 ай бұрын

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

9 ай бұрын

@@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?

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

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

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

@RaddyDev

8 ай бұрын

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

8 ай бұрын

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

@RaddyDev

8 ай бұрын

​@@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

8 ай бұрын

@@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

8 ай бұрын

​@@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?

39:42

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

11 ай бұрын

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

11 ай бұрын

@@RaddyDev much appreciated

@etzbetz

8 ай бұрын

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

@RaddyDev

8 ай бұрын

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

This was so helpfull but what about Woocommerce.

@RaddyDev

8 ай бұрын

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. kzread.info/dash/bejne/c4CN2rJ6mrfKms4.html No need to watch it all, it's the same concept :-)

@bellatrixhp7

8 ай бұрын

@@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

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

@RaddyDev

11 ай бұрын

Already made one: kzread.info/dash/bejne/X36rsqygkZjZgZM.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

11 ай бұрын

@@RaddyDev thanks so much :)

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

6 ай бұрын

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.

Is everything Free in this tutorial?

@RaddyDev

8 ай бұрын

Yep, everything I used in this tutorial is free

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

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, ...

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

5 ай бұрын

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

5 ай бұрын

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

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

@RaddyDev

11 ай бұрын

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

@Avat

9 ай бұрын

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