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
23
redroot
0
1
redroot
0
97
redroot
0
93
redroot
0
130
redroot
0
390
redroot
0
1.4k
Other Decks in Programming
See All in Programming
sysrich
0
250
77web
2
2.5k
techharmony
0
180
matyo91
1
150
timeseriesfr
0
130
ktgrstsh
1
210
chatii
2
290
patrickjahr
0
110
shun_oshidari
6
2.9k
minecr
0
120
bkuhlmann
2
330
cc4966
1
110
Featured
See All Featured
eitanlees
116
10k
zenorocha
296
40k
samanthasiow
58
6.4k
bermonpainter
343
26k
searls
204
37k
bryan
100
11k
lara
17
2.9k
aarron
258
36k
smashingmag
232
18k
tenderlove
55
3.5k
roundedbygravity
84
7.9k
jmmastey
11
700
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