Customizer Values Not Saving in Custom Theme

Question

I'm adding a simple text field to the customizer in a custom theme using WP version 4.5.1. I frequently add these sorts of customizer additions to my themes, but this time no value is saving to the database.

I'm registering a custom section, field and control in the customizer, and calling it as a theme mod in the template file.

Code is as follows:

customizer.php

function mytheme_customize_register( $wp_customize ) {

    //Footer CTA
    $wp_customize->add_section(
        'footer',
        array(
            'title' => __('Footer CTA', 'mytheme'),
            'priority' => '200'
        )
    );

    $wp_customize->add_setting(
        'inspection_cta',
        array(
            'default' => __('Schedule Your Inspection', 'mytheme'),
            'type' => 'theme_mod',
            'sanitize_callback' => 'mytheme_sanitize_customizer_input'
        )
    );

    $wp_customize->add_control( new WP_Customize_Control(
            $wp_customize,
            'inspection_cta_text',
            array(
                'label' => __('Inspections CTA Text', 'mytheme'),
                'section' => 'footer',
                'settings' => 'inspection_cta',
                'type' => 'text',
                'priority' => '10'
            )
        )
    );

    $wp_customize->get_setting( 'inspection_cta_text' )->transport = 'postMessage';
}
add_action( 'customize_register', 'mytheme_customize_register' );

function mytheme_sanitize_customizer_input($input){
    return strip_tags(stripslashes($input));
}

The JavaScript for previewing:

wp.customize('inspection_cta_text', function(value){
        value.bind( function(to) {
            $('.footer-cta em').text(to);
        });
    });

And calling it in the theme file as such:

<h5 class="footer-cta"><em><?php echo get_theme_mod('inspection_cta_text'); ?></em></h5>

Everything registers correctly in the sense that the new section and option are available in the customizer, but live preview does not function and no values are saved to the database (wp_options > theme_mods_mytheme) on save.

Any input (including pointing out what is likely an obvious oversight on my part) is appreciated. Thanks!

Answer 1

This live preview code should be like this -

wp.customize('inspection_cta_text', function(value){
    value.bind( function(to) {
        $('.footer-cta').text(to);
    });
});

Basically you don't need the "em". And there always should be default value present in the theme mod. For example -

.footer {
     border-top: solid 1px #<?php echo get_theme_mod( 'background_color', '#fff' ); ?>;
}

In your case it would be -

<h5 class="footer-cta"><em><?php echo get_theme_mod('inspection_cta_text', 'default text'); ?></em></h5>