Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Embracing the Customizer
Luke Williams
February 21, 2013
Programming
2
640
Embracing the Customizer
Luke Williams
February 21, 2013
Tweet
Share
More Decks by Luke Williams
See All by Luke Williams
redroot
0
21
redroot
0
76
redroot
0
73
redroot
0
100
redroot
0
360
redroot
0
1.4k
Other Decks in Programming
See All in Programming
nanimonodemonai
2
1.4k
nbkouhou
1
1.2k
pdone
0
210
anchorcable
1
120
mu2in
0
140
itosho525
1
370
malvinstn
1
650
junmikai
0
290
akatsukinewgrad
0
210
komagata
1
1.8k
hr01
0
1.6k
kazuki19992
0
450
Featured
See All Featured
lauravandoore
437
28k
sachag
267
17k
danielanewman
1
480
jensimmons
207
10k
jonrohan
1021
380k
jponch
103
5k
chriscoyier
780
240k
shpigford
165
19k
zakiwarfel
88
3.3k
lara
172
9.5k
andyhume
62
3.4k
afnizarnur
176
14k
Transcript
Embracing The Customizer @luke_redroot red-root.com
None
Then (April 2012)
Now
None
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( '<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
# 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 <script> (function($){ wp.customize('mytheme_options[heading]',function(value){ value.bind(function(to){ $('h1').html(to); }); }); })(jQuery); </script>
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