0

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; ?>; }

2 Answers 2

0

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);
}
8
  • Given that I added code to the function, should it be something like this wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css', array('main-style'), false, all ); ?
    – ERDFX
    Oct 11, 2016 at 8:26
  • Yes, you should allready be adding an action to load style.css in your theme. You load the inline styles immediately after that.
    – cjbj
    Oct 11, 2016 at 8:28
  • Note that if you don't specifiy a default in the setting, get_theme_mod might return empty and you end up with invalid css.
    – cjbj
    Oct 11, 2016 at 8:29
  • It doesn't appear to work, i'll update the whole thing in my question
    – ERDFX
    Oct 11, 2016 at 8:30
  • That line you give in the first comment won't load style.css, because it's dependent on something that probably isn't there.
    – cjbj
    Oct 11, 2016 at 8:32
0

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.

6
  • so you advise inserting custom style inside <head> tags or inside elements tags? If I was to maintain that theme that would've pissed me off even more than separate clean css.php.
    – ERDFX
    Oct 11, 2016 at 7:58
  • plus everything works well with css php file. Except for the live preview.
    – ERDFX
    Oct 11, 2016 at 7:59
  • when you develop for wordpress you should follow the wordpress standards. Oct 11, 2016 at 8:00
  • your css.php works only on your specific setting and will probably break for 5% of the sites, maybe more Oct 11, 2016 at 8:00
  • I doubt it. Even if css.php for some reason wouldn't work all styles would fall back to default values from style.css.
    – ERDFX
    Oct 11, 2016 at 8:05

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.