Create a Child Theme for Twenty-Twenty-Three

Hi @kristenfisher427 –

However, I’m not sure how to enqueue style.css in functions.php considering this is a block theme and not a classic theme.

You can enqueue style.css in functions.php in a block theme in the exact same way you would in a classic theme.

This is what I used to recommend when I taught child theming pre-pandemic/pre-block themes, and it should still work. ??

<?php 
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );
  function my_child_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Notes:

• You do not need to change any of the code to reference any specific theme like TT3. It’s a generic function that works with any theme and is designed to be reused as is.
• Do not add a closing PHP tag in your functions file.
• Make sure there are no blank lines at the top or bottom of your functions file.
• As of WP 6.2 a site-wide CSS editor is now built into core, so that’s an alternative place to add custom CSS, instead of a child theme’s style.css file.
• Since block themes are intended to be designed in the Site Editor, TT3’s style.css file is blank, except for some code comments. So no styles from the TT3 parent will be pulled into your child theme, and that’s to be expected.

Let me know how it goes!

Hi @zoonini ,

Thank you so much for your detailed response and your helpfulness! ?? I tried adding the code to functions.php, ensuring that there were no extra spaces, that the code was as is, etc., and unfortunately, it didn’t work. For your reference, I had this code in the header of my style.css file in case this might be the issue:?

/*
Theme Name: FSE child
Template: twentytwentythree
*/

I also added !important tags to my CSS rules just to make sure that there wasn’t a specificity issue going on, but the styles still did not take effect. 

What’s been confusing to me is that different resources suggest different ways of enqueuing style.css for block themes. I came across a WordPress video series on adding custom CSS to block themes:?https://wordpress.tv/2023/02/08/builder-basics-adding-custom-css-to-block-themes/. He used this code to enqueue his external stylesheet in the Twenty-Twenty-Three theme:?

<?php

//Enqueue stylesheet on frontend
function tt3_enqueue_scripts() {
wp_enqueue_style(
'tt3-styles',
get_template_directory_uri() . '/style.css',
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'tt3_enqueue_scripts' );

//Enqueue stylesheet in the Editor

function tt3_theme_setup() {
add_editor_style( 'style.css' );

}
add_action( 'after_setup_theme', 'tt3_theme_setup' );

So this made me wonder if the stylesheet needed to be enqueued on both the frontend?and in the editor (although I’m not sure what it exactly means to enqueue the stylesheet in the editor). I tried using his code, but it unfortunately did not work for me.

I also read another WordPress resource (https://fullsiteediting.com/lessons/child-themes/) and she recommended adding this code to enqueue the stylesheet:?

function fse_child_styles() { wp_enqueue_style( 'fse-child-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'fse_child_styles' );

The code was not working in my child theme yesterday, but it appears to be working today? I guess I’m just confused about?what code to enter haha??

Any clarification and guidance you can provide would be greatly appreciated! Thank you so much again for your time! I really appreciate it! ???

Hi @kristenfisher427 –

Thank you so much for your detailed response and your helpfulness! ??

You’re very welcome!

I tried adding the code to functions.php, ensuring that there were no extra spaces, that the code was as is, etc., and unfortunately, it didn’t work. For your reference, I had this code in the header of my style.css file in case this might be the issue:

The enqueuing function I provided does only one thing: it enqueues the parent theme’s stylesheet and pulls it into your child theme.

Since TT3’s stylesheet is blank, other than code comments, you will not see any visible differences in your theme after setting up the enqueuing. This is what I tried to explain here:

Since block themes are intended to be designed in the Site Editor, TT3’s style.css file is blank, except for some code comments. So no styles from the TT3 parent will be pulled into your child theme, and that’s to be expected.

Enqueuing a parent’s styles only really makes sense if you’re using a theme that has styles in the parent theme. Most block themes like Twenty Twenty-Three do not, as they are designed in the Site Editor, so their CSS is actually in the theme.json file.

Your child theme’s style.css file works without needing any special enqueing. The fact that it’s in the root of your theme’s folder means that it’s ready to go,

What’s been confusing to me is that different resources suggest different ways of enqueuing style.css for block themes. I came across a WordPress video series on adding custom CSS to block themes: https://wordpress.tv/2023/02/08/builder-basics-adding-custom-css-to-block-themes/. He used this code to enqueue his external stylesheet in the Twenty-Twenty-Three theme: 

That workshop was created before a CSS editor was built into the Site Editor in WordPress 6.2. Putting your CSS into the new site-wide CSS editor will pull those styles into the editor as well as the front end, so there’s no longer a need to go through the process that Nick showed there.

The code was not working in my child theme yesterday, but it appears to be working today? I guess I’m just confused about what code to enter haha? 

I’m glad it’s working now. ?? Perhaps there was a syntax error earlier, or perhaps you weren’t targeting the right element. Or perhaps your hosting has caching that wasn’t pulling in your updated stylesheet until later?

I think the most important things to take away here are:

• Child themes are not needed just to make CSS overrides, they are instead meant for structural/functionality changes
• Use the built-in CSS editor to make CSS overrides, no child theme needed
• In block themes, many tweaks can be done in the Site Editor, without even needing to write any CSS at all
• TT3 has no CSS at all in its style.css, so enqueuing it isn’t really serving much of a purpose

If you need further help with anything here, such as CSS you wrote that isn’t working as expected, please provide a link to your site so I can have a look directly. Otherwise I’ll go ahead and mark this one as resolved.

Thanks!

Hi?@zoonini ,

Thank you very much for your response! Ah,?I understand?now?what you were saying about there not being any visible difference when the parent stylesheet is enqueued?(sorry it took my mind a bit to digest what you were saying). So if I understand correctly, you’re saying there’s no need to enqueue the parent stylesheet (in the case of a theme like Twenty-Twenty-Three which has a blank style.css file), and that, theoretically, if I wanted to add my own CSS to an external stylesheet in a child theme, I wouldn’t have to do anything in functions.php to make the rules I write inside style.css take effect??Is that correct?

If?so,?I still seem to be having a problem with getting any CSS I write in the child style.css file to take effect (even though it’s in the root of my folder). I wish I could provide?you?a link for you to view it directly, but unfortunately, I’m creating this site locally (using Local). The?only?way I can get the CSS I write to take effect is if I add this code to functions.php in the child theme:?

function fse_child_styles() { wp_enqueue_style( 'fse-child-style', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'fse_child_styles' );

In the tutorial that provides this code, they say this code will load the child theme’s style.css file?– have I understood correctly??For reference, this is the tutorial (https://fullsiteediting.com/lessons/child-themes/).

I understand a lot of the?styling can now be done in the Site Editor (so a child theme isn’t necessary), but?I assume?it would be appropriate?to make a child theme to make alterations to theme.json, correct?

If I’m still misunderstanding things (which could be a very likely possibility hahaha), I apologize. Thank you for taking the time to help me sort?this out. I really appreciate it! ??

Thank you very much for your response!

My pleasure @kristenfisher427 ??

Ah, I understand now what you were saying about there not being any visible difference when the parent stylesheet is enqueued (sorry it took my mind a bit to digest what you were saying).

Correct!

So if I understand correctly, you’re saying there’s no need to enqueue the parent stylesheet (in the case of a theme like Twenty-Twenty-Three which has a blank style.css file), and that, theoretically, if I wanted to add my own CSS to an external stylesheet in a child theme, I wouldn’t have to do anything in functions.php to make the rules I write inside style.css take effect? Is that correct?

In the tutorial that provides this code, they say this code will load the child theme’s style.css file?– have I understood correctly??For reference, this is the tutorial (https://fullsiteediting.com/lessons/child-themes/).

Actually Carolina’s tutorial is entirely correct and I am wrong! Thank you so much for providing that reference! This is the key part:

Not all parent themes are built to load the child theme’s style.css file automatically. For example, Twenty Twenty-Three does not enqueue any CSS files.

So you do need to enqueue your child theme’s styles, using a function like the one she provides. Sorry to have sent you down the wrong path and caused further confusion!

What I said here earlier is incorrect:

Your child theme’s style.css file works without needing any special enqueing. The fact that it’s in the root of your theme’s folder means that it’s ready to go,

Your next question:

I understand a lot of the styling can now be done in the Site Editor (so a child theme isn’t necessary), but I assume it would be appropriate to make a child theme to make alterations to theme.json, correct?

Yes that’s right. If you want to make changes to theme.json, those would be overwritten when the theme is updated, so if you want the benefits of TT3 theme updates and you want to preserve your theme.json changes, a child theme is the way to go.

I wish I could provide you a link for you to view it directly, but unfortunately, I’m creating this site locally (using Local).

FYI you can actually create what Local calls “live links” that can are viewable on the web! Here’s how.

If I’m still misunderstanding things (which could be a very likely possibility hahaha), I apologize. Thank you for taking the time to help me sort this out. I really appreciate it! ??

No worries. Thank you for your patience in going through this step by step with me, and apologies for the incorrect info I gave you earlier!

Hi @zoonini ,

Thank you for clarifying and for all your help once again. I really appreciate it, and it cleared up my confusion! Have a wonderful day! ??

You’re very welcome, cheers!

Moderator,

After nearly finishing a website project, I belatedly came across the possible need for a child theme to avoid overwrites when updating the theme. My question is related to this thread but simpler.

When is a child necessary?

In other words, following the previous thread: what types of customizations are in a theme.json?

Specifically for my current work, I only needed to change the font attributes, colors, header, footer, some block spacings (“Layout” in the Site Editor) and of course the logo. The site is naumann.law (also redirected to, by lawofficeofdorothynaumann.com).

Thanks!

P.S.-The name in the header here was wrong (oops!); I will correct it now in my WordPress profile.

• This reply was modified 1 year, 5 months ago by Connie Busch.

@conniebuschlcc – this thread is already marked as resolved. Please go ahead and start a new topic, and folks will be glad to help there. That follows forum etiquette, so that the previous participants in this thread will not receive email notifications for new responses. Thanks!

Hi Kathryn, thank you so much. I was stucked as kristenfisher427 for hours. Your post is the ONLY ONE which really explains this new behavior by design. The key is the Site-wide Custom CSS ! Thanks again. Johann.