How to fix an issue with customizer live preview?

Question

I am attempting to create customizable theme for my clients. The goal is to enable them to modify certain styles inside the theme customizer.

I didn't want to insert customizer's variables inside html code, but instead created a css-php file. Everything works well except that live preview of the changes doesn't reflect them in real time. Instead I have to refresh the page each time after single change. It doesn't bother me personally but it annoys my clients.

What are your thoughts on this?

Thats what I have in my functions.php:

function im_customize_register( $wp_customize ) {

$colors = array();
$colors[] = array(
  'slug'=>'im_header_bcolor', 
  'default' => '#556d80',
  'label' => __('Header Background Color', 'impressive')
);
$colors[] = array(
  'slug'=>'im_nav_bar_bcolor', 
  'default' => '#434044',
  'label' => __('Navigation Bar Background Color', 'impressive')
);
foreach( $colors as $color ) {
  // SETTINGS
  $wp_customize->add_setting(
    $color['slug'], array(
      'default' => $color['default'],
      'type' => 'theme_mod', 
      'capability' => 
      'edit_theme_options'
    )
  );
  // CONTROLS
  $wp_customize->add_control(
    new WP_Customize_Color_Control(
      $wp_customize,
      $color['slug'], 
      array('label' => $color['label'], 
      'section' => 'colors',
      'settings' => $color['slug'])
    )
  );
}

}
add_action( 'customize_register', 'im_customize_register' );


function im_theme_styles() {

wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'im_theme_styles' );

$custom_css= '
  .im_header { background-color: ' . get_theme_mod('im_header_bcolor') . '; }
  .im_nav_bar { background-color: ' . get_theme_mod('im_nav_bar_bcolor') . '; }
  ';

wp_add_inline_style ('main-style', $custom_css);

And my css.php:

<?php header("Content-type: text/css; charset: UTF-8"); ?>

<?php

  $parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
  require_once( $parse_uri[0] . 'wp-load.php' );

  $im_header_bcolor = get_theme_mod('im_header_bcolor');
  $im_nav_bar_bcolor = get_theme_mod('im_nav_bar_bcolor');

?>



  .im_header { background-color:  <?php echo $im_header_bcolor; ?>; }
  .im_nav_bar { background-color:  <?php echo $im_nav_bar_bcolor; ?>; }

Answer 1

Setting up a css.php for this purpose is overkill (or undesirable in any case, as @MarkKaplun states in the other answer).

The smoothest way for previews of css is using jquery (see part 3 of the customizer API).

Since you're not using the transport argument in your setting, the page is reloaded anyway, so you can simply add the styles in your functions.php using wp_add_inline_style, inside the function that enqueues your style.css. Like this:

add_action ('wp_enqueue_scripts','wpse242256_add_styles');

function wpse242256_add_styles () {
  wp_enqueue_style('main-style', get_template_directory_uri() . '/style.css');
  $custom_css= '
    .im_header { background-color: ' . get_theme_mod('im_header_bcolor') . '; }
    .im_nav_bar { background-color: ' . get_theme_mod('im_nav_bar_bcolor') . '; }
    ';
  wp_add_inline_style ('main-style', $custom_css);
}

Answer 2

Don't use css.php style files. They are hard to write correctly and provide yet another security concern. In some settings running php directly from a theme's directory will just be forbidden at the server level.

Always follow what core themes do, inventing your own things is nice and creative, but it will annoy the hell out of whoever will need to maintain your themes for the clients.