When you need editability in various common (or uncommon!) areas of a website, it can be hard to decide how to deploy this. Do you widgetize it, create a custom options page, add custom fields to a page, use custom post types – there are a-lot of different strategies! When we need this kind of functionality on sites that we build, we’ve tried them all! I’ll demonstrate what I think is the nicest way – by using the Theme Customizer API you can deliver a great user experience, and even a live preview for the client… it’s sexy!

1. @jonnyauk
https://wider.co.uk
Using Customizer for
custom content
Jonny Allbut
Digital Director

2. @jonnyauk
https://wider.co.uk
“It’s VITAL functionality,
I need to edit this…”

3. @jonnyauk
https://wider.co.uk
• Widget areas
• Custom options pages
• Custom post data
• Customizer (YAY!)
Front-end custom deployment

4. @jonnyauk
https://wider.co.uk
• Data storage options
• Built for us to extend!
• Easy live preview, no reload
Customizer rocks!

5. @jonnyauk
https://wider.co.uk
Baby steps into
customizer

6. @jonnyauk
https://wider.co.uk
• custom-background
• custom-header
• custom-logo
Basics - add_theme_support
https://developer.wordpress.org/reference/functions/add_theme_support/

7. @jonnyauk
https://wider.co.uk
Basics - custom-background
$defaults = array(
'default-image' => '',
'default-preset' => 'default',
'default-position-x' => 'left',
'default-position-y' => 'top',
'default-size' => 'auto',
'default-repeat' => 'repeat',
'default-attachment' => 'scroll',
'default-color' => '',
'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => '',);
add_theme_support( 'custom-background', $defaults );

8. @jonnyauk
https://wider.co.uk
Basics - custom-background
$cmzr_bg_defaults = array(
'default-color' => '003e51',
'wp-head-callback' => '_custom_background_cb'
);
add_theme_support(‘custom-background',$cmzr_bg_defaults);

9. @jonnyauk
https://wider.co.uk
Creating your own
controls

10. @jonnyauk
https://wider.co.uk
•THEME_MOD
> Only used by single theme
•OPTION
> Can be used by any theme
2 ways to store options

11. @jonnyauk
https://wider.co.uk
• add_setting
• add_panel
• add_section
• add_control
Creating Customizer controls

12. @jonnyauk
https://wider.co.uk
PANEL
SECTION
CONTROL

13. @jonnyauk
https://wider.co.uk
• WP_Customize_Control
• WP_Customize_Color_Control
• WP_Customize_Upload_Control
• WP_Customize_Image_Control
• WP_Customize_Background_Image_Control
• WP_Customize_Header_Image_Control
• WP_Customize_Cropped_Image_Control
• WP_Customize_Media_Control
Input control types

14. @jonnyauk
https://wider.co.uk
Using a value
esc_html_e(
get_theme_mod(
'opt_strapline',
'Now we are getting cute!'
)
);

15. @jonnyauk
https://wider.co.uk
Live demo of sorts
(wish me luck!)

16. @jonnyauk
https://wider.co.uk
Customizer.js example code: https://goo.gl/v9Qa5V
Customizer.php example code: https://goo.gl/7fnYiG
https://developer.wordpress.org/themes/customize-api/
Twentyseventeen core theme
Reference materials

17. @jonnyauk
https://wider.co.uk
Takeaways
• Plan and structure for best user experience
• Consider what actually needs to be editable
• Edit once, update many
• Experiment!

18. @jonnyauk
https://wider.co.uk
Using Customizer for
custom content
Jonny Allbut
Digital Director