Thanks mate - been belting my head against a wall for 3 hours over the style.css not applying whilst using a child theme. Like you, I much prefer writing the CSS in a css file rather than that god awful themes.json file. I know it's the future and all that, but you know... old habits die hard :)
Hello Jakson, it's me again with more questions... ;) 1. Can theme.json completely replace the need to use style.css, or do each of these files have their own purpose in Block Themes? When creating my first Block Theme, I added in the theme.json file configuration for elements such as site-wide styles or pre-set heading styles. At the same time, I added in the style.css file effects such as smooth scroll and scroll snap. Can all of this be done in one of these files? 2. Does adding the style.css file to functions.php mean that the style.css takes precedence over theme.json? 3. The above questions prompted the following: Is using style.css important to learn for a beginner who starts learning Wordpress after the Block Themes revolution, or should I focus solely on mastering theme.json?
No worries Kacper :) 1: At this point theme.json cannot replace “all” custom CSS entirely - though you can add your custom CSS to the “additional css” in the editor and it will be exported and and included in theme.json if you use the “Create Block Theme” plugin. At this point all custom stuff that is not directly related to actual Gutenberg Blocks themselves should go in a custom style sheet. 2: Yes and No - it depends on the specificity of you CSS. 3: Remember this video tutorial is aimed at helping those that “want” to use style.css, why style.css doesn’t work, and how you can overcome that in block themes. 100% you should defo be using them.json as much as possible and I’ve got some of vids upcoming on that - stay tuned! Cheers!
Between using style.css and going into Styles > Additional CSS in the Block Editor, which is the preferred way to load custom styles? And if it's the "Additional Styles" tab, then is there a way to access that in the file structure directly, rather than a tiny sidebar?
Hey S B, yeah, my pref is using style.css - you can add CSS to the theme.json file but its a bit fiddly so (for now) I always use a style.css file on all my client builds
I don't know much about this. I've spent half a day searching, and God knows how many pages I've scrolled through to find a code that works to enqueue child `style.css`. Either they are from before Christ or there's some story where nothing concrete exists. Thank you very much. Liked & subscribed.👍🍻
Cool, very insightful, specially the child-theme creation part does come in handy just now. Did you explicitly differentiate «jskn_front» and «jksn_add» code?
@@wpjakson Sorry for the delay: it's the spelling in the php-functions-code example that you work on. Around 4'50" these spellings are used. I am not PHP-savy so that's why I asked ;-)
Hey Jakson, I'm just starting my coding journey and I'm sorry to say this isn't working for me. I'm assuming I can't just copy your code whole-sale into my functions.php. If that's right, can you give me a pointer about what I need to do differently on my end? I'm using the Frost theme, maybe that's part of the problem?
Hey Michael, the Frost theme is an epic theme! - Yes, you should be able to create a child theme for it using "create block theme" plugin in the same way as I did in this video for the 2024 theme and should work just fine. Fire over your child theme and I'll take a look if you like? Subscribe here and you'll get an email from me and you can reply and attach your theme jakson.co/subscribe/
I haven't watched this yet but just commenting to say I've bookmarked this and I'm glad that it seems it's possible to wrestle back some of the functionality from classic themes. The way Additional CSS works right now is terrible. Most of my designing takes place by way of the element inspector, as that's where the testing takes place to make sure the right HTML containers are being targeted to wrote the CSS.
Thank you for your lecture. Does your function 'jskn_add_editor_style()' work for only the page editor? In my case, it does not work to the editor in the menu Appearance. It only works in the page editor(the menu Page ->'clicking title' -> and page displayed with editor [css applied]).
Yes, for sure, you can put your styles under assets if you like and is defo the place to organise any separate custom block style CSS. For a super basic child theme, as in this vid, my pref is to use the existing style.css to keep things simple.
sure, if you want an incestuously decrepit photocopy of a photocopy, you can automate it. i use AI everyday. AI isn't coming for my job, i'm coming for yours.
Great tutorial if you want just the goods 4:30 is where it's at
Thanks Ryan!
Thanks mate - been belting my head against a wall for 3 hours over the style.css not applying whilst using a child theme. Like you, I much prefer writing the CSS in a css file rather than that god awful themes.json file. I know it's the future and all that, but you know... old habits die hard :)
Hello Jakson, it's me again with more questions... ;)
1. Can theme.json completely replace the need to use style.css, or do each of these files have their own purpose in Block Themes?
When creating my first Block Theme, I added in the theme.json file configuration for elements such as site-wide styles or pre-set heading styles. At the same time, I added in the style.css file effects such as smooth scroll and scroll snap. Can all of this be done in one of these files?
2. Does adding the style.css file to functions.php mean that the style.css takes precedence over theme.json?
3. The above questions prompted the following: Is using style.css important to learn for a beginner who starts learning Wordpress after the Block Themes revolution, or should I focus solely on mastering theme.json?
No worries Kacper :)
1: At this point theme.json cannot replace “all” custom CSS entirely - though you can add your custom CSS to the “additional css” in the editor and it will be exported and and included in theme.json if you use the “Create Block Theme” plugin. At this point all custom stuff that is not directly related to actual Gutenberg Blocks themselves should go in a custom style sheet.
2: Yes and No - it depends on the specificity of you CSS.
3: Remember this video tutorial is aimed at helping those that “want” to use style.css, why style.css doesn’t work, and how you can overcome that in block themes. 100% you should defo be using them.json as much as possible and I’ve got some of vids upcoming on that - stay tuned!
Cheers!
Between using style.css and going into Styles > Additional CSS in the Block Editor, which is the preferred way to load custom styles? And if it's the "Additional Styles" tab, then is there a way to access that in the file structure directly, rather than a tiny sidebar?
I don't think so, as that CSS is saved in the database, not as a file.
@@WebMatros 😭😔
Hey S B, yeah, my pref is using style.css - you can add CSS to the theme.json file but its a bit fiddly so (for now) I always use a style.css file on all my client builds
@@wpjakson thanks for the response! Is there a difference in how those two areas are handled or loaded?
Thx - Could you share a link to the snippets?
I don't know much about this. I've spent half a day searching, and God knows how many pages I've scrolled through to find a code that works to enqueue child `style.css`. Either they are from before Christ or there's some story where nothing concrete exists. Thank you very much. Liked & subscribed.👍🍻
Thanks DP!
Keep the videos coming, Jakson. Maybe I'll ditch my classic theme workflow... one day!
haha! We'll get you BlockPressing soon enough Neil!
Cool, very insightful, specially the child-theme creation part does come in handy just now. Did you explicitly differentiate «jskn_front» and «jksn_add» code?
hey @capitanchorizzo , thanks! Can you explain more re "explicitly differentiate «jskn_front» and «jksn_add» code" - not sure I understand?
@@wpjakson Sorry for the delay: it's the spelling in the php-functions-code example that you work on. Around 4'50" these spellings are used. I am not PHP-savy so that's why I asked ;-)
Truly good video!
Thanks @visualmodo, glad you liked it!
Hey Jakson, I'm just starting my coding journey and I'm sorry to say this isn't working for me. I'm assuming I can't just copy your code whole-sale into my functions.php. If that's right, can you give me a pointer about what I need to do differently on my end? I'm using the Frost theme, maybe that's part of the problem?
Hey Michael, the Frost theme is an epic theme! - Yes, you should be able to create a child theme for it using "create block theme" plugin in the same way as I did in this video for the 2024 theme and should work just fine. Fire over your child theme and I'll take a look if you like? Subscribe here and you'll get an email from me and you can reply and attach your theme jakson.co/subscribe/
I haven't watched this yet but just commenting to say I've bookmarked this and I'm glad that it seems it's possible to wrestle back some of the functionality from classic themes. The way Additional CSS works right now is terrible. Most of my designing takes place by way of the element inspector, as that's where the testing takes place to make sure the right HTML containers are being targeted to wrote the CSS.
Thanks for sharing Daren!
Thank you for your lecture. Does your function 'jskn_add_editor_style()' work for only the page editor? In my case, it does not work to the editor in the menu Appearance. It only works in the page editor(the menu Page ->'clicking title' -> and page displayed with editor [css applied]).
Hey Hong Sup Lee, not sure I understand completely - what parent theme are you using?
@@wpjakson I am using Twenty Twenty-Four theme.
BTW, it's not recommended to do custom styles in styless.css, you should create a new file in the /assets folder.
Yes, for sure, you can put your styles under assets if you like and is defo the place to organise any separate custom block style CSS.
For a super basic child theme, as in this vid, my pref is to use the existing style.css to keep things simple.
@@wpjakson I'm a little bit confused @wpjakson. Are you saying what you've showed us in the video is incorrect?
This will stop very soon. AI will take over soon enough.
Yes Zed, Ai is already huge in WP - watch out for some content on that here real soon!
sure, if you want an incestuously decrepit photocopy of a photocopy, you can automate it.
i use AI everyday. AI isn't coming for my job, i'm coming for yours.
so assume we can bake this into our child themes so it's ready to go each time.