Building themes using the WP Theme Customizer

Transcript

1. Front-end & WordPress Developer Senior Developer at Make Do Dave Green
2. Building themes using the WordPress theme customizer
3. How have we been adding options to our themes?
5. Example of the Options Framework
6. So, what’s changed?
9. “We have made a new requirement regarding theme options. We are going to be requiring use of the customizer for all options from now. This applies to all new themes (submitted after this post is published). All existing themes have 6 months from today before we enforce this.” -- WordPress Theme Review Team
10. SAY WHAT?
11. It’s going to be ok, folks.
12. A brief summary of the Theme Customizer API • Introduced in WordPress 3.4, was which released on June 13th 2012. By no means a new feature! • Integrates with the WordPress Settings API • Developers can add theme options using WordPress core features instead of using an external framework • Provides the end user with instant feedback when they make a change, whether it be text, colours, image uploads etc
14. How to build customizer options into your theme • Create a subfolder in your theme called ‘inc’ if you don’t already have one e.g. wp-content/your-theme/inc • Create a file called customizer.php in that folder • Add the following line near the top of your functions.php // Child Theme require get_stylesheet_directory() . '/inc/customizer.php'; // Parent Theme require get_template_directory() . '/inc/customizer.php';
15. $wpcustomize add_setting() get_setting() add_section() get_section() add_control() get_control()
16. function wpsheff_customize( $wp_customize ) { // Define settings, sections and controls } add_action( 'customize_register', 'wpsheff_customize' ); The customize_register action hook
17. function wpsheff_customize( $wp_customize ) { $wp_customize->add_setting( 'phone_number' , array( 'default' => '07890 123 456', 'capability' => 'manage_options', 'transport' => 'postMessage' 'sanitize_callback' => 'wpsheff_validate', ) ); } add_action( 'customize_register', 'wpsheff_customize' ); Defining a setting
18. function wpsheff_validate( $data ) { // Return only numbers $sanitized = preg_replace( '/[^0-9 ]+/' , '' , $data ); return $sanitized; } Validating setting data
19. function wpsheff_customize( $wp_customize ) { $wp_customize->add_section('wpsheff_section', array( 'title' => 'WP Sheff Section', 'description' => 'Settings created at WP Sheff.', 'priority' => '20' ) ); } add_action( 'customize_register', 'wpsheff_customize' ); Defining a section
20. function wpsheff_customize( $wp_customize ) { $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'phone_number', // control name array( 'label' => 'Phone Number', 'section' => 'wpsheff_section', 'settings' => 'phone_number', 'type' => 'text', // 'priority' => 10, ) ) ); } add_action( 'customize_register', 'wpsheff_customize' ); Defining a control
21. function wpsheff_customize( $wp_customize ) { // SETTING $wp_customize->add_setting('phone_number', array( 'default' => '07890 123 456', 'capability' => 'manage_options', 'transport' => 'postMessage' ) ); // SECTION $wp_customize->add_section('wpsheff_section', array( 'title' => 'WP Sheff Section', 'description' => 'Settings created at WP Sheff.', 'priority' => '20' ) ); // CONTROL $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'phone_number', array( 'label' => 'Phone Number', 'section' => 'wpsheff_section', 'settings' => 'phone_number', 'type' => 'text', ) ) ); } add_action( 'customize_register', 'wpsheff_customize' );
22. <p class="phone-number"> <?php echo get_theme_mod('phone_number'); ?> </p> Displaying theme options using get_theme_mod
24. Great success!
25. • WP_Customize_Color_Control • WP_Customize_Upload_Control • WP_Customize_Image_Control • WP_Customize_Background_Image_Control • WP_Customize_Header_Image_Control Classes available for additional control types
26. function wpsheff_customize( $wp_customize ) { $wp_customize->add_setting('title_colour', array( 'default' => '#000', 'capability' => 'manage_options', 'transport' => 'postMessage' ) ); } add_action( 'customize_register', 'wpsheff_customize' ); Adding a colour picker to change the title colour
27. function wpsheff_customize( $wp_customize ) { // Setting… // Section… $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'title_colour', // control name array( 'label' => 'Title Colour', 'section' => 'wpsheff_section', 'settings' => 'title_colour' ) ) ); } add_action( 'customize_register', 'wpsheff_customize' );
29. But wait, there’s more...
30. Outputting CSS to override the default styles function wpsheff_customize_css() { ?> <style type="text/css"> .site-title a { color: <?php echo get_theme_mod('title_colour'); ?>; } </style> <?php } add_action( 'wp_head', 'wpsheff_customize_css' );
32. Configuring live preview: postMessage is the key function wpsheff_customize( $wp_customize ) { $wp_customize->add_setting( 'phone_number' , array( 'default' => '07890 123 456', 'capability' => 'manage_options', 'transport' => 'postMessage' // BINGO! ) ); } add_action( 'customize_register', 'wpsheff_customize' );
33. Configuring live preview: add theme-customizer.js ( function( $ ) { // Update the phone number wp.customize( 'phone_number', function( value ) { value.bind( function( newval ) { $( '.phone-number' ).html( newval ); } ); } ); } )( jQuery );
34. Configuring live preview: add theme-customizer.js ( function( $ ) { // Phone number code… // Update the site title colour wp.customize( 'title_colour', function( value ) { value.bind( function( newval ) { $( '.site-title a' ).css( 'color' , newval ); } ); } ); } )( jQuery );
35. ( function( $ ) { // Update the phone number wp.customize( 'phone_number', function( value ) { value.bind( function( newval ) { $( '.phone-number' ).html( newval ); } ); } ); // Update the site title colour wp.customize( 'title_colour', function( value ) { value.bind( function( newval ) { $( '.site-title a' ).css( 'color' , newval ); } ); } ); } )( jQuery );
36. Configuring live preview: enqueue the Javascript function wpsheff_live_preview() { wp_enqueue_script( 'wpsheff-customizer', // script ID get_stylesheet_directory_uri().'/js/theme-customizer.js', array( 'jquery','customize-preview' ), '', true // in the footer ); } add_action('customize_preview_init', 'wpsheff_live_preview');
37. Yes, we did it!
38. Modifying existing settings, sections and controls function wpsheff_modifying( $wp_customize ) { $wp_customize->get_setting( 'phone_number' )->default = '999'; $wp_customize->get_section( 'wpsheff_section' )->title = 'WP Sheffield'; $wp_customize->get_control( 'phone_number' )->label = 'Telephone Number'; } add_action( 'customize_register' , 'wpsheff_modifying', 50 );
40. Removing existing sections and controls function wpsheff_removing( $wp_customize ) { $wp_customize->remove_section( 'header_image' ); $wp_customize->remove_section( 'background_image' ); $wp_customize->remove_control( 'background_color' ); $wp_customize->remove_control( 'header_background_color' ); $wp_customize->remove_control( 'sidebar_textcolor' ); } add_action( 'customize_register' , 'wpsheff_removing' , 50 );
42. Adding controls to existing sections function wpsheff_adding( $wp_customize ) { $wp_customize->add_control( new WP_Customize__Control( $wp_customize, 'phone_number', array( 'label' => 'Telephone Number', 'section' => 'title_tagline', // BINGO! 'settings' => 'phone_number' ) ) ); } add_action( 'customize_register' , 'wpsheff_adding' , 50 );
44. • Relatively simple to build into themes or use to modify existing theme options • No external dependencies for adding options using common elements • Immediate feedback when the user makes changes delivers a better user experience Pros of using the Theme Customizer API
45. • User interface isn’t everyone’s cup of tea: it’s quite cramped, and isn’t great on mobile • The core controls are currently very limited, requiring third party libraries Cons of using the Theme Customizer API
46. You should take a look at...
50. @davetgreen speakerdeck.com/davetgreen Thank you!