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
650
Embracing the Customizer
Luke Williams
February 21, 2013
Tweet
Share
More Decks by Luke Williams
See All by Luke Williams
Useful Mental Models For Product Engineers
redroot
0
30
Genetic Algorithms
redroot
0
41
Unity Talk
redroot
0
14
Neural Networks - a brief introduction by a fan
redroot
0
200
Web Accessibility in 2019
redroot
0
200
redux-saga
redroot
0
260
Redis - Lightning Talk @ RefME
redroot
0
480
Wordpress Multitenancy
redroot
0
1.4k
Other Decks in Programming
See All in Programming
パスワードに関する最近の動向
kenchan0130
1
320
Licences open source : entre guerre de clochers et radicalité
pylapp
2
550
Pluggable Storage in PostgreSQL
sira
1
180
Rector, time to refactor your code easily
guikingone
2
140
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
180
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
320
料理の注文メニューの3D化への挑戦
hideg
0
280
OSS貢献を気軽にしたい Let's Go Talk #1
yuyaabo
2
230
これからのスクラムマスターのキャリアプランの話をしよう - スクラムマスターの前に広がる世界
psj59129
0
180
Scaling Productivity- How we have improved our dev experience
sockeqwe
1
120
AWS Config Custom Rule、ノーコードでできるかな?
watany
0
250
Recap CDN, Edge, WebAssembly | ワインと鍋.js#1
sadnessojisan
2
1.2k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Building an army of robots
kneath
299
40k
Making Projects Easy
brettharned
98
4.4k
Navigating Team Friction
lara
175
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
The Invisible Customer
myddelton
110
11k
Done Done
chrislema
174
14k
Automating Front-end Workflow
addyosmani
1351
200k
Agile that works and the tools we love
rasmusluckow
319
19k
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