Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Embracing the Customizer

Embracing the Customizer

Luke Williams

February 21, 2013
Tweet

More Decks by Luke Williams

Other Decks in Programming

Transcript

  1. Embracing
    The Customizer
    @luke_redroot red-root.com

    View full-size slide

  2. Then
    (April 2012)

    View full-size slide

  3. Controls
    text
    text
    checkbox

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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);?>




    }
    }
    gist.github.com/redroot/4997131

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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

    View full-size slide

  23. Thanks!
    @luke_redroot red-root.com

    View full-size slide