Embracing The Customizer @luke_redroot red-root.com 

No content

Then (April 2012) 

Now 

No content

DEMO 

Sections 

Settings 

Controls text text checkbox 

# mytheme/functions.php require("lib/customizer.php"); # mytheme/lib/customizer.php add_action("customize_register",function($wpc){ // code here }); 

// PHP 5.3 add_action("customize_register",function($wpc){ // code here }); // equivalent to add_action("customize_register","named_function"); function named_function($wpc){ // code here } 

add_action("customize_register",function($wpc){ $wpc->add_section(); $wpc->add_setting(); $wpc->add_control(); }); 

$wpc->add_section("heading_section",array( "title" => "My Heading Section", "priority" => 35, "capability" => "edit_theme_options" )); 

$wpc->add_setting("mytheme_options[heading]",array( "default" => "Default Heading", "type" => "option", "capability" => "edit_theme_options" )); 

# mytheme/lib/customizer.php $wpc->add_setting("mytheme_options[heading]",array( "default" => "Default Heading", "type" => "option" )); # mytheme/index.php $options = get_option("mytheme_options"); $heading = $options["heading"]; 

# mytheme/lib/customizer.php $wpc->add_setting("mytheme_options_heading",array( "default" => "Default Heading", "type" => "option", )); # mytheme/index.php $heading = get_option("mytheme_options_heading"); 

# mytheme/lib/customizer.php $wpc->add_setting("heading",array( "default" => "Default Heading", "type" => "theme_mod" )); # mytheme/index.php $heading = get_theme_mod("heading"); 

$wpc->add_control(“mytheme_options[heading]",array( "label" => "Custom Heading", "section" => "heading_section", "setting" => "mytheme_options[heading]", "type" => "text" )); 

# text $wpc->add_control("mythemes_option[heading]",array( "label" => "Custom Heading", "section" => "heading_section", "setting" => "mytheme_options[heading]", "type" => "text" )); # checkbox $wpc->add_control("mytheme_options[heading]",array( "label" => "A Checkbox", "section" => "heading_section", "setting" => "mytheme_options[heading]", "type" => "checkbox" )); 

# select $wpc->add_control("mytheme_options[heading]",array( "label" => "A Checkbox", "section" => "heading_section", "setting" => "mytheme_options[heading]", "type" => "select", "choices" => array( "value 1" => "text for 1", "value 2" => "text for 2" ) )); # radio $wpc->add_control("mytheme_options[heading]",array( "label" => "A Checkbox", "section" => "heading_section", "setting" => "mytheme_options[heading]", "type" => "radio", "choices" => array( "value 1" => "text for 1", "value 2" => "text for 2" ) )); 

add_action("customize_register",function ($wpc){ $wpc->add_section("heading_section",array( "title" => "My Heading Section", "priority" => 0 )); $wpc->add_setting("mytheme_options[heading]",array( "default" => "Default Heading", "type" => "option", "capability" => "edit_theme_options" )); $wpc->add_setting("mytheme_options[blue]",array( "default" => "false", "type" => "option", "capability" => "edit_theme_options" )); $wpc->add_setting("mytheme_options[subheading]",array( "default" => "Hot Fuzz", "type" => "option", "capability" => "edit_theme_options" )); $wpc->add_control("mytheme_options[heading]",array( "label" => "Custom Heading", "section" => "heading_section", "setting" => "mytheme_options[heading]", "type" => "text" )); $wpc->add_control("mytheme_options[blue]",array( "label" => "Make It Blue?", "section" => "heading_section", "setting" => "mytheme_options[blue]", "type" => "checkbox" )); $wpc->add_control("mytheme_options[subheading]",array( "label" => "subheading?", "section" => "heading_section", "setting" => "mytheme_options[subheading]", "type" => "select", "choices" => array( "Hot Fuzz" => "Hot Fuzz", "Shaun of the Dead" => "Shaun of the Dead", "The World Ends" => "The World Ends" ) )); }); 

# Remove default sections $wpc->remove_section("title_tagline"); $wpc->remove_section("static_front_page"); 

$colour_control = new WP_Customize_Color_Control( $wpc, 'mytheme_options[blue]', array( 'label' => "Heading Color", 'section' => 'heading_section', 'settings' => 'mytheme_options[blue]', ) ); $wpc->add_control($colour_control); 

$image_control = new WP_Customize_Image_Control( $wpc, 'mytheme_options[image]', array( 'label' => "Heading Image", 'section' => 'heading_section', 'settings' => 'mytheme_options[image]', ) ); $wpc->add_control($image_control); 

class WP_Customize_Category_Control extends WP_Customize_Control { public $type = 'dropdown-category'; public function render_content() { $dropdown = wp_dropdown_categories(array( "selected" => $this->value(), "name" => $this->settings["default"]->id, "echo" => 0 )); $dropdown = str_replace( 'get_link(), $dropdown); ?>

label);?>

# use postMessage transport $wpc->add_setting("mytheme_options[heading]",array( "default" => "Default Heading", "type" => "option", "capability" => "edit_theme_options", "transport" => "postMessage" )); 

# mytheme/lib/customizer.php if($wpc->is_preview() && !is_admin()){ add_action("wp_footer", function(){ get_template_part("lib/views/customize_preview_js.php"); }); } # mytheme/lib/views/customizer_previews_js.php (function($){ wp.customize('mytheme_options[heading]',function(value){ value.bind(function(to){ $('h1').html(to); }); }); })(jQuery); 

CORESITES 

Resources: https://github.com/redroot/wp-customizer-example http://ottopress.com/2012/how-to-leverage-the-theme-customizer-in- your-own-themes/ http://ottopress.com/2012/theme-customizer-part-deux-getting-rid-of- options-pages/ http://ottopress.com/2012/making-a-custom-control-for-the-theme- customizer/ https://codex.wordpress.org/Theme_Customization_API 

Thanks! @luke_redroot red-root.com