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 Bristol 2017 Using WordPress Customizer for custom content

403 views

Published on

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!

Published in: Internet
  • Login to see the comments

  • Be the first to like this

WordCamp Bristol 2017 Using WordPress Customizer for custom content

  1. 1. @jonnyauk https://wider.co.uk Using Customizer for custom content Jonny Allbut Digital Director
  2. 2. @jonnyauk https://wider.co.uk “It’s VITAL functionality, I need to edit this…”
  3. 3. @jonnyauk https://wider.co.uk • Widget areas • Custom options pages • Custom post data • Customizer (YAY!) Front-end custom deployment
  4. 4. @jonnyauk https://wider.co.uk • Data storage options • Built for us to extend! • Easy live preview, no reload Customizer rocks!
  5. 5. @jonnyauk https://wider.co.uk Baby steps into customizer
  6. 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. 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. 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. 9. @jonnyauk https://wider.co.uk Creating your own controls
  10. 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. 11. @jonnyauk https://wider.co.uk • add_setting • add_panel • add_section • add_control Creating Customizer controls
  12. 12. @jonnyauk https://wider.co.uk PANEL SECTION CONTROL
  13. 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. 14. @jonnyauk https://wider.co.uk Using a value esc_html_e(
 get_theme_mod(
 'opt_strapline',
 'Now we are getting cute!'
 )
 );
  15. 15. @jonnyauk https://wider.co.uk Live demo of sorts 
 (wish me luck!)
  16. 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. 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. 18. @jonnyauk https://wider.co.uk Using Customizer for custom content Jonny Allbut Digital Director

×