Embracing the Customizer

Transcript

1. 1.

   Embracing The Customizer @luke_redroot red-root.com

2. 2.

   None
3. 3.

   Then (April 2012)

4. 4.

   Now

5. 5.

   None
6. 6.

   DEMO

7. 7.

   Sections

8. 8.

   Settings

9. 9.

   Controls text text checkbox

10. 10.

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

11. 11.

    // 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 }
12. 12.

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

13. 13.

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

    => "edit_theme_options" ));
14. 14.

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

    "edit_theme_options" ));
15. 15.

    # 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"];
16. 16.

    # 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");
17. 17.

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

    )); # mytheme/index.php $heading = get_theme_mod("heading");
18. 18.

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

    "mytheme_options[heading]", "type" => "text" ));
19. 19.

    # 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" ));
20. 20.

    # 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" ) ));
21. 21.

    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" ) )); });
22. 22.

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

23. 23.

    $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);
24. 24.

    $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);
25. 25.

    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( '<select', '<select '.$this->get_link(), $dropdown); ?> <label> <p class="customize-control-title"><?php echo esc_html($this->label);?></p> <div> <?php echo $dropdown; ?> </div> </label> <?php } } gist.github.com/redroot/4997131
26. 26.

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

    => "option", "capability" => "edit_theme_options", "transport" => "postMessage" ));
27. 27.

    # 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 <script> (function($){ wp.customize('mytheme_options[heading]',function(value){ value.bind(function(to){ $('h1').html(to); }); }); })(jQuery); </script>
28. 28.

    CORESITES

29. 29.

    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

30. 30.

    Thanks! @luke_redroot red-root.com