Wow! This is a great tutorial. The best one on UA-cam for modern WordPress. Better than sitting through 40 hours of videos. It got me exactly where I needed to be.
Also about caching issue: probably "Disable cache" check mark in devtools -> network can help. Just need to keep devtools opened while reloading a page. I guess it helps me.
Hello, can an ecommerce website be made using kadence free theme with features like: 1. my account icon + icon beside navigation menu in cart icon line in header, 2. forced login/signup authentication before checkout setting? 3. Dynamic pricing as per variant and quantity -automatic prices alter? 4. Buy now button besides add to cart button in products? 5. Above 4 things+ banner and proper functional interactive good looking modern ecommerce website using kadence free theme without Gutenberg blocks without elementor possible? Where to find free pictures for a new website for header & hero section & all, I dont think if we make a website using starter templates its good enough with menus and everything. Which free tgeme is better kadence or blocksy? 🙏 Please help ASAP🙏 your reply & link to tutorial is very important for me 🙏
@@RaddyDev Thanks. It wasnt easy tho. I sacrifised the time to create the videos that I should have been using to do school work. Ive come to realize that squeezing time into my schedule to create content is the only way that ill ever make this UA-cam thing work because I doubt Ill ever have a bunch of spare time to just make videos. Unless I was retired and that aint happening anytime soon lol
@@codefoxx It's tough, but you are doing a great job. School is important as you only get one shot. You could do content related to what you do at school and that might help. Create a startup, sell it for millions and then you can retire 😀
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.
There has been a few good updates since I've uploaded this video. Some will fix the issues that I had previously. I will cover everything in the next video. The only thing that I am missing is more flexibility on the alignment and mobile control. It's hard to do certain things at the moment and I am having to write custom CSS. I don't mind that, but it would be nice not to. Thanks for the comments by the way
I'm not talking about getting the code of your theme; I'm asking How can I get, download, or prepare a code zip file? of website we just created using the FSE and the exact same techniques you have taught. I'm planning to sell this template to other developers, and selling on themeforest how to export a zip file in order to upload on themeforest, they need a zip file to upload. Please guide me, and thanks for replying, you are our hero❤🤗🤗. @@RaddyDev
I think that as long as you export all of your sections so they can be reused and added from the full site editing editor you should be fine. You might want to think of how you can provide updates, and maybe get a test group to test your theme for free and provide feedback
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.
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?
Thank you! The autocomplete comes from the schema link at the top or the theme.json. I've only tested it in Visual Studio Code, but hopefully it works in other editors as well
I see that there are a few FSE themes for sale. I don't see any issues, it's just a new way of building themes. There has been a lot of updates lately, so you might just have to keep on top of them and update your themes. I guess that's more of a customer care thing...
@@RaddyDev also would you please help with - I'm editing shopify theme and in shopify product details page how I can get margin/ padding set in mobile version
That is a very open and tough question to answer. Better than the classic theme development? - i can't see why it would be... Better than multi-pourpose themes? - maybe, since in general it should be faster and speed is good for SEO. There is nothing special about FSE to make it much better for SEO. Not that I know of anyway... Better for security? - potentially, since we are not doing a lot of PHP that can lead to errors and loop holes. Let us know if you find something about both topics :-)
There are two ways I can think of. Everything that you've created in the FSE editor such as Pages and Templates can be saved into their corresponding files. For example your Page Template you can save into "page.html". Your Parts such as the Header you could save into the folder "parts/header.html" and so on. And now the other way would be to try and use the Create Block Theme Plugin. It allows you to create/export themes and so on. Not to shill my video, but you could check out the last one I uploaded on Create a Block Theme. It's only 10 min :-) I hope this helps
Update: that is correct as the styles are mainly done thru the theme.json file. Saying this, if you want to include the style.css file you need to enqueue it manually. Not required, but nice to have
@@RaddyDev Thanks for the reply and for creating a video on FSE. Most of the tutorials on youtube are outdated and don't cover block themes. I must say your tutorial is easy to follow. I'm new to web development. So far I've learned python, HTML, and CSS and currently onto advanced javascript. Any advice on what I should learn next to be good with wordpress.
I am glad to hear that you found the tutorial easy to follow. HTML, CSS and JS is already a good start. Just add PHP and you are good to go. With those languages you can build pretty much anything on WordPress.Themes, plugins, blocks, custom functions ect... Those skills are also transferable so it's not like you are only learning WordPress.
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...
It could be a caching issue. You can disable caching from your wp-config.php - add this: define('WP_CACHE',true); Give your browser a hard refresh - CTRL + SHIFT + R and see if that fixes the issue
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.
I think that the horizontal spacer only works in the navigation. So just make sure that it's in there like I have on the video. There is also a new way of doing this which is called blockGap. You can enable that from the theme.json and then controll the gap on the menu.
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 :(
I haven't had the opportunity to review the recent updates from the past month. The pace of things is incredibly fast right now, and unfortunately, tutorials tend to become outdated quite rapidly. I will make a new video at some point. I assume that the Group part is just moved somewhere
It's the Inspector that is built in the browser. Right click and Inspect. Then you have a little Mobile / Tablet icon on the left side of the panel. Shortcut Ctrl + Shift + M to toggle device tool bar after you open the inspector
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. ❤
I haven't used that combination, so it's hard for me to say. Astra has a fairly good reputation and it's supposed to be fairly lightweight. I was just reading about Spectra on their official website and they say that they have zero bloat and you can get 100% on the Core Web Vitals which is fairly important for SEO. If you get a good hosting, and you optimise your website as much as you can, I am sure that you can make it work. Use CDN if you can, utilise caching and optimise your content as much as you can. I will have to try Spectra soon
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.
I think it's awesome for those who are used to MS Word, etc and find the dashboard a challenge. I develop for non-profits so it's a no-brainer for them.
Love it myself. Not a dev so finally being able to create multiple headers, footers, add sidebars to a theme that has none and using all those parts whenever/wherever I want is the bomb. Plus they're fast. All my basic blog/brochure/portfolio sites now score 98-100 in pagespeed/gtmetrix tests now.
I think it'll be amazing in a year or so, if the wordpress team actually listens to people and fixes some of the problems instead of bulling ahead with more features people didn't ask for.
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.
You can save everything you do in the FSE editor as a reusable block. For example, you can build multiple styles of headers, footers, hero sections and so on. After you finish building a selection you can copy the code and save it. For example, when you finish building your Header, you can copy the code and save it in your theme folder and then parts. See the example at 1:40:26 This way, when you install the theme on another website you have the option to drag and drop the blocks that you've built. This way you can build all of your pages. Your index, page, search, single and so on. Build it inside the FSE and then copy and paste the code inside the HTML template. And then the styles such as colours will be controlled by theme.json. Sorry for the long reply - in a rush, I hope this makes sense. In short you can do that 🙂
@@RaddyDev Thank you very much for the detailed explanation! :) Unfortunately the functions.php file doesn´t work for me at all I am only getting errors for every function "Fatal error: Uncaught Error: Call to undefined function add_paperless_theme_support() " and when I inspect the code from the website the style.css file isn´t there.
@@An-yh2bl It could be a small typo that you have. That's pretty much saying that the function "add_paperless_theme_support" does not exist. In the tutorial, I called it "paparless_theme_support". so you create the function like so: function paparless_theme_support() { // code inside } and then you start the function like so: add_action( 'after_setup_theme', 'paparless_theme_support' ); In the latest update, you don't need to do that anymore. But I see that you want to add the style.css. So your full functions.php file will look just like this:
Quite basic, isn't it. The easiest thing you can do is to modify the CSS a little bit to make it look better. Other than that, you could create your own custom block using ReactJs. Hopefully we'll have more options soon to modify without having to code
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.
One or more required modules are missing Performance PHP modules perform most of the tasks on the server that make your site run. Any changes to these must be made by your server administrator. The WordPress Hosting Team maintains a list of those modules, both recommended and required, in the team handbook (opens in a new tab). Warning The optional module, fileinfo, is not installed, or has been disabled. Warning The optional module, imagick, is not installed, or has been disabled. Error The required module, gd, is not installed, or has been disabled. Warning The optional module, intl, is not installed, or has been disabled. --------------------In tools----------------------- How can I install those additional modules?
Don't use the lates PHP version. Try to use php 8 if you can. If you are using Laragon, you can literally download PHP 8 from the official website and extract it in Laragon ( they have instructions) super easy to do. Try that
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 :)
Hey Ihsan, I think in the past 4-5 years, WordPress has been becoming more focused on the Full Site Editing… This is the new way of developing custom themes. Understrap is using the traditional method using PHP. I guess this is why there hasn't been any big updates. There is not much to update.. You can still develop themes in the traditional way. WordPress will be backwards compatible, so you won’t have any issues if you decide to go that route. It’s a solid route to be fair. Instead of Understrap, I typically use Underscores as it’s bare bones starter theme. You can add whatever CSS framework you want to it. I did do a video on it, using Bootstrap but I think that I was making an E-commerce website with it. You could watch the start of the video to see the setup if that helps. You'll see it under my UA-cam page. I think that WordPress is still relevant and it’s not going anywhere any time soon. Saying this there are a lot of great options now. I guess it depends on the requirements. WordPress is defiantly not the solution to everything. If you know something like Angular / React you could build them a website with a headless CMS. Plenty of amazing options
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?
@@RaddyDev maybe that not what i asked, why your code still ok (function or class w/o red underline) while you just open theme folder instead of wp from the root of wp framework on vs code, do you use some extension, for me doing so and guess what vs code have no clue about such function on wp core and there is when open vs code from theme folder, but still ok if i open wp CMS/framework from the root and that too many folder level to the theme folder as caviat. anyway your code is OK. another thing, i have already debugging my code almost an hour i did'nt know what i was do wrong, i've found in your code on theme.json "fontFamily": "'Inter', sans-serif", that not working for me instead of loading Inter font-family, wp load sans-serif instead, in the end i removed sans-serif part and code works, i tested on latest WP
I normally open just the theme folder in Visual Studio Code as I don't tend to mess around too much with the core WordPress files. Like you said, a lot of folders and files in there. I haven't got any WordPress extension. The only thing that I have added in the theme.json is the Auto Complete schema code which helps a lot. That is in the first line of the file "$schema":... Interesting about the font as if you go to Google fonts and select it, it comes up as 'Inter', sans-serif. Whatever works I guess 😀, i am glad that you fixed it anyway
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.
Hey, Stephen thanks for sharing that. I haven't tried adding a font with the @font-face rule, but that's good to know. I guess it's just best to add the fonts inside the theme.json file
@@RaddyDev Hey, thanks for the response. To clarify it was the fontFace deceleration within the theme.json that was making the error. It didn't want any commas in the family name, so I was unable to put in a fallback font.
@@RaddyDev i can see the posts in home page when editing mode , but after published the right side column appear ie , category, author and search bar but left side posts won't appear in home page ... What was the error
Most likely a cache problem. If the font has changed on the edit page it means that you've added it correctly and it's working. Try to refresh, maybe do Ctrl + Shift + R
In your main wordpress folder, find wp-config, open it, search for debug and from false put it to true. That will help with the cache and also it will show you if you have any major errors that could be causing it
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...
The error that you pointed was kind of my fault. If you put WP_DEBUG to true, that solves the typo issues and the caching (mostly). Working in the JSON file is what I don't like very much. It's not that it's hard, it's just confusing especially when I have to keep scrolling up and down. I think that the FSE/Guttenberg is supposed to become a no-code type of editor. You can still make your own guttenberg plugins, but the layout will be mostly drag and drop
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?
So you have developed a website using Twenty Twenty Two and want to move to Twenty Twenty Three? The easiest way would be to activate Twenty Twenty Three and rebuild the pages using FSE and Gutenberg. Unfortunately I don't think that there is an easy way to convert. I will have to do that on my blog as well at some point. Currently using the classic PHP method :)
@@RaddyDev Can I use the same code and apply it to different themes? I am trying to figure out what needs to be changed in the VSCode.... like if you used what you have in this video with another site and different theme?
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 😂
It's leading to the point where you won't have to. I think that the idea is to make it accessible to everyone. Check out the link I send in the previous comment
Did you mean open the code in Visual Studio Code? If you have WordPress already installed you can start creating your theme. In the main directory of your WordPress installation there will be a folder called "wp-content". In there you'll see "themes". Create your theme folder there and open in VSC by doing, file -> open folder. I hope this helps
@@RaddyDev Bro downloaded vs code and created folder inside root in cpanel. If I navigate through open folder it has access only to local folders. But how can I open cpanel and dò live editing like this video
I understand what you are saying now. If you want to use visual studio code to change your files remotely you'll need an FTP plugin. Most of them are terrible... Ideally the best way to develop would be to do it locally like I have. Dreamweaver used to have an amazing FTP option where you can see all files and change them instantly. You can use the cPanel editor, but that would be painful
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
Do you know what PHP version are you using? Have you installed any additional plugins that could cause the errors? Maybe try disabling them to see if it goes away
@@RaddyDev Thanks for the reply.. really appreciated it. regarding the error, I figured out the cause of it, in the functions.php in the enqueue style I just change the name of the style into a one-word name, no hypens or underscore and save it. it works. also I deactivated the plugins. Thanks Rad.
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.
The plugin didn't exist back then and as far as I know that was pretty much the only option. I did cover "Create Block Theme" a few months ago. Good plugin, I'll be using it in the next WP video :)
If you don't have the 'Editor' button you are most likely using a classic theme. You'll have to create a new FSE theme to be able to use it. I mean, as a minimum you can create a templates folder with a few of the main templates, parts and the theme.json file. That will enable it, but that's pretty much making a new theme. Where you thinking of creating the header in the FSE, but continuing to use your current pages?
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!
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!
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 …
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.
They're doing this to stay competitive with technologies like Canva, SquareSpace, Wix.I for one love being able to create multiple headers/footers/sidebars and use them wherever I want. Most themes with plenty of layout options also score terrible because they're bloated. I like my 98-100 pagespeed scores with block themes. Why should us end users need a bloated theme, premium theme or several plugins for layouts? They all bog things down.
@@jhnpldng I didn't say that is a bad idea. I can see how this will save Wordpress (It's dying at the moment for the reasons you mentioned in your comment) but the execution is poor and not dev friendly. If devs decide to learn something else - that's the same death. No support, plugins, themes = Wix, Canva, SquareSpace, etc.
I feel roughly the same way, but I found a workaround that makes blocks palatable. The 1 feature I actually want out of block editing is to be able to create a prebuilt chunk of blocks that can be summoned by my clients (or me as I build out the site), can be placed and filled out, which will still let me edit the styling and arrangement on all of them, but each has unique content. Not templates, template parts, reusable blocks, or patterns provides this. Coding a custom block is like 10 layers of code for some unfathomable reason. Luckily, I found the plugin Lazy Blocks, which works exactly right, isn't naggy or hiding vital features behind a paywall, and as a bonus, lets me code clean controllable normal code to format the whole thing. I built some flexbox and grid customs, and now I can just build it out once, plop 10 artists profiles down, fill them out, and then rework the structure if I need to.
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.
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.
I think that the idea is to make developing WP themes easier and lower the entry barrier for new developers. I would like to think that the full site editing experience will get better and there will be a ton on plugins/blocks to choose from in the near future. It's quite a controversial topic at the moment. I think that the traditional way of developing themes won't go away any time soon. WordPress is backwards compatible so you won't have to worry
FSE and Block themes are the same thing. Gutenberg is an experimental plugin, consider it Alpha, while the FSE feature of Block themes is Beta. As far as clients, they run the gambit. I have one that writes his posts in html because he's old school. I'm running a block theme but installed Classic Editor plugin for him. Most prefer the wysiwyg aspect of the block editor once they get used to it. Every paragraph being it's own block, stupid.
"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.
Wow! This is a great tutorial. The best one on UA-cam for modern WordPress. Better than sitting through 40 hours of videos. It got me exactly where I needed to be.
Brilliant, I just couldn't find a way in to try and understand all that code. Thanks Raddy, great job.
It's messy having to write the full JSON file. Saying this, once you have an example and you understand it I am sure that it will get easier
This is the best tutorial on this topic
Thank you! Very kind of you to say that
Great content man. Congrats! Very helpful!
Appreciate it!
Raddy, you are a saviour!!! i love this video! thank you sooo so much! i have learnt a lot
You're very welcome, Sara! Thank you for sticking around
Thank you for sharing with us this knowledge!
Thanks so much for these unvaluables tutorials
Glad you like them!
Waiting for more 🙏@@RaddyDev
This is a great tutorial. The best one on UA-cam
Glad you think so!
woahh just found this, subscribed!! thank you raddy!
Thanks for the sub!
Thanks a lot. This is a helpful explanation to explore the FSE.
Glad it was helpful!
Raddy, thank you so much! This is just what I was looking for so long! You did really great job! 👏
Also about caching issue: probably "Disable cache" check mark in devtools -> network can help. Just need to keep devtools opened while reloading a page. I guess it helps me.
That's a good one! Thank you for sharing. Turning on wp-debug to true also does the job
Hello, can an ecommerce website be made using kadence free theme with features like: 1. my account icon + icon beside navigation menu in cart icon line in header, 2. forced login/signup authentication before checkout setting? 3. Dynamic pricing as per variant and quantity -automatic prices alter? 4. Buy now button besides add to cart button in products? 5. Above 4 things+ banner and proper functional interactive good looking modern ecommerce website using kadence free theme without Gutenberg blocks without elementor possible? Where to find free pictures for a new website for header & hero section & all, I dont think if we make a website using starter templates its good enough with menus and everything. Which free tgeme is better kadence or blocksy? 🙏 Please help ASAP🙏 your reply & link to tutorial is very important for me 🙏
Cool editing 😎 👌
Thank you, I appreciate that! 👊😎 You've been smashing the videos lately, I like the consistency
@@RaddyDev Thanks. It wasnt easy tho. I sacrifised the time to create the videos that I should have been using to do school work. Ive come to realize that squeezing time into my schedule to create content is the only way that ill ever make this UA-cam thing work because I doubt Ill ever have a bunch of spare time to just make videos. Unless I was retired and that aint happening anytime soon lol
@@codefoxx It's tough, but you are doing a great job. School is important as you only get one shot. You could do content related to what you do at school and that might help. Create a startup, sell it for millions and then you can retire 😀
Great video Raddy!
Thank you!
Excellent work!
Thank you! I appreciate it 👊😎
very well explained
Glad you think so!
Thank you very very much! Great job!
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)"
Full website refresh: ctrl + shift + r
That saves me, when the browser cached the styles.css and avoids struggle like on 1:20:00
Thank You...I really appreciate it.
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.
There has been a few good updates since I've uploaded this video. Some will fix the issues that I had previously. I will cover everything in the next video. The only thing that I am missing is more flexibility on the alignment and mobile control. It's hard to do certain things at the moment and I am having to write custom CSS. I don't mind that, but it would be nice not to. Thanks for the comments by the way
Is there any way I can download a zip file of the entire code of the website we just created using FSE?
Is there any way I can download a zip file of the entire code of the website we just created using FSE?
The theme code is linked in the description
I'm not talking about getting the code of your theme; I'm asking How can I get, download, or prepare a code zip file? of website we just created using the FSE and the exact same techniques you have taught. I'm planning to sell this template to other developers, and selling on themeforest how to export a zip file in order to upload on themeforest, they need a zip file to upload. Please guide me, and thanks for replying, you are our hero❤🤗🤗. @@RaddyDev
@@pratikshamangrulkar70 I haven't sold FSE themes before, but I will think about this and come back to you
I think that as long as you export all of your sections so they can be reused and added from the full site editing editor you should be fine. You might want to think of how you can provide updates, and maybe get a test group to test your theme for free and provide feedback
this is soooo helpful! thanks a lot!
Thanks for the comment!
Wow! Great this tutorial :)
Glad you like it!
thanks for this video
Most welcome
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.
Thanks a lot
Most welcome
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.
Thank you! That's a good point
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?
Thank you! The autocomplete comes from the schema link at the top or the theme.json. I've only tested it in Visual Studio Code, but hopefully it works in other editors as well
@@RaddyDev It works 🙏
1:56:03 but there is no link to pictures in description(
Under credit you will see the image names and authors. Copy and paste in unsplash dot com
hey we can create theme using this fac and sell those on themeforest without any issue???
I see that there are a few FSE themes for sale. I don't see any issues, it's just a new way of building themes. There has been a lot of updates lately, so you might just have to keep on top of them and update your themes. I guess that's more of a customer care thing...
@@RaddyDev also would you please help with - I'm editing shopify theme and in shopify product details page how I can get margin/ padding set in mobile version
Great tutorial. What is the color theme you are using for VSCode?
I am using Dracula (the free version) 🧛♂️
Is that theme better for seo and security ?
That is a very open and tough question to answer. Better than the classic theme development? - i can't see why it would be... Better than multi-pourpose themes? - maybe, since in general it should be faster and speed is good for SEO. There is nothing special about FSE to make it much better for SEO. Not that I know of anyway... Better for security? - potentially, since we are not doing a lot of PHP that can lead to errors and loop holes. Let us know if you find something about both topics :-)
@@RaddyDev I'm learning English so my question is not what I mean. I mean this theme is good for seo and security right?
@@hunghoang2278 oh i see. Yes, it's good for SEO & Security
wonderfull !
so how do you package the theme once it's done so you can share it with others?
There are two ways I can think of. Everything that you've created in the FSE editor such as Pages and Templates can be saved into their corresponding files. For example your Page Template you can save into "page.html". Your Parts such as the Header you could save into the folder "parts/header.html" and so on. And now the other way would be to try and use the Create Block Theme Plugin. It allows you to create/export themes and so on. Not to shill my video, but you could check out the last one I uploaded on Create a Block Theme. It's only 10 min :-) I hope this helps
@@RaddyDev Appreciate the reply Raddy, big love ❤
🤔15:55 But their site says:
"Block themes are not required to manually enqueue stylesheets for both front-end and editors"
Update: that is correct as the styles are mainly done thru the theme.json file. Saying this, if you want to include the style.css file you need to enqueue it manually. Not required, but nice to have
@@RaddyDev Thanks for the reply and for creating a video on FSE. Most of the tutorials on youtube are outdated and don't cover block themes. I must say your tutorial is easy to follow.
I'm new to web development. So far I've learned python, HTML, and CSS and currently onto advanced javascript. Any advice on what I should learn next to be good with wordpress.
I am glad to hear that you found the tutorial easy to follow. HTML, CSS and JS is already a good start. Just add PHP and you are good to go. With those languages you can build pretty much anything on WordPress.Themes, plugins, blocks, custom functions ect... Those skills are also transferable so it's not like you are only learning WordPress.
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!
Thank you! The 6.1 updates are looking good. I am looking forward to test them and I do have two new videos planned
@@RaddyDev Wow, that sounds great! I can't wait 🙂
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...
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?
It could be a caching issue. You can disable caching from your wp-config.php - add this: define('WP_CACHE',true); Give your browser a hard refresh - CTRL + SHIFT + R and see if that fixes the issue
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.
1:34:43 in my WordPress the spacer is showing vertically. how can I change that to horizontal?
I think that the horizontal spacer only works in the navigation. So just make sure that it's in there like I have on the video. There is also a new way of doing this which is called blockGap. You can enable that from the theme.json and then controll the gap on the menu.
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 :(
I haven't had the opportunity to review the recent updates from the past month. The pace of things is incredibly fast right now, and unfortunately, tutorials tend to become outdated quite rapidly. I will make a new video at some point. I assume that the Group part is just moved somewhere
If you use Ctrl + Shift + R - it will refresh properly with clearing any cached css or js :)
P.S. Amazing tutorial, thank you! ♥
what is the app you are using when you show how things look on the small / large screens?
It's the Inspector that is built in the browser. Right click and Inspect. Then you have a little Mobile / Tablet icon on the left side of the panel. Shortcut Ctrl + Shift + M to toggle device tool bar after you open the inspector
What's happened to the PHP suffix for the header and footer? I still use .PHP.
It's a new way of making WP themes and it's mainly html files
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. ❤
I haven't used that combination, so it's hard for me to say. Astra has a fairly good reputation and it's supposed to be fairly lightweight. I was just reading about Spectra on their official website and they say that they have zero bloat and you can get 100% on the Core Web Vitals which is fairly important for SEO. If you get a good hosting, and you optimise your website as much as you can, I am sure that you can make it work. Use CDN if you can, utilise caching and optimise your content as much as you can. I will have to try Spectra soon
Is there any way I can download a zip file of the entire code of the website we just created using FSE?
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.
I think it's awesome for those who are used to MS Word, etc and find the dashboard a challenge. I develop for non-profits so it's a no-brainer for them.
Love it myself. Not a dev so finally being able to create multiple headers, footers, add sidebars to a theme that has none and using all those parts whenever/wherever I want is the bomb. Plus they're fast. All my basic blog/brochure/portfolio sites now score 98-100 in pagespeed/gtmetrix tests now.
It's good for quick and simple tasks, but I love to code in a real editor more...
I think it'll be amazing in a year or so, if the wordpress team actually listens to people and fixes some of the problems instead of bulling ahead with more features people didn't ask for.
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.
You can save everything you do in the FSE editor as a reusable block. For example, you can build multiple styles of headers, footers, hero sections and so on.
After you finish building a selection you can copy the code and save it. For example, when you finish building your Header, you can copy the code and save it in your theme folder and then parts.
See the example at 1:40:26
This way, when you install the theme on another website you have the option to drag and drop the blocks that you've built. This way you can build all of your pages. Your index, page, search, single and so on. Build it inside the FSE and then copy and paste the code inside the HTML template. And then the styles such as colours will be controlled by theme.json. Sorry for the long reply - in a rush, I hope this makes sense. In short you can do that 🙂
@@RaddyDev Thank you very much for the detailed explanation! :)
Unfortunately the functions.php file doesn´t work for me at all I am only getting errors for every function "Fatal error: Uncaught Error: Call to undefined function add_paperless_theme_support() " and when I inspect the code from the website the style.css file isn´t there.
@@An-yh2bl It could be a small typo that you have. That's pretty much saying that the function "add_paperless_theme_support" does not exist. In the tutorial, I called it "paparless_theme_support".
so you create the function like so:
function paparless_theme_support() {
// code inside
}
and then you start the function like so:
add_action( 'after_setup_theme', 'paparless_theme_support' );
In the latest update, you don't need to do that anymore. But I see that you want to add the style.css. So your full functions.php file will look just like this:
Goat, have not found anything on youtube for creating current up to date themes, based on the WordPress docs.
I see a lot of out of date practices.
The mobile nav is a bit crap. Any suggestion on how to improve it?
Quite basic, isn't it. The easiest thing you can do is to modify the CSS a little bit to make it look better. Other than that, you could create your own custom block using ReactJs. Hopefully we'll have more options soon to modify without having to code
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...
That's strange. Have you tried to re-do the section which contains your blog posts?
I had this problem too. What I did was for Query Loop settings, I untick "Inherit query from template." That will do for now.
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.
Yes and in preview I don't see nothing also. It seems that I miss some link but don't know what...
One or more required modules are missing Performance
PHP modules perform most of the tasks on the server that make your site run. Any changes to these must be made by your server administrator.
The WordPress Hosting Team maintains a list of those modules, both recommended and required, in the team handbook (opens in a new tab).
Warning The optional module, fileinfo, is not installed, or has been disabled.
Warning The optional module, imagick, is not installed, or has been disabled.
Error The required module, gd, is not installed, or has been disabled.
Warning The optional module, intl, is not installed, or has been disabled.
--------------------In tools-----------------------
How can I install those additional modules?
That's a strange one. It sounds like it's an issue with your hosting. Could you contact them maybe?
@@RaddyDev I have it localy for development and study purpose but goal is to move theme to some host.
Don't use the lates PHP version. Try to use php 8 if you can. If you are using Laragon, you can literally download PHP 8 from the official website and extract it in Laragon ( they have instructions) super easy to do. Try that
Also, in 6.1 they have replaced "inherit default layout" with "inner blocks use content width" -- very different
I will have to look into it. Thank you
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 :)
Hey Ihsan,
I think in the past 4-5 years, WordPress has been becoming more focused on the Full Site Editing… This is the new way of developing custom themes.
Understrap is using the traditional method using PHP. I guess this is why there hasn't been any big updates. There is not much to update..
You can still develop themes in the traditional way. WordPress will be backwards compatible, so you won’t have any issues if you decide to go that route. It’s a solid route to be fair. Instead of Understrap, I typically use Underscores as it’s bare bones starter theme. You can add whatever CSS framework you want to it. I did do a video on it, using Bootstrap but I think that I was making an E-commerce website with it. You could watch the start of the video to see the setup if that helps. You'll see it under my UA-cam page.
I think that WordPress is still relevant and it’s not going anywhere any time soon. Saying this there are a lot of great options now. I guess it depends on the requirements. WordPress is defiantly not the solution to everything. If you know something like Angular / React you could build them a website with a headless CMS. Plenty of amazing options
is there a way to install an existing site into Laragon?
yep, it's literally like a hosting, but locally. You can create a new site and migrate your files and database
@@RaddyDev ok thanks!
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.
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?
In which part of the video did you see the underline? can you post the time please
@@RaddyDev maybe that not what i asked, why your code still ok (function or class w/o red underline) while you just open theme folder instead of wp from the root of wp framework on vs code, do you use some extension, for me doing so and guess what vs code have no clue about such function on wp core and there is when open vs code from theme folder, but still ok if i open wp CMS/framework from the root and that too many folder level to the theme folder as caviat. anyway your code is OK.
another thing, i have already debugging my code almost an hour i did'nt know what i was do wrong, i've found in your code on theme.json "fontFamily": "'Inter', sans-serif", that not working for me instead of loading Inter font-family, wp load sans-serif instead, in the end i removed sans-serif part and code works, i tested on latest WP
I normally open just the theme folder in Visual Studio Code as I don't tend to mess around too much with the core WordPress files. Like you said, a lot of folders and files in there. I haven't got any WordPress extension. The only thing that I have added in the theme.json is the Auto Complete schema code which helps a lot. That is in the first line of the file "$schema":... Interesting about the font as if you go to Google fonts and select it, it comes up as 'Inter', sans-serif. Whatever works I guess 😀, i am glad that you fixed it anyway
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.
There is some support, but I am not sure how good it is. I think that you can use some of the elementor blocks. I need to check it out
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.
Hey, Stephen thanks for sharing that. I haven't tried adding a font with the @font-face rule, but that's good to know. I guess it's just best to add the fonts inside the theme.json file
@@RaddyDev Hey, thanks for the response. To clarify it was the fontFace deceleration within the theme.json that was making the error. It didn't want any commas in the family name, so I was unable to put in a fallback font.
posts not visible in home page how to fix it bro ?
Strange one. Is the post published? What's happening?
@@RaddyDev i can see the posts in home page when editing mode , but after published the right side column appear ie , category, author and search bar but left side posts won't appear in home page ... What was the error
@@gokulkkd Turn on WP_DEBUG in wp-config.php. Maybe that will tell you what the error is. You could also try to re-create that part of the page
My font has not changed for my actual page only the editing page
Most likely a cache problem. If the font has changed on the edit page it means that you've added it correctly and it's working. Try to refresh, maybe do Ctrl + Shift + R
Now it’s not editing on my edit page or actual page ugh
I cleared the cache too
In your main wordpress folder, find wp-config, open it, search for debug and from false put it to true. That will help with the cache and also it will show you if you have any major errors that could be causing it
Can i use elementor to this theme;
I haven't tried, but I don't see why not. Give it a go with the free version of the plugin
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...
The error that you pointed was kind of my fault. If you put WP_DEBUG to true, that solves the typo issues and the caching (mostly). Working in the JSON file is what I don't like very much. It's not that it's hard, it's just confusing especially when I have to keep scrolling up and down. I think that the FSE/Guttenberg is supposed to become a no-code type of editor. You can still make your own guttenberg plugins, but the layout will be mostly drag and drop
This is the future of tech. The plan is to reduce development costs and only bring in devs for complex work that internal business people can’t do.
Is there any way I can download a zip file of the entire code of the website we just created using FSE?
Why everytime I use the QueryLoop its not showing?
Try resetting the filters on the category loop
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?
So you have developed a website using Twenty Twenty Two and want to move to Twenty Twenty Three? The easiest way would be to activate Twenty Twenty Three and rebuild the pages using FSE and Gutenberg. Unfortunately I don't think that there is an easy way to convert. I will have to do that on my blog as well at some point. Currently using the classic PHP method :)
@@RaddyDev Can I use the same code and apply it to different themes? I am trying to figure out what needs to be changed in the VSCode.... like if you used what you have in this video with another site and different theme?
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 😂
😆😆
Thanks, adding define('WP_DEBUG', true); in the wp-conf.php helped me for the refresh problem. It turns the cache off.
wp_debug seems to do the job. Thank you
Do we need to code ?
It's leading to the point where you won't have to. I think that the idea is to make it accessible to everyone. Check out the link I send in the previous comment
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.
Did you mean open the code in Visual Studio Code? If you have WordPress already installed you can start creating your theme. In the main directory of your WordPress installation there will be a folder called "wp-content". In there you'll see "themes". Create your theme folder there and open in VSC by doing, file -> open folder. I hope this helps
@@RaddyDev if I do want to crate same like you. So I would open cpanel and find the root directory. From there I could open to vs code. Am I right?
@@RaddyDev Bro downloaded vs code and created folder inside root in cpanel. If I navigate through open folder it has access only to local folders. But how can I open cpanel and dò live editing like this video
I understand what you are saying now. If you want to use visual studio code to change your files remotely you'll need an FTP plugin. Most of them are terrible...
Ideally the best way to develop would be to do it locally like I have.
Dreamweaver used to have an amazing FTP option where you can see all files and change them instantly.
You can use the cPanel editor, but that would be painful
@@RaddyDev okay let me try. Can dreamweaver work on linux?
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
Do you know what PHP version are you using? Have you installed any additional plugins that could cause the errors? Maybe try disabling them to see if it goes away
@@RaddyDev Thanks for the reply.. really appreciated it. regarding the error, I figured out the cause of it, in the functions.php in the enqueue style I just change the name of the style into a one-word name, no hypens or underscore and save it. it works. also I deactivated the plugins. Thanks Rad.
How to do this without coding
Can we design and sell website templates without coding like only templates
Check this out. There is a plugin by WordPress that can help you create and export themes without coding: ua-cam.com/video/ocHAz7ACSeg/v-deo.html
So no need for Elementor Pro?
and 299.00$us savings
Potentially at some point. Elementor is a lot more powerful in terms of functionality and layout options. We'll just spend $299.00 on Blocks instead 😄
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.
The plugin didn't exist back then and as far as I know that was pretty much the only option. I did cover "Create Block Theme" a few months ago. Good plugin, I'll be using it in the next WP video :)
@@RaddyDev Thank you. We will be waiting. Your voice is soothing. Sub!
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
If you don't have the 'Editor' button you are most likely using a classic theme. You'll have to create a new FSE theme to be able to use it. I mean, as a minimum you can create a templates folder with a few of the main templates, parts and the theme.json file. That will enable it, but that's pretty much making a new theme.
Where you thinking of creating the header in the FSE, but continuing to use your current pages?
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!
Hey Mark, the link is under the description now. No need for the ☕. Have a great weekend!
@@RaddyDev You just made my weekend, thank you, Raddy :-)
You can't copy the code from the screen but want to build a wordpress theme.... hahahaha
@@craxer01 "so we don't have to manually and painfully transcribe from video"
it did not working me
What didn't work for you? Is there anything I can help with?
@@RaddyDev I didn't add the theme.json file, thanks I found it
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!
thanks for movie
Most welcome!
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 …
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.
Thanks for the comment. It's always good to hear what other people have to say about about it
They're doing this to stay competitive with technologies like Canva, SquareSpace, Wix.I for one love being able to create multiple headers/footers/sidebars and use them wherever I want. Most themes with plenty of layout options also score terrible because they're bloated. I like my 98-100 pagespeed scores with block themes. Why should us end users need a bloated theme, premium theme or several plugins for layouts? They all bog things down.
@@jhnpldng I didn't say that is a bad idea. I can see how this will save Wordpress (It's dying at the moment for the reasons you mentioned in your comment) but the execution is poor and not dev friendly. If devs decide to learn something else - that's the same death. No support, plugins, themes = Wix, Canva, SquareSpace, etc.
I feel roughly the same way, but I found a workaround that makes blocks palatable. The 1 feature I actually want out of block editing is to be able to create a prebuilt chunk of blocks that can be summoned by my clients (or me as I build out the site), can be placed and filled out, which will still let me edit the styling and arrangement on all of them, but each has unique content. Not templates, template parts, reusable blocks, or patterns provides this. Coding a custom block is like 10 layers of code for some unfathomable reason. Luckily, I found the plugin Lazy Blocks, which works exactly right, isn't naggy or hiding vital features behind a paywall, and as a bonus, lets me code clean controllable normal code to format the whole thing. I built some flexbox and grid customs, and now I can just build it out once, plop 10 artists profiles down, fill them out, and then rework the structure if I need to.
Hey
👋 hello
@@RaddyDev 👋Hello
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.
I understand, thanks for the feedback. With Laragon, it's literally a download and press install job. That's all. I will include it in the next one 🙂
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.
I think that the idea is to make developing WP themes easier and lower the entry barrier for new developers. I would like to think that the full site editing experience will get better and there will be a ton on plugins/blocks to choose from in the near future. It's quite a controversial topic at the moment. I think that the traditional way of developing themes won't go away any time soon. WordPress is backwards compatible so you won't have to worry
FSE and Block themes are the same thing. Gutenberg is an experimental plugin, consider it Alpha, while the FSE feature of Block themes is Beta. As far as clients, they run the gambit. I have one that writes his posts in html because he's old school. I'm running a block theme but installed Classic Editor plugin for him. Most prefer the wysiwyg aspect of the block editor once they get used to it. Every paragraph being it's own block, stupid.
"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?
Haha this is a terror decision i think... 🤣🤣🤣
28:08 Just in case anyone else can't find template parts, for me they were hiding under Patterns.
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"]
}
]
}
]
}