0

Customizer API is saving HTML/data changes properly but any CSS change is only visible in the Customizer. After hitting "Save & Publish" the page is exactly like it used to be with no new <style> tags in the <head>. This is the way I declare customizer controls and settings in functions.php (mind you this is not the complete code).

$wp_customize->add_setting('design-header-background-color', array(
    'default' => '#ffffff',
));
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'design-header-background-color', array(
    'label' => __( 'Background color' ),
    'section' => 'design-header',
    'priority' => 10
)));
function design_header_background_color()
{
    ?>
         <style type="text/css">
             header { background-color: <?php echo get_theme_mod('design-header-background-color'); ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'design_header_background_color');

When I use the control in the Customizer I can see stuff changing properly. But after using "Save & Publish" nothing happens. As I said HTML/PHP manipulations work just fine.

Improve this question

1 Answer 1

Reset to default
0

OK. Even though I wasn't able to figure it out with CSS and wp_head() I managed to hack something that works.

<?php
    $sidebar_background_color = get_theme_mod('design-sidebar-background-color');
?>

<aside style="background-color: <?php $sidebar_background_color; ?>;">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    <?php endif; ?>
</aside>

Since I could manipulate DOM and HTML just fine I decided to change CSS "manually" as inline styling. It works though the method feels superhacky.

v2 with <style></style> block.

<?php
    $header_background_color = get_theme_mod('design-header-background-color');
    $header_background_image = get_theme_mod('design-header-background-image');

?>

<style> /* FOR CUSTOMIZER API ONLY, DON'T CUSTOMIZE CSS HERE */
    <?php if (get_theme_mod('design-header-css') === '') : ?>
        header .page-header {
            background-color: <?php echo $header_background_color; ?>;
            background-image: url('<?php echo $header_background_image; ?>');
        }
    <?php else : ?>
        <?php echo get_theme_mod('design-header-css'); ?>
    <?php endif; ?>
</style>

<!--- HTML GOES HERE -->
Improve this answer
1
  • It works even better when I use <style></style> block. Clears things up.
    – user134865
    Aug 11, 2015 at 9:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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