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;

    $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();


/* Primary color */
public function get_primary_color() {
    $style = '';
    $hex = get_theme_mod( 'color_primary', '' );
    $rgb = join( ', ', hybrid_hex_to_rgb( $hex ) );
    $style .= "
            .comment-respond .required,
            .form-allowed-tags code,
            pre code {
                color: #{$hex};
    $style .= "
            .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 ) {

                '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 ) {

                '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(
                'label'     => esc_html__( 'Primary Color', 'showcase' ),
                'section'   => 'global_colors',
                'settings'  => 'color_primary',
                'priority'  => 5,
        ) );

    $wp_customize->add_control( new WP_Customize_Color_Control(
                '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;


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';
  • yeap, thanks alot, i did not check the codex. this cost me many hours. the get_theme_mod second parameter must be specified. but is there no way to use the "default" of $wp_customizer->add_setting() to set the default to apply for get_theme_mod() ?
    – user93380
    Commented May 2, 2016 at 22:18
  • @user93380 No, there is no way to do that because they have different purposes.
    – Otto
    Commented May 26, 2017 at 20:30

2 Answers 2


There are two different defaults, and you're only using one of them.

The default value that you set in the call to $wp_customize->add_setting is the default for the customizer. It does not apply outside of the customizer. The default here is what will be used if no setting exists in the database.

The second default is in the get_theme_mod call, and here you're using a blank value as the default. You need to use the proper default value as the second argument to get_theme_mod.

  • AAAHHHHAAAA! Thank you, I did not realize there were two different defaults. That makes much more sense now. I added a second code sample, this code was built based on Justin Tadlock's, and he had a filter/function that set defaults. Is that what causes the setting default to work his way? The call to get_theme_mod activated the filter function correct?
    – thatryan
    Commented Nov 4, 2014 at 21:22

Your customizer code is Correct so the backend will work Fine but for the front-end you made a very small mistake.

get_theme_mod uses two parameter First your Setting declared parameter and Second Default Value. So Just change following link:

$hex = get_theme_mod( 'color_primary', 'default_color_value' );

'default_color_value' as your hex color code value.

I know you have solved this issue but I wrote this answer just because to make it beginner-friendly. Like Me :)

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.