block editor - How to set the background color of a template part (HeaderFooter) in Twenty Twentythree?

In Wordpress's shiny new Twenty Twentythree theme, how can you assign a background color to the header or foother template parts? Can this be done in a child theme - through theme.json? Or somehow else?

---

The obvious approach of adding a css class to the child theme's styles.css file, like, for example:

.ownclass {
    background-color: crimson !important;
    color: green !important;
}

And assigning it in Gutenberg under Advanced-> Additional CSS class(es) to the header (or any other) block, doesn't have any effect. But even if this would work, assigning (hard coding?) the background color through theme.json would be preferred over manually assigning it in Gutenberg.

Do you have any other ideas about how to set a template part's background color in a child theme?

You advise is very much appreciated. Thank you.

In Wordpress's shiny new Twenty Twentythree theme, how can you assign a background color to the header or foother template parts? Can this be done in a child theme - through theme.json? Or somehow else?

---

The obvious approach of adding a css class to the child theme's styles.css file, like, for example:

.ownclass {
    background-color: crimson !important;
    color: green !important;
}

And assigning it in Gutenberg under Advanced-> Additional CSS class(es) to the header (or any other) block, doesn't have any effect. But even if this would work, assigning (hard coding?) the background color through theme.json would be preferred over manually assigning it in Gutenberg.

Do you have any other ideas about how to set a template part's background color in a child theme?

You advise is very much appreciated. Thank you.

• block-editor
• child-theme
• full-site-editing
• theme.json

Share Improve this question edited Nov 4, 2022 at 16:49 SePröbläm asked Oct 28, 2022 at 19:38 SePröblämSePröbläm 9188 bronze badges 3

• There is too much to describe, so I'm just going to link to the source. css-tricks.com/… – Lisa Commented Nov 4, 2022 at 22:58
• @Lisa Thanks for sharing the link. Although it does explain how to change a child theme's color palette, it doesn't explain how to assign colors to individual template parts, groups, rows or columns, so it's unfortunately not very useful. Non the less, thank you! – SePröbläm Commented Nov 5, 2022 at 12:31
• 2 Yeah, that's one reason I didn't make an answer. Just thought this might help as it was related. :) – Lisa Commented Nov 5, 2022 at 22:39

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0 +50

The Twenty Twenty-Three theme comes with an inbuilt "Editor" option that exists under the "Appearance" menu.

Appearance >> Editor

Once you click on the "Editor(beta)" option then you can select the header or footer area and after that, you can customize their stylings like Background Color, Text Color, and Link Color.

The theme also provides many more customization options. You can explore the theme by visiting the below links:

https://wordpress.org/news/2022/11/introducing-twenty-twenty-three/

To set the Bg color of the header or footer using theme.json, you need to define a custom style property for the respective template part.

theme.json

{
    "version": 1,
    "settings": {
        "color": {
            "headerBackground": "#f0f0f0", // Replace with your desired header background color
            "footerBackground": "#f0f0f0"  // Replace with your desired footer background color
        }
    }
}

Apply Custom Style Properties to Template Parts

header.php

<header style="background-color: var(--wp--preset--color--headerBackground);">
    <!-- Header content goes here -->
</header>

footer.php

<footer style="background-color: var(--wp--preset--color--footerBackground);">
    <!-- Footer content goes here -->
</footer>