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; ?>; }
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);
}
  • 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 '16 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 '16 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 '16 at 8:29
  • It doesn't appear to work, i'll update the whole thing in my question – ERDFX Oct 11 '16 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 '16 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.

  • 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 '16 at 7:58
  • plus everything works well with css php file. Except for the live preview. – ERDFX Oct 11 '16 at 7:59
  • when you develop for wordpress you should follow the wordpress standards. – Mark Kaplun Oct 11 '16 at 8:00
  • your css.php works only on your specific setting and will probably break for 5% of the sites, maybe more – Mark Kaplun Oct 11 '16 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 '16 at 8:05

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.