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.

WordPress Customizer

670 views

Published on

Presentation slides used in the WordPress Customizer introduction at WordPress NYC Meetup on May 19, 2015.

Published in: Technology
  • Be the first to comment

WordPress Customizer

  1. 1. B U I L D I N G T H E M E S W I T H T H E W O R D P R E S S C U S T O M I Z E R W O R D P R E S S N Y C
  2. 2. B A C K S T O RY G E T T I N G S TA R T E D
  3. 3. G E T T I N G S TA R T E D “There is no such thing as a new idea.”

  4. 4. T H E C U S T O M I Z E R G E T T I N G S TA R T E D
  5. 5. • Thad Allender • From Protection, Kansas • Director of Photography, Lawrence Journal-World • Multimedia producer, USA TODAY • Founder, Graph Paper Press & Theme.Works A B O U T
  6. 6. S H O U L D Y O U D O I T ? U S I N G T H E C U S T O M I Z E R • Public themes • Client themes • Constant changes • Undefined scope YES • Personal themes • Client themes • No changes • Clear scope NO
  7. 7. 4 B A S I C B U I L D I N G B L O C K S U S I N G T H E C U S T O M I Z E R 1. Panels 2. Sections 3. Settings 4. Controls
  8. 8. PA N E L S U S I N G T H E C U S T O M I Z E R
  9. 9. PA N E L S U S I N G T H E C U S T O M I Z E R Panels contain sections.
  10. 10. S E C T I O N S U S I N G T H E C U S T O M I Z E R
  11. 11. S E C T I O N S U S I N G T H E C U S T O M I Z E R Sections contain settings.
  12. 12. S E T T I N G S U S I N G T H E C U S T O M I Z E R
  13. 13. S E T T I N G S U S I N G T H E C U S T O M I Z E R Each setting has a control.
  14. 14. C O N T R O L S U S I N G T H E C U S T O M I Z E R
  15. 15. C O N T R O L S U S I N G T H E C U S T O M I Z E R Controls are the buttons and fields that you interact with in the customizer. A control might be a text box, a radio button, a color wheel, an upload field, or an image slider.
  16. 16. R E V I E W U S I N G T H E C U S T O M I Z E R • Panels contain sections • Sections contain settings • Each setting has a control
  17. 17. L E T ’ S C U S T O M I Z E U S I N G T H E C U S T O M I Z E R function my_customize_register( $wp_customize ) { // Our code for panels, sections, settings, and controls } add_action( 'customize_register', 'my_customize_register' );
  18. 18. A D D I N G PA N E L S U S I N G T H E C U S T O M I Z E R function my_customize_register( $wp_customize ) { $wp_customize->add_panel( 'my_general_panel', array( 'title' => __( 'General', 'my_textdomain' ), 'priority' => 10 ) ); } add_action( 'customize_register', 'my_customize_register' );
  19. 19. A D D I N G S E C T I O N S U S I N G T H E C U S T O M I Z E R function my_customize_register( $wp_customize ) { $wp_customize->add_panel( 'my_general_panel', array( 'title' => __( 'General', 'my_textdomain' ), 'priority' => 10 ) ); $wp_customize->add_section( ‘welcome_message_section', array( 'title' => __( 'Welcome Message', 'my_textdomain' ), 'priority' => 10, 'panel' => 'my_general_panel' ) ); } add_action( 'customize_register', 'my_customize_register' );
  20. 20. D RY P R I N C I P L E U S I N G T H E C U S T O M I Z E R TIP function my_customize_register( $wp_customize ) { $wp_customize->add_panel( 'my_general_panel', array( 'title' => __( 'General', 'my_textdomain' ), 'priority' => 10 ) ); $wp_customize->add_section( ‘welcome_message_section', array( 'title' => __( 'Welcome Message', 'my_textdomain' ), 'priority' => 10, 'panel' => 'my_general_panel' ) ); } add_action( 'customize_register', 'my_customize_register' );
  21. 21. D RY P R I N C I P L E U S I N G T H E C U S T O M I Z E R $general_panel = ‘my_general_panel’; TIP
  22. 22. D RY P R I N C I P L E U S I N G T H E C U S T O M I Z E R function my_customize_register( $wp_customize ) { $general_panel = 'my_general_panel'; $wp_customize->add_panel( $general_panel, array( 'title' => __( 'General', 'my_textdomain' ), 'priority' => 10 ) ); $wp_customize->add_section( ‘welcome_message_section', array( 'title' => __( 'Welcome Message', 'my_textdomain' ), 'priority' => 10, 'panel' => $general_panel ) ); } add_action( 'customize_register', 'my_customize_register' ); TIP
  23. 23. A D D I N G S E T T I N G S U S I N G T H E C U S T O M I Z E R $wp_customize->add_setting( 'welcome_message', array( 'default' => __( 'Welcome to my site!’, 'my_textdomain' ) ) );
  24. 24. A D D I N G C O N T R O L S U S I N G T H E C U S T O M I Z E R $wp_customize->add_control( 'welcome_message_control', array( 'label' => __( 'Message', 'my_textdomain' ), 'section' => 'welcome_message_section', 'settings' => 'welcome_message', 'type' => 'textarea', 'priority' => 10 ) );
  25. 25. C O N T R O L T Y P E S U S I N G T H E C U S T O M I Z E R 1. Text 2. Checkbox 3. Radio 4. Select 5. Dropdown pages 6. Textarea
  26. 26. M O R E C O N T R O L T Y P E S U S I N G T H E C U S T O M I Z E R 1. Color - WP_Customize_Color_Control() 2. Upload - WP_Customize_Upload_Control() 3. Image - WP_Customize_Image_Control() 4. Background - WP_Customize_Background_Image_Control() 5. Header - WP_Customize_Header_Image_Control()
  27. 27. B U T WA I T ! T H E R E ’ S M O R E !
  28. 28. C U S T O M C O N T R O L T Y P E S E X T E N D I N G T H E C U S T O M I Z E R
  29. 29. S H O U L D Y O U D O I T ? E X T E N D I N G T H E C U S T O M I Z E R • Enhances UX • Occasional maintenance YES • Confusing UX • Custom post types NO
  30. 30. T H E C U S T O M I Z E R R E S O U R C E S • Codex • Otto • Kirki • GitHub • Theme.Works
  31. 31. @thadallender info@graphpaperpress.com www.GraphPaperPress.com www.Theme.Works

×