Wow! This is a great tutorial. The best one on KZfaq for modern WordPress. Better than sitting through 40 hours of videos. It got me exactly where I needed to be.

Great video ! Here is why sometime you were not able to refresh your style : "By default WordPress caches the Stylesheet that gets generated out of theme.json. For development purposes you can bypass that caching by enabling debug mode via the WP_DEBUG global in your wp-config.php. (SCRIPT_DEBUG also achieves the same thing)"

I guess you've figured out by now that everything should be in some sort of container, group/row/column. That's how you get more options like background/padding/margin and block spacing. Left/right margins are available on some blocks but not containers. Groups and a single column give you that inherit default layout(width). Rows give you horizontal and vertical alignment. Columns(two or more) give you block spacing. Then it's just a matter of mixing and matching and nesting in different ways to get the outcome you're looking for. That just takes trial and error until you learn them. I did not know adding background color adds padding. Explains some issues I've been having. As for your Read Time, Brainstorm Force has a plugin - Read Meter - Reading Time & Progress Bar and it has a shortcode that can be added to your Single Post template. A CPT would be another way. The plugin automatically calculates the time with an algorithm. Also comes with an optional progress bar that shows readers how far along they are. Blockpress theme has some options you can turn on like Back to Top button, Enable Progress bar on posts, Enable Floating TOC on posts. Might check their code and get some clues.

Brilliant, I just couldn't find a way in to try and understand all that code. Thanks Raddy, great job.

Great content man. Congrats! Very helpful!

Laragon installation is extremely simple. Go to their website, download the file and then install. No further configuration is required. 6.1.1 Updates (good stuff) - please read below 1) Change WP_DEBUG from "wp-config.php" to true. This will solve caching issues and also it will give you helpful errors. 2) In functions.php you no longer need to set theme defaults and register block styles. Jump straight to Enqueue Styles. 3) You can now enable most FSE UI tools such as Borders, Padding, Margin, Spacing, etc.. by adding "appearanceTools" inside the settings "Settings" object. Set it to true. 4) There is now a new option called "useRootPaddingAwareAlignments". It lives in the Settings object. You can see it to true and adjust the padding around your layout. What do you ppl think of the FSE? Is it a Yay or Nay for you? I hope that the video gives you a good foundation on how to create your own custom theme.

Thanks a lot. This is a helpful explanation to explore the FSE.

Raddy, you are a saviour!!! i love this video! thank you sooo so much! i have learnt a lot

Full website refresh: ctrl + shift + r That saves me, when the browser cached the styles.css and avoids struggle like on 1:20:00

This is the best tutorial on this topic

Thanks so much for these unvaluables tutorials

This is a great tutorial. The best one on KZfaq

Raddy, thank you so much! This is just what I was looking for so long! You did really great job! 👏

Thank you for sharing with us this knowledge!

woahh just found this, subscribed!! thank you raddy!

Great tutorial! One remark: if you use clamp for font sizes, you can have nasty surpises like when you have multiple h-tag but the number of characters different. One can be bigger than the other.

Great video Raddy!

Thank you very very much! Great job!

Excellent work!

Thank You...I really appreciate it.

So you can "shift + c;ick refresh" and it will force a hard reload of the page. Sometimes when you refresh it just pulls from the cache.

very well explained

Cool editing 😎 👌

If you use Ctrl + Shift + R - it will refresh properly with clearing any cached css or js :)

Wow! Great this tutorial :)

this is soooo helpful! thanks a lot!

Oh great, we have a "modern" version of the spacer gif - that was very popular around 1997 - to make menu elements have just a little space around them … brilliant!

To disabling caching, always set WP_DEBUG to true inside wp-config.php file while doing development. I just found out that on the official documentation of theme.json.

Hi Raddy, definitely everyone who knows WordPress will love this video. I have learnt a lot from this video alone, specially about FSE. I have a question too. Will it make very slow if I use Astra + Spectra to build my website or do you recommend build it from base theme or with a custom theme? Thank you once again. ❤

Impressive Tutorial! Thank you very much for the help. I have question, I saw that you have autocomplete when you write in theme.json, what extension are you using?

The big take away from this video is, that it perfectly shows how to spend a LOT of time building a Theme that an optional client would blow up within an hour … so, we'll make our money providing support instead of creating solutions. This approach may be suitable for an individual who likes fiddling around with random settings and files - but not as a true CMS solution where the client ONLY have to focus on content. Thanks for enlighten me on this …

What I think about FSE? It is a new paradigm. So most of us have to get used to the new way of doing .... everything.

wonderfull !

thanks for this video

Also, in 6.1 they have replaced "inherit default layout" with "inner blocks use content width" -- very different

I use a trick for this cache bug, on the styles version I add a time stamp variable that's change the styles version every time I reload the page. Works fine just need to be removed in production 😂

28:08 Just in case anyone else can't find template parts, for me they were hiding under Patterns.

Thanks a lot

Since you are creating a FSE theme you could've just used "Create Block Theme" plugin. No coding required and it will create a full blown FSE theme from scratch. The coding part in your video might intimidate some viewers. Thanks.

Hello dear Raddy - Brilliant clip - thanks. your videos are a great resource:. Would you do some vids about the new Version 6.1 That would be awesome!

is there any way to not have mobile site and only publish a "desktop" site ? Or force to see desktop even on mobile ? I'm having hard time to find info on that...

I have started the video but I have a question... can I share this theme with other people as well to use it as their theme? Because this is what I am exactly looking for. I am not sure cause you are working on the design in the editor and you don´t write the css in vs code for example... a bit confusing And also I have copy pasted every code to the PHP file and then I modified it and it throws errors but the WP site works for now. I don´t know what´s wrong.

Great tutorial. What is the color theme you are using for VSCode?

I was able to follow along until about the point where you did inherent default width for the group part.. it seems to have changed in my version.. also the template parts is now under a diff section.. stuff changes so fast its hard to follow videos anymore :(

Hey Thank you for your tutorial. I have opened the folder in vscode But changes I make on vscode, don't show on wordpress. Please what can I do?

Hi Raddy, do you have any tutorial building WP theme using some kind of starter template + Bootstrap? I'm a newbie to WordPress (usually use frameworks, not CMS) and I just got a WP project from client and I have to implement a custom theme. The layout will be given to me and I've been researching for the best way to implement custom theme in WordPress as of 2022. I've taken a glance on UnderStrap, but the project has not been updated anymore + I cannot find any tutorial using their latest version. Also I cannot find any active community, sadly :') Or do you have any suggestion? Perhaps building WP custom theme from scratch is not something relevant today? Thanks :)

so how do you package the theme once it's done so you can share it with others?

Is there any way I can download a zip file of the entire code of the website we just created using FSE?

It would be good if you put the project into a GitHub repo, so we don't have to manually and painfully transcribe from video to reality. For that, I would buy you a coffee!

what is the app you are using when you show how things look on the small / large screens?

hey we can create theme using this fac and sell those on themeforest without any issue???

hello thanks for the tutorial. I had a lot of problems with getting a google font to work. I eventually found in the browser console: "Unknown descriptor ‘,’ in @font-face rule. Skipped to next declaration." My original font family was "'Domine', sarif" I had to remove the ", sarif" from the fontFamily and fontFace declarations to get it to work.

I have to say I am not really a fan of this FSE change. I understand the reasoning behind it but I think it is over all not as good of a dev experience than classic Wordpress. Having all the theme settings in strings in a JSON file also just seems like it would be prone to issues with spelling errors like at 1:19:20, it just seems like this is less coding and more clicking to me at least...

Does elementor support in this theme perfectly? Or i have to add some code for that.. Can u make a theme in which use elementor at last too.

The mobile nav is a bit crap. Any suggestion on how to improve it?

What's happened to the PHP suffix for the header and footer? I still use .PHP.

thanks for movie

1:34:43 in my WordPress the spacer is showing vertically. how can I change that to horizontal?

Great tutorial!!! For some reason I don't see any source code and pages are blank white althoug I did every steps first 30 min about. Can I modify styles manually? Also that editor(beta) is gone don't know why.. I believe I can install some other FSE plugin also but it might work differently. I think I check my configurations again also.

Is that theme better for seo and security ?

My edits to the home page with the blog posts are not showing when I view my site. only in edit... I have clear the cache and everything...

so how you encounter red underline on wp code (missing preferences/ undefine function) because you only load theme folder instead of whole wp framework from it's root?, do you have some vs extension that you missed to talk about?

🤔15:55 But their site says: "Block themes are not required to manually enqueue stylesheets for both front-end and editors"

1:56:03 but there is no link to pictures in description(

Hi Rad, i'm actually following the steps on your tutorial and I encounter an error, "Fatal error: Uncaught TypeError: call_user_func_array(): Argument #1 ($callback) must be a valid callback, function....", I am new to this stuffs. Thank you

Why everytime I use the QueryLoop its not showing?

How can I use this with the updated Twenty Twenty Three? I have it saved and want to apply using the Twenty Twenty Three instead of Twenty Twenty Two... Is there just something I can change in the VSCode?

How to do this without coding Can we design and sell website templates without coding like only templates

My font has not changed for my actual page only the editing page

I already have WordPress installed. So my question is how to deploy WordPress in to VS code. Let me know bro. I do want to make custom theme like you.

posts not visible in home page how to fix it bro ?

Can i use elementor to this theme;

is there a way to install an existing site into Laragon?

If you do not have an 'editor' button in the appearance to create a header, how else can you create a header? please help, anyone lol

it did not working me

Thanks, adding define('WP_DEBUG', true); in the wp-conf.php helped me for the refresh problem. It turns the cache off.

Do we need to code ?

Okay. I will say it. This abomination will kill Wordpress. Developers shouldn't be appalled by writing code for WordPress. That's the first step to die for any service/framework/CMS. HTML CSS in a PHP array? Almost no documentation? Some parts are in the editor? other parts in PHP and other parts of the theme inside HTML files? Who the hell designed this? This WILL kill WordPress unless they make it developer friendly. Silly me, I was afraid that my WP knowledge is getting obsolete... after watching your video and looking into the new templates they provide with fresh installs... It's safe to say that the old way of creating templates is not going anywhere for a long time.

Hey

I can't grasp the whole FSE concept and how it's usefull for theme developers. Why developers forced to develop their themes or client sites in VISUAL editor. What the f...Gutenberg after two freaking years still lacks of a lot of common elements. Tabs, accordion, modal window etc etc. Wordpress getting more confusing after each update. Now we have oldschool classic themes, block themes (gutenberg) and FSE themes. It's confusing for devs and even more confusing for clients who have no clue about all that mess.

Nobody explains how to get these things running, totally lost me at 2 minutes, please explain how to use Laragon OR tell us what we need to do the thing you are explaining. Its so frustrating.

"Hi today we will be building a site with the full size editor" * spends the first TWENTY MINUTES WRITING PHP CODE BY HAND Shit, I just set up a test site on my multi and started a blank theme.

Christ, so now they've moved all CSS into a JSON file? Could we please get some grown ups added to the team to avoid these lame decisions?

Here is the correct json :) . . . . . "typography": { "fontFamilies": [ { "fontFamily": "'Inter', sans-serif", "slug": "inter", "name": "Inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "100", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-Thin.ttf"] }, { "fontFamily": "Inter", "fontWeight": "200", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-ExtraLight.ttf"] }, { "fontFamily": "Inter", "fontWeight": "300", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-Light.ttf"] }, { "fontFamily": "Inter", "fontWeight": "400", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-Regular.ttf"] }, { "fontFamily": "Inter", "fontWeight": "500", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-Medium.ttf"] }, { "fontFamily": "Inter", "fontWeight": "600", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-SemiBold.ttf"] }, { "fontFamily": "Inter", "fontWeight": "700", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-Bold.ttf"] }, { "fontFamily": "Inter", "fontWeight": "800", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-ExtraBold.ttf"] }, { "fontFamily": "Inter", "fontWeight": "900", "fontStyle": "normal", "fontStretch": "normal", "src": ["file:./assets/fonts/inter/Inter-Black.ttf"] } ] } ] }

So no need for Elementor Pro? and 299.00$us savings