Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp Praga 2015

3,646 views

Published on

Presenting capabilities that develop since WordPress 3.4 of the theme customization screen. In addition to the standard features, there will be also presented more unique functions available, including the use of the changes introduced in the newest WordPress versions. The main aim of the lecture is to convince theme developers that the theme customization screen may completely replace additional subpages of the dashboard with theme options.

Published in: Internet
  • Be the first to comment

WordCamp Praga 2015

  1. 1. Discovering the capabilities of the Theme Customizer API Tomasz Dziuda WordCamp Praha 2015
  2. 2. Ahoj!
  3. 3. Tomasz Dziuda Lead Developer @ Co-organizer of WordCamp Poland 2014 Twitter: @dziudek http://dziudek.pl -> https://www.gavick.com/blog Mail: dziudek@gavick.com
  4. 4. Why's it worth using the Theme Customizer?
  5. 5. Live preview for setting changes
  6. 6. Easy theme-option implementation
  7. 7. Test configuration options easily without affecting the live website
  8. 8. A user doesn’t have to learn how to use the theme settings page
  9. 9. 4 practical bits of advice from me to you
  10. 10. As the number of options grows, the potential number of users requesting assistance will grow exponentially too 1 0 Number of options
  11. 11. Giving a user full control over colors, in most cases, ends with dramatic results
  12. 12. The Dashboard will accept everything, but the user won't
  13. 13. Solutions implemented in the official APIs generally work better
  14. 14. How does it work?
  15. 15. <iframe>
  16. 16. <iframe> refresh or JavaScript data binding
  17. 17. is_preview() <iframe> refresh or JavaScript data binding
  18. 18. is_preview() wp_head <iframe> refresh or JavaScript data binding
  19. 19. is_preview() customize_register wp_head <iframe> refresh or JavaScript data binding
  20. 20. is_preview() customize_register wp_head <iframe> customize_preview_init refresh or JavaScript data binding
  21. 21. is_preview() customize_register wp_head <iframe> customize_preview_init customize_controls_enqueue_scripts refresh or JavaScript data binding
  22. 22. Customize Manager
  23. 23. Customize Manager Panel
  24. 24. Customize Manager Panel Section
  25. 25. Customize Manager Panel Section Control
  26. 26. Customize Manager Panel Section Control Setting
  27. 27. Customize Manager Panel Section Control Setting Context Context Context
  28. 28. Syntax
  29. 29. function PREFIX_customize_register($wp_customizer){ // Theme Customizer code }
  30. 30. function PREFIX_customize_register($wp_customizer){ // Theme Customizer code } add_action( 'customize_register', ‘PREFIX_customize_register’ );
  31. 31. function PREFIX_customize_register($wp_customizer){ // Theme Customizer code } add_action( 'customize_register', ‘PREFIX_customize_register’ );
  32. 32. $wp_customizer->add_X( );
  33. 33. $wp_customizer->add_X( ); X = setting, panel, section, control
  34. 34. $wp_customizer->add_X( ‘name’, ); X = setting, panel, section, control
  35. 35. $wp_customizer->add_X( ‘name’, array( ‘setting_1’ => ‘value’, ‘setting_2’ => ‘value’, … ‘setting_N’ => ‘value’ ) ); X = setting, panel, section, control
  36. 36. $wp_customizer->get_X(‘name’)
  37. 37. $wp_customizer->get_X(‘name’) $wp_customizer->remove_X(‘name’)
  38. 38. Available params param / element panel section control setting type ✔ ✔ ✔ ✔ description ✔ ✔ ✔ priority ✔ ✔ ✔ capability ✔ ✔ ✔ theme_supports ✔ ✔ ✔ title ✔ ✔ panel ✔ section ✔ label ✔ choices ✔ input_attrs ✔ active_callback ✔ sanitize_callback ✔ sanitize_js_callback ✔ default ✔ transport ✔
  39. 39. Types of controls
  40. 40. text radio checkbox textarea select dropdown-pages
  41. 41. WP_Customize_Color_ControlWP_Customize_Image_Control
  42. 42. More controls
  43. 43. $wp_customize->add_control( ‘mytheme_layout_width’, array( 'type' => 'range', 'section' => 'layout', 'label' => ‘Layout width', 'input_attrs' => array( 'min' => 720, 'max' => 1280, 'step' => 1, 'class' => ‘layout-width-control‘ ) ) );
  44. 44. $wp_customize->add_control( ‘mytheme_layout_width’, array( 'type' => 'range', 'section' => 'layout', 'label' => ‘Layout width', 'input_attrs' => array( 'min' => 720, 'max' => 1280, 'step' => 1, 'class' => ‘layout-width-control‘ ) ) );
  45. 45. $wp_customize->add_control( ‘mytheme_layout_width’, array( 'type' => 'range', 'section' => 'layout', 'label' => ‘Layout width', 'input_attrs' => array( 'min' => 720, 'max' => 1280, 'step' => 1, 'class' => ‘layout-width-control‘ ) ) );
  46. 46. But there is a small problem…
  47. 47. Source: http://caniuse.com/#search=date
  48. 48. Custom controls
  49. 49. class My_Customize_Textarea_Control extends WP_Customize_Control { }
  50. 50. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; }
  51. 51. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <?php } }
  52. 52. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <?php if(!empty($this->label)) : ?> <span class=“customize-control-title"> <?php echo esc_html( $this->label ); ?> </span> <?php endif; ?> </label> <?php } }
  53. 53. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <?php if(!empty($this->label)) : ?> <span class=“customize-control-title"> <?php echo esc_html( $this->label ); ?> </span> <?php endif; ?> <?php if(!empty($this->description)) : ?> <span class="description customize-control-description”> <?php echo $this->description ; ?> </span> <?php endif; ?> </label> <?php } }
  54. 54. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <?php if(!empty($this->label)) : ?> <span class=“customize-control-title"> <?php echo esc_html( $this->label ); ?> </span> <?php endif; ?> <?php if(!empty($this->description)) : ?> <span class="description customize-control-description”> <?php echo $this->description ; ?> </span> <?php endif; ?> <textarea rows=“5" cols=“20” <?php $this->link(); ?>> <?php echo esc_textarea($this->value()); ?> </textarea> </label> <?php } }
  55. 55. class My_Customize_Textarea_Control extends WP_Customize_Control { public $type = 'textarea'; public function render_content() { ?> <label> <?php if(!empty($this->label)) : ?> <span class=“customize-control-title"> <?php echo esc_html( $this->label ); ?> </span> <?php endif; ?> <?php if(!empty($this->description)) : ?> <span class="description customize-control-description”> <?php echo $this->description ; ?> </span> <?php endif; ?> <textarea rows=“5" cols=“20” <?php $this->link(); ?>> <?php echo esc_textarea($this->value()); ?> </textarea> </label> <?php } }
  56. 56. $wp_customize->add_control( );
  57. 57. $wp_customize->add_control( new My_Customize_Textarea_Control( ) );
  58. 58. $wp_customize->add_control( new My_Customize_Textarea_Control( $wp_customize, ‘theme_copyright_text’, ) );
  59. 59. $wp_customize->add_control( new My_Customize_Textarea_Control( $wp_customize, ‘theme_copyright_text’, array( 'label' => __(‘Copyright text', 'theme'), 'section' => 'features', 'settings' => ‘theme_copyright_text’, 'priority' => 2 ) ) );
  60. 60. How to use context?
  61. 61. • Hiding unnecessary options
  62. 62. • Hiding unnecessary options • Options dedicated to specific subpages
  63. 63. • Hiding unnecessary options • Options dedicated to specific subpages • Creating dependencies between options
  64. 64. $wp_customize->add_control( 'mytheme_google_font', array( 'section' => 'mytheme_font_options', 'label' => __('Google Font URL', 'mytheme'), 'type' => 'text', 'active_callback' => 'mytheme_show_font_field' ) );
  65. 65. function mytheme_show_font_field($control) { }
  66. 66. function mytheme_show_font_field($control) { $option = $control->manager->get_setting(‘mytheme_font'); }
  67. 67. function mytheme_show_font_field($control) { $option = $control->manager->get_setting(‘mytheme_font'); return $option->value() == 'google'; }
  68. 68. Problems with active_callback is_front_page will work fine as: “active_callback” => “is_front_page”
  69. 69. Problems with active_callback is_front_page will work fine as: “active_callback” => “is_front_page” but is_single or is_singular won’t, because they take an argument which in this case is a handler to the panel/section/control
  70. 70. Problems with active_callback function PREFIX_is_single() { return is_single(); }
  71. 71. Live preview
  72. 72. $wp_customize->add_setting( 'mytheme_primary_color', array( 'default' => '#5cc1a9', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'sanitize_hex_color' ) );
  73. 73. $wp_customize->add_setting( 'mytheme_primary_color', array( 'default' => '#5cc1a9', 'capability' => 'edit_theme_options', 'transport' => 'postMessage', 'sanitize_callback' => 'sanitize_hex_color' ) );
  74. 74. function mytheme_customize_preview_js() { wp_enqueue_script( 'mytheme-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array(), ‘1.0', true ); }
  75. 75. function mytheme_customize_preview_js() { wp_enqueue_script( 'mytheme-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array(), ‘1.0', true ); } add_action( 'customize_preview_init', ‘mytheme_customize_preview_js' );
  76. 76. (function($){ })(jQuery);
  77. 77. (function($){ wp.customize( 'mytheme_primary_color', function(value) { } ); })(jQuery);
  78. 78. (function($){ wp.customize( 'mytheme_primary_color', function(value) { value.bind(function(to) { }); } ); })(jQuery);
  79. 79. (function($){ wp.customize( 'mytheme_primary_color', function(value) { value.bind(function(to) { jQuery('a').css('color', to || '#5cc1a9'); }); } ); })(jQuery);
  80. 80. Optimisation
  81. 81. wp.customize( 'mytheme_primary_color', function(value) { value.bind( function( to ) { } ); });
  82. 82. wp.customize( 'mytheme_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; } ); });
  83. 83. wp.customize( 'mytheme_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; var new_css = 'a { color: ' + to + '; }'; } ); });
  84. 84. wp.customize( 'mytheme_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; var new_css = 'a { color: ' + to + '; }'; if($('#new-css').length) { $('#new-css').remove(); } } ); });
  85. 85. wp.customize( 'mytheme_primary_color', function(value) { value.bind( function( to ) { to = to || '#5cc1a9'; var new_css = 'a { color: ' + to + '; }'; if($('#new-css').length) { $('#new-css').remove(); } $(document).find('head') .append($('<style id="new-css">' + new_css + '</style>')); } ); });
  86. 86. Results BEFORE • potentially thousands of DOM operations • manipulations with style attributes AFTER • maximum 2 DOM operations • no manipulations with style attributes
  87. 87. JavaScript API
  88. 88. Possibilities • Access to all elements
  89. 89. Possibilities • Access to all elements • Re-render of existing elements
  90. 90. Possibilities • Access to all elements • Re-render of existing elements • Modification of existing elements
  91. 91. Possibilities • Access to all elements • Re-render of existing elements • Modification of existing elements • Event tracking and control over the preview area
  92. 92. function PREFIX_theme_customizer_tooltips() { ?> <?php } add_action( 'customize_controls_print_scripts', ‘PREFIX_theme_customizer_tooltips' );
  93. 93. function PREFIX_theme_customizer_tooltips() { ?> <script type="text/javascript"> jQuery(document).ready(function() { }); </script> <?php } add_action( 'customize_controls_print_scripts', ‘PREFIX_theme_customizer_tooltips' );
  94. 94. function PREFIX_theme_customizer_tooltips() { ?> <script type="text/javascript"> jQuery(document).ready(function() { wp.customize.bind('ready', function() { // Your Theme Customizer Code }); }); </script> <?php } add_action( 'customize_controls_print_scripts', ‘PREFIX_theme_customizer_tooltips' );
  95. 95. Examples
  96. 96. wp.customize.section("colors").expand(); Examples
  97. 97. wp.customize.section("colors").expand(); wp.customize.control("blogname").priority(100); Examples
  98. 98. wp.customize.section("colors").expand(); wp.customize.control("blogname").priority(100); wp.customize.control("blogname").section("colors"); Examples
  99. 99. wp.customize.section("colors").expand(); wp.customize.control("blogname").priority(100); wp.customize.control("blogname").section("colors"); var ctrl = wp.customize.control("background_color"); ctrl.params.label = "New label"; ctrl.renderContent(); ctrl.ready(); Examples
  100. 100. Reading list • https://www.gavick.com/blog/live-preview-themes-colors-changes-theme- customizer • https://www.gavick.com/blog/contextual-controls-theme-customizer • https://www.gavick.com/blog/theme-customization-controls • https://www.gavick.com/blog/custom-control-wordpress-theme-customizer • https://www.gavick.com/blog/custom-category-selection-controls • https://www.gavick.com/blog/using-javascript-theme-customization-screen • https://www.gavick.com/blog/using-tooltips-instead-option-descriptions- wordpress-theme-customizer • https://www.gavick.com/blog/internal-linking-wordpress-theme-customizer
  101. 101. Děkuji!
  102. 102. Questions?
  103. 103. This presentation is available under the GPL license: http://www.gnu.org/copyleft/gpl.html

×