I have a class for handling customizer code, where I am adding a lot of color options. I have trimmed a bunch of repetitive parts out so it is not too long 😉 My issue is I cannot figure out why the default settings do not appear to be being set, but only on front end. If I open in the customizer view, the live preview is correct, the defaults are working, however on the front end view it is not. If I change a value in the customizer to hit save/publish, then the front end looks right. So this leads me to think the defaults are not being set like I think they are, hoping for some help figuring out why. Thank you.
final class showcase_Custom_Colors {
private static $instance;
public function __construct() {
/* Output CSS into <head>. */
add_action( 'wp_head', array( $this, 'wp_head_callback' ) );
/* Add options to the theme customizer. */
add_action( 'customize_register', array( $this, 'customize_register' ) );
}
public function wp_head_callback() {
$stylesheet = get_stylesheet();
/* Get the cached style. */
$style = wp_cache_get( "{$stylesheet}_custom_colors" );
/* If the style is available, output it and return. */
if ( !empty( $style ) ) {
echo $style;
return;
}
$style = $this->get_primary_color();
$style .= $this->get_secondary_color();
$style .= $this->get_copy_color();
$style .= $this->get_headings_color();
/* Put the final style output together. */
$style = "\n" . '<style type="text/css" id="custom-colors-css">' . trim( $style ) . '</style>' . "\n";
/* Cache the style, so we don't have to process this on each page load. */
wp_cache_set( "{$stylesheet}_custom_colors", $style );
/* Output the custom style. */
echo $style;
}
public function editor_styles_callback() {
header( 'Content-type: text/css' );
echo $this->get_primary_color();
echo $this->get_secondary_color();
echo $this->get_copy_color();
echo $this->get_headings_color();
die();
}
/* Primary color */
public function get_primary_color() {
$style="";
$hex = get_theme_mod( 'color_primary', '' );
$rgb = join( ', ', hybrid_hex_to_rgb( $hex ) );
$style .= "
a,
.page-numbers,
.color-primary,
legend,
mark,
.comment-respond .required,
pre,
code,
.form-allowed-tags code,
pre code {
color: #{$hex};
}";
$style .= "
code,
legend,
mark,
pre,
.form-allowed-tags code {
background-color: rgba( {$rgb}, 0.1 );
}";
$style .= "
blockquote {
border-color: rgba( {$rgb}, 0.85 );
}";
return str_replace( array( "\r", "\n", "\t" ), '', $style );
}
public function customize_register( $wp_customize ) {
// Add panel for colors
$wp_customize->add_panel( 'site_colors', array(
'title' => 'Site Colors',
'description' => 'Color options for the site',
) );
// Defines sections for each color area in an array
$color_sections = array(
'global_colors' => array(
'priority' => 5,
'title' => 'Global Colors',
'description' => 'Colors used in various locations'
),
'header_colors' => array(
'priority' => 10,
'title' => 'Header Colors',
'description' => 'Colors used in the site header'
),
);
// Defines settings for each color
$color_settings = array(
'color_primary' => '3855a0',
'color_secondary' => 'e09088',
'color_copy' => '4a4a4a',
'color_headings' => '3a3a3a',
);
// Add each color section from array above
foreach ( $color_sections as $color_section_id => $color_args ) {
$wp_customize->add_section(
$color_section_id,
array(
'priority' => $color_args['priority'],
'panel' => 'site_colors',
'title' => $color_args['title'],
'description' => $color_args['description'],
)
);
}
// Add each color setting from array above
foreach ( $color_settings as $color_setting_id => $color_setting_default ) {
$wp_customize->add_setting(
$color_setting_id,
array(
'default' => $color_setting_default,
'transport' => 'postMessage',
'sanitize_callback' => 'sanitize_hex_color_no_hash',
'sanitize_js_callback' => 'maybe_hash_hex_color',
)
);
}
/* Add a control for this color. */
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize,
'custom-colors-primary',
array(
'label' => esc_html__( 'Primary Color', 'showcase' ),
'section' => 'global_colors',
'settings' => 'color_primary',
'priority' => 5,
)
) );
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize,
'custom-colors-secondary',
array(
'label' => esc_html__( 'Secondary Color', 'showcase' ),
'section' => 'global_colors',
'settings' => 'color_secondary',
'priority' => 10,
)
) );
// Lots more....
}
public static function get_instance() {
if ( !self::$instance )
self::$instance = new self;
return self::$instance;
}
}
showcase_Custom_Colors::get_instance();
Clarification code sample:
add_filter( 'theme_mod_color_primary', array( $this, 'color_primary_default' ), 95 );
public function color_primary_default( $hex ) {
return $hex ? $hex : 'e74c3c';
}