2

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.

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! 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

2 Answers 2

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/

1
  • 1
    Thanks for sharing this! The editor is a great feature, problem is, it lacks a lot of styling options (box shadow for example), which is why I'm looking for a way to set styles through a child theme. So what I'm actually trying to do is to workaround the editor's missing style options through a child theme. That is, if that's even possible... Commented Nov 11, 2022 at 16:40
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.