Embed Size (px)
Citation preview
@jonnyaukhttps://wider.co.uk
Using Customizer for custom content
Jonny Allbut Digital Director
@jonnyaukhttps://wider.co.uk
“It’s VITAL functionality, I need to edit this…”
@jonnyaukhttps://wider.co.uk
• Widget areas
• Custom options pages
• Custom post data
• Customizer (YAY!)
Front-end custom deployment
@jonnyaukhttps://wider.co.uk
• Data storage options
• Built for us to extend!
• Easy live preview, no reload
Customizer rocks!
@jonnyaukhttps://wider.co.uk
• custom-background
• custom-header
• custom-logo
Basics - add_theme_supporthttps://developer.wordpress.org/reference/functions/add_theme_support/
@jonnyaukhttps://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 );
@jonnyaukhttps://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);
@jonnyaukhttps://wider.co.uk
• THEME_MOD > Only used by single theme
• OPTION> Can be used by any theme
2 ways to store options
@jonnyaukhttps://wider.co.uk
• add_setting
• add_panel
• add_section
• add_control
Creating Customizer controls
@jonnyaukhttps://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
@jonnyaukhttps://wider.co.uk
Using a value
esc_html_e( get_theme_mod( 'opt_strapline', 'Now we are getting cute!' ) );
@jonnyaukhttps://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
@jonnyaukhttps://wider.co.uk
Takeaways
• Plan and structure for best user experience
• Consider what actually needs to be editable
• Edit once, update many
• Experiment!
@jonnyaukhttps://wider.co.uk
Using Customizer for custom content
Jonny Allbut Digital Director
