Customizer Tutorial

add-section.php

$wp_customize->add_section( 'cd_colors' , array(
    'title'      => 'Colors',
    'priority'   => 30,
) );

button-condition.php

<?php if( get_theme_mod( 'cd_button_display', 'show' ) == 'show' ) : ?>
    <a href="" class='button'>Come On In</a>
<?php endif ?>

button-control.php

  $wp_customize->add_section( 'cd_button' , array(
      'title'      => 'The Button',
      'priority'   => 20,
  ) );

  $wp_customize->add_setting( 'cd_button_display' , array(
      'default'     => true,
      'transport'   => 'refresh',
  ) );

  $wp_customize->add_control( 'cd_button_display', array(
  'label' => 'Button Display',
  'section' => 'cd_button',
  'settings' => 'cd_button_display',
  'type' => 'radio',
  'choices' => array(
    'show' => 'Show Button',
    'hide' => 'Hide Button',
  ),
) );

button-text-control.php

$wp_customize->add_setting( 'cd_button_text' , array(
    'default'     => 'Come On In',
    'transport'   => 'postMessage',
) );

$wp_customize->add_control( 'cd_button_text', array(
    'label' => 'Button Text',
'section'	=> 'cd_button',
'type'	 => 'text',
) );

button-text-preview.php

wp.customize( 'cd_button_text', function( value ) {
  value.bind( function( newval ) {
    $( '#intro a' ).html( newval );
  } );
} );

button-text.php

<a href="" class='button'><?php echo get_theme_mod( 'cd_button_text', 'Come On In' ) ?></a>

button.php

<div id='button-container'>
    <?php cd_show_main_button() ?>
</div>

changing-identity.js

wp.customize( 'blogname', function( value ) {
  value.bind( function( newval ) {
    $( '#intro h1' ).html( newval );
  } );
} );

wp.customize( 'blogdescription', function( value ) {
  value.bind( function( newval ) {
    $( '#intro h2' ).html( newval );
  } );
} );

create-control.php

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
	'label'        => 'Background Color',
	'section'    => 'cd_colors',
	'settings'   => 'background_color',
) ) );

create-setting.php

$wp_customize->add_setting( 'background_color' , array(
    'default'     => '#43C6E4',
    'transport'   => 'refresh',
) );

custom-css.php

add_action( 'wp_head', 'cd_customizer_css');
function cd_customizer_css()
{
    ?>
         <style type="text/css">
             body { background: #<?php echo get_theme_mod('background_color', '#43C6E4'); ?>; }
         </style>
    <?php
}

customizer-basic.js

( function( $ ) {

} )( jQuery );

customizer-basics.php

add_action( 'customize_register', 'cd_customizer_settings' );
function cd_customizer_settings( $wp_customize ) {

}

customizer.js

( function( $ ) {

  wp.customize( 'background_color', function( value ) {
		value.bind( function( newval ) {
			$( 'body' ).css( 'background-color', newval );
		} );
	} );
	
} )( jQuery );

default-transport.php

$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';

enqueue.php

add_action( 'customize_preview_init', 'cd_customizer' );
function cd_customizer() {
	wp_enqueue_script(
		  'cd_customizer',
		  get_template_directory_uri() . '/customizer.js',
		  array( 'jquery','customize-preview' ),
		  '',
		  true
	);
}

functions-include.php

include('customizer.php');

partials.php

function cd_show_main_button() {
    if( get_theme_mod( 'cd_button_display', 'show' ) == 'show' ) {
        echo "<a href='' class='button'>" . get_theme_mod( 'cd_button_text', 'Come On In' ) . "</a>";
    }
}

photocount-ui.php

<div id='photocount'>
    <span><?php echo get_theme_mod( 'cd_photocount', 0 ) ?></span> photos
</div>

range-control.php

$wp_customize->add_setting( 'cd_photocount' , array(
    'default'     => 0,
    'transport'   => 'postMessage',
) );

$wp_customize->add_control( new WP_Customize_Range( $wp_customize, 'cd_photocount', array(
	'label'	=>  'Photo Count',
    'min' => 10,
    'max' => 9999,
    'step' => 10,
	'section' => 'title_tagline',
) ) );

range.js

wp.customize( 'cd_photocount', function( value ) {
	value.bind( function( newval ) {
		$( '#photocount span' ).html( newval );
	} );
} );

range.php

if( class_exists( 'WP_Customize_Control' ) ) {
	class WP_Customize_Range extends WP_Customize_Control {
		public $type = 'range';

        public function __construct( $manager, $id, $args = array() ) {
            parent::__construct( $manager, $id, $args );
            $defaults = array(
                'min' => 0,
                'max' => 10,
                'step' => 1
            );
            $args = wp_parse_args( $args, $defaults );

            $this->min = $args['min'];
            $this->max = $args['max'];
            $this->step = $args['step'];
        }

		public function render_content() {
		?>
		<label>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<input class='range-slider' min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type='range' <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>" oninput="jQuery(this).next('input').val( jQuery(this).val() )">
            <input onKeyUp="jQuery(this).prev('input').val( jQuery(this).val() )" type='text' value='<?php echo esc_attr( $this->value() ); ?>'>

		</label>
		<?php
		}
	}
}

selective-refresh.php

$wp_customize->selective_refresh->add_partial( 'cd_button_display', array(
    'selector' => '#button-container',
    'render_callback' => 'cd_show_main_button',
) );