I have a problem. I am trying get the theme customizer load a different CSS file based on what radio input in clicked, live!
It works so far right now that option is saved when I click "Save & Publish" it only loads up when manually reload the entire customizer page. The preview panel is refreshed on select but not loads the selected CSS up and I don't know what actually makes Twenty Eleven do this but I like to have it this say too.
I have looked at the Twentyeleven theme to code this. The differences are:
- The theme uses
option
for the settings and nottheme_mod
for it - It has some settings handling but I think that's for its separate theme options page, I do not want that.
- It uses
enqueue scripts
to add its 'dark' theme on top of the normal theme and it's actually applied live if one clicks it, this is what I like to have too.
How would I do this? Not sure how this actually works, it seems to store the option temporary only for the customizer and refresh it with the enqueued dark theme.
I would be glad if you could help me figure out how to apply the CSS on the Customizer preview.
For reference: Twentyeleven theme-options.php
Here is the slimmed down version of of my plugin.
<?php
/**
* Plugin Name: S Skins
* Plugin URI:
* Description:
* Version: 1.0
* Author:
* Author URI:
* License: GPLv3+
*/
add_action( 'plugins_loaded', array( 'S_Color_Themes', 'get_instance' ) );
class S_Color_Themes {
/**
* Plugin version, used for cache-busting of style and script file references.
*
* @since 2.6.0
*
* @var string
*/
const VERSION = '1.0.0';
/**
* Unique identifier for your plugin.
*
*
* The variable name is used as the text domain when internationalizing strings
* of text. Its value should match the Text Domain file header in the main
* plugin file.
*
* @since 1.0.0
*
* @var string
*/
protected $plugin_slug = 's-color-themes';
public $color_themes = array();
/**
* Instance of this class.
*
* @since 1.0.0
*
* @var object
*/
protected static $instance = null;
/**
* Initialize the plugin by setting localization and loading public scripts
* and styles.
*
* @since 2.6.0
*/
private function __construct() {
$this->get_color_themes();
if ( is_admin () ) {
add_action( 'customize_register', array( $this, 'wp_customize_register' ) );
}
add_filter( 'stylesheet_uri', array( $this, 'stylesheet_uri' ), 10, 2 );
}
/**
* Return the plugin slug.
*
* @since 1.0.0
*
*@return Plugin slug variable.
*/
public function get_plugin_slug() {
return $this->plugin_slug;
}
/**
* Return an instance of this class.
*
* @since 1.0.0
*
* @return object A single instance of this class.
*/
public static function get_instance() {
// If the single instance hasn't been set, set it now.
if ( null == self::$instance ) {
self::$instance = new self;
}
return self::$instance;
}
public function stylesheet_uri( $stylesheet, $dir_uri ) {
$color_theme = apply_filters( 's_color_theme', get_theme_mod( 's_skin' ) );
if ( empty( $color_theme ) || 'default' == $color_theme || ! is_file( get_stylesheet_directory() . "/style-$color_theme.css" ) ) {
return $stylesheet;
}
return "$dir_uri/style-$color_theme.css";
}
public function wp_customize_register( $wp_customize ) {
#remove_theme_mod( 's_skin' );
$wp_customize->add_setting(
's_skin',
array(
'default' => '',
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
)
);
#show($color_theme_names);
$schemes = array();
$choices = array();
foreach ( $this->color_themes as $color_theme ) {
$schemes[$color_theme] = array(
'value' => $color_theme,
'label' => ucfirst( $color_theme ),
'thumbnail' => get_template_directory_uri() . '/images/color-theme-thumbnails/' . $color_theme . '.png'
);
$choices[ $color_theme ] = ucfirst( $color_theme );
}
$wp_customize->add_section(
's-color-themes',
array(
'title' => 'Color Themes',
'priority' => 1,
)
);
$wp_customize->add_control( 's_skin', array(
#'label' => __( 'Color Scheme', $this->plugin_slug ),
'section' => 's-color-themes',
'settings' => 's_skin',
'type' => 'radio',
'choices' => $choices,
#'priority' => 5,
) );
}
public function get_color_themes() {
$color_theme_files = glob( get_stylesheet_directory() . "/style-*.css" );
if ( empty( $color_theme_files ) ) {
return false;
}
$this->color_themes = array( 'default' );
foreach ( $color_theme_files as $file ) {
$this->color_themes[] = str_replace( array( get_stylesheet_directory() . '/style-', '.css' ), '', $file );
}
}
}