Adding Theme Options With The Customization API

basic-function.php

add_action( 'customize_register' , 'my_theme_options' );

function my_theme_options( $wp_customize ) {
	// Sections, settings and controls will be added here
}

class.php

class My_Customizer {
	function register() {
		// Sections, settings and controls will be added here
	}
	function header_output() {
		// The live CSS is added here
	}
	function live_preview() {
		// The live preview is enqueued here
	}
}

add_action( 'customize_register' , array( 'My_Customizer' , 'register' ) );
add_action( 'wp_head' , array( 'My_Customizer' , 'header_output' ) );
add_action( 'customize_preview_init' , array( 'My_Customizer' , 'live_preview' ) );

enqueue.php

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

}

footer-control.php

$wp_customize->add_control( new WP_Customize_Color_Control( 
	$wp_customize, 
	'footer_bg_color_control',
	array(
		'label'    => __( 'Footer Background Color', 'mytheme' ), 
		'section'  => 'mytheme_footer_options',
		'settings' => 'footer_bg_color',
		'priority' => 10,
	) 
));

footer-section.php

$wp_customize->add_section( 
	'mytheme_footer_options', 
	array(
		'title'       => __( 'Footer Settings', 'mytheme' ),
		'priority'    => 100,
		'capability'  => 'edit_theme_options',
		'description' => __('Change footer options here.', 'mytheme'), 
	) 
);

footer-setting.php

$wp_customize->add_setting( 'footer_bg_color',
	array(
		'default' => 'f1f1f1'
	)
);      

livepreview-general.js

wp.customize( 'SETTING_NAME', function( value ) {
	value.bind( function( newval ) {
		// Change handled here
	} );
} );

livepreview.js

( function( $ ) {

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

setting-live.php

$wp_customize->add_setting( 'footer_bg_color',
	array(
		'default' => 'f1f1f1',
		'transport' => 'postMessage'
	)
);      

using-settings.php

add_action( 'wp_head' , 'my_dynamic_css' );

function my_dynamic_css() {
	?>
	<style type='text/css'>
	#site-footer {
		background-color:#<?php echo get_theme_mod('footer_bg_color') ?> ;
	}
	</style>
	<?php
}