I use TwentyTwent theme and want to change its background colour by page IDs.

I'm not sure but when I check the functions.php, I see below lines which are related to background colours:

    // Custom background color.
    add_theme_support(
        'custom-background',
        array(
            'default-color' => 'f5efe0',
        )
    );

    // Add the background option.
    $background_color = get_theme_mod( 'background_color' );
    if ( ! $background_color ) {
        $background_color_arr = get_theme_support( 'custom-background' );
        $background_color     = $background_color_arr[0]['default-color'];
    }
    $editor_color_palette[] = array(
        'name'  => __( 'Background Color', 'twentytwenty' ),
        'slug'  => 'background',
        'color' => '#' . $background_color,
    );

Is there any simple way to change the background colour according to Page's ID?

Regards.

I use TwentyTwent theme and want to change its background colour by page IDs.

I'm not sure but when I check the functions.php, I see below lines which are related to background colours:

    // Custom background color.
    add_theme_support(
        'custom-background',
        array(
            'default-color' => 'f5efe0',
        )
    );

    // Add the background option.
    $background_color = get_theme_mod( 'background_color' );
    if ( ! $background_color ) {
        $background_color_arr = get_theme_support( 'custom-background' );
        $background_color     = $background_color_arr[0]['default-color'];
    }
    $editor_color_palette[] = array(
        'name'  => __( 'Background Color', 'twentytwenty' ),
        'slug'  => 'background',
        'color' => '#' . $background_color,
    );

Is there any simple way to change the background colour according to Page's ID?

Regards.

• php
• customization
• css
• child-theme
• custom-background

• How will you know which colour? Is it random? Or being stored in post meta? – Tom J Nowell ♦ Commented Jan 24, 2020 at 10:08
• @TomJNowell I normally set the default background colour (#f5efe0) in the customization settings. However, I would like to change that colour into white (#ffffff) by Page IDs. (Actually trying to change it for 8 or 9 pages only if it is possible.) – Serdar Koçak Commented Jan 24, 2020 at 10:18
• 1 If you know the IDs/slugs and know they will never change, this can be done with CSS alone, no PHP or JS changes needed, by using the page specific CSS classes added to the body tag – Tom J Nowell ♦ Commented Jan 24, 2020 at 12:36

2 Answers 2

The CSS is generated on the file inc/custom-css.php, the background color is set on line 76:

$background = sanitize_hex_color_no_hash( get_theme_mod( 'background_color' ) );

So you can take advantage of the theme_mod_{$name} filter, which changes the value of the get_theme_mod($name) function, by adding this to your functions.php file:

add_filter(
    'theme_mod_background_color',
    function( $value ) {
        $custom_bg_page_ids = array( 18, 19, 20 );
        $custom_bg_color = 'ca2d2d';
        global $post;
        if ( in_array( $post->ID, $custom_bg_page_ids ) ) {
            return $custom_bg_color;
        }
        return $value;
    }
);

Not the most elegant solution, but you can use something like this

add_action('wp_footer', function() {
    $post = get_post();
    if ($post && $post->ID == ... do your post selection here) {
        ?>
        <style>
        body {
            background-color: #fff !important;
        }
        </style>
        <?php

    }
});