[Resolved] Use customizer color for CSS selector

[George]

I am trying to use the background body color set in the Customizer inside a CSS selector. I can see from this page where the background color is set:

$wp_customize->add_setting(
	'generate_settings[background_color]',
	array(
		'default' => $defaults['background_color'],
		'type' => 'option',
		'sanitize_callback' => 'generate_sanitize_hex_color',
		'transport' => 'postMessage',
	)
);

$wp_customize->add_control(
	new WP_Customize_Color_Control(
		$wp_customize,
		'generate_settings[background_color]',
		array(
			'label' => __( 'Background Color', 'generatepress' ),
			'section' => 'body_section',
			'settings' => 'generate_settings[background_color]',
		)
	)
);

So inside my functions.php, I have:

function gp_customize_css() { ?>

    <style type="text/css">

        body:not(.full-width-content).single-post .site-main article {
            border-bottom: 60px solid <?php echo get_theme_mod('generate_settings[background_color]'); ?> !important;
        }

    </style>
<?php }

add_action('wp_head', 'gp_customize_css');

I don’t see my color inherited, though. Am I missing something?

[Elvin]

Hi there,

Can you link us to the page in question to check if this gp_customize_css() outputs anything on the actual page? This should give us a clue.

If I may suggest:

What happens if you wrap add_action('wp_head', 'gp_customize_css'); with after_setup_theme?

Example:

add_action( 'after_setup_theme', function(){
add_action('wp_head', 'gp_customize_css');
} );

[George]

The gp_customize_css() outputs the code normally apart from the color value. So, it basically generates:
border-bottom: 60px solid !important;

Wrapping the function with after_setup_theme didn’t work.

I have actually successfully added custom Customizer color options for various settings and displayed them just fine:

// Extra Customizer color settings
function gp_customize_color( $wp_customize) {

    $wp_customize->add_section(
        'gp_comment_section',
        array(
            'title' => $wp_customize->get_panel( 'generate_colors_panel' ) ? __( 'Comments', 'generatepress' ) : __( 'Colors', 'generatepress' ),
            'priority' => 80,
            'panel' => $wp_customize->get_panel( 'generate_colors_panel' ) ? 'generate_colors_panel' : false,
        )
    );  
    
    $wp_customize->add_setting(
        'gp_comment_color',
        array(
            'default' => '#ff4b4b',
            'sanitize_callback' => 'generate_sanitize_hex_color',
            'transport' => 'refresh',
        )
    );

    $wp_customize->add_setting(
            'gp_background_link_color_hover',
            array(
                'default' => '#fcefe7',
                'sanitize_callback' => 'generate_sanitize_hex_color',
                'transport' => 'refresh',
            )
        );

    $wp_customize->add_setting(
            'gp_blog_box_shadow_color',
            array(
                'default' => '#FEC445',
                'sanitize_callback' => 'generate_sanitize_hex_color',
                'transport' => 'refresh',
            )
        );    

    $wp_customize->add_setting(
            'gp_blog_post_title_underine_hover_color',
            array(
                'default' => '#005D55',
                'sanitize_callback' => 'generate_sanitize_hex_color',
                'transport' => 'refresh',
            )
        );

    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'gp_comment_color',
            array(
                'label' => __( 'Base Color', 'generatepress' ),
                'section' => 'gp_comment_section',
                'settings' => 'gp_comment_color',
            )
        )
    );

    $wp_customize->add_control(
            new WP_Customize_Color_Control(
                $wp_customize,
                'gp_background_link_color_hover',
                array(
                    'priority' => 20,
                    'label' => __( 'Background Link Color Hover', 'generatepress' ),
                    'section' => 'body_section',
                    'settings' => 'gp_background_link_color_hover',
                )
            )
    );

    $wp_customize->add_control(
            new WP_Customize_Color_Control(
                $wp_customize,
                'gp_blog_box_shadow_color',
                array(
                    'priority' => 20,
                    'label' => __( 'Blog Box Shadow Color', 'generatepress' ),
                    'section' => 'body_section',
                    'settings' => 'gp_blog_box_shadow_color',
                )
            )
    );    

    $wp_customize->add_control(
            new WP_Customize_Color_Control(
                $wp_customize,
                'gp_blog_post_title_underine_hover_color',
                array(
                    'priority' => 20,
                    'label' => __( 'Blog Post Title Underline Hover Color', 'generatepress' ),
                    'section' => 'body_section',
                    'settings' => 'gp_blog_post_title_underine_hover_color',
                )
            )
    );

}

add_action('customize_register', 'gp_customize_color');

//Output Customizer CSS
function gp_customize_css() { ?>

    <style type="text/css">

        .comments-title::before,
        .comment-reply-title::before {
            background-color: <?php echo get_theme_mod('gp_comment_color'); ?>;
        }

        .comment-content .reply a::after,
        .comment-content .reply a:hover {
            color: <?php echo get_theme_mod('gp_comment_color'); ?>;
        }

        .comment-content .reply a::after,
        .comment-content .reply a:hover {
            color: <?php echo get_theme_mod('gp_comment_color'); ?>;
        }

        .entry-content a:hover,
        .author-container .by-author a:hover {
            background-color: <?php echo get_theme_mod('gp_background_link_color_hover'); ?>;
        }

        .entry-content p a,
        .entry-content ul li a,
        .author-container .by-author a {
            border-bottom: 6px solid <?php echo get_theme_mod('gp_background_link_color_hover'); ?>;
            box-shadow: inset 0px -2px 0px <?php echo get_theme_mod('gp_background_link_color_hover'); ?>;
        }

        .blog .dynamic-content-template .blog-container:hover {
            box-shadow: 5px 5px 0 <?php echo get_theme_mod('gp_blog_box_shadow_color'); ?>;
        } 

        .blog .dynamic-content-template:hover h2 a {
            background: linear-gradient(to right,<?php echo get_theme_mod('gp_blog_post_title_underine_hover_color'); ?> 0,<?php echo get_theme_mod('gp_blog_post_title_underine_hover_color'); ?> 100%);
            background-position: 0 85%;
            background-repeat: repeat-x;
            background-size: 100% 2px;
            -webkit-transition: background-image .25s ease;
            transition: background-image .25s ease;
        }

        body:not(.full-width-content).single-post .site-main article:not(.comment-body) {
            border-bottom: 60px solid <?php echo get_theme_mod('generate_settings[background_color]'); ?> !important;
}

    </style>
<?php }

add_action('wp_head', 'gp_customize_css');

All other CSS apart from the dynamic color from the following CSS, work:

body:not(.full-width-content).single-post .site-main article:not(.comment-body) {
    border-bottom: 60px solid <?php echo get_theme_mod('generate_settings[background_color]'); ?> !important;

Somehow the gp_customize_css function does not recognise the default GP background color.

[George]

Still looking for a solution to this. Not sure if and how to include add_action( 'customize_register', 'generate_customize_register' );, maybe Tom would know…

[Tom]

Instead of get_theme_mod(), try this: generate_get_option( 'background_color' );

[George]

Hey Tom. Still no luck.

@media (min-width: 769px) {
            body:not(.full-width-content).single-post .site-main article:not(.comment-body) {
                border-bottom: 60px solid <?php generate_get_option( 'background_color' ); ?>;
            }
        }

outputs
border-bottom: 60px solid;

[George]

Ok, it works, Tom. Forgot to echo it!

@media (min-width: 769px) {
            body:not(.full-width-content).single-post .site-main article:not(.comment-body) {
                border-bottom: 60px solid <?php echo generate_get_option( 'background_color' ); ?>;
            }
        }

Thank you!

[Tom]

No problem! 🙂

[Author]

Posts