wordpress customizer
TRANSCRIPT
![Page 1: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/1.jpg)
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
![Page 2: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/2.jpg)
B A C K S T O R YG E T T I N G S TA R T E D
![Page 3: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/3.jpg)
![Page 4: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/4.jpg)
![Page 5: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/5.jpg)
![Page 6: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/6.jpg)
![Page 7: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/7.jpg)
G E T T I N G S TA R T E D
“There is no such thing as a new idea.”
![Page 8: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/8.jpg)
T H E C U S T O M I Z E RG E T T I N G S TA R T E D
![Page 9: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/9.jpg)
![Page 10: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/10.jpg)
![Page 11: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/11.jpg)
• 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
![Page 12: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/12.jpg)
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
![Page 13: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/13.jpg)
4 B A S I C B U I L D I N G B L O C K SU 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
![Page 14: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/14.jpg)
PA N E L SU S I N G T H E C U S T O M I Z E R
![Page 15: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/15.jpg)
PA N E L SU S I N G T H E C U S T O M I Z E R
Panels contain sections.
![Page 16: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/16.jpg)
S E C T I O N SU S I N G T H E C U S T O M I Z E R
![Page 17: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/17.jpg)
S E C T I O N SU S I N G T H E C U S T O M I Z E R
Sections contain settings.
![Page 18: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/18.jpg)
S E T T I N G SU S I N G T H E C U S T O M I Z E R
![Page 19: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/19.jpg)
S E T T I N G SU S I N G T H E C U S T O M I Z E R
Each setting has a control.
![Page 20: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/20.jpg)
C O N T R O L SU S I N G T H E C U S T O M I Z E R
![Page 21: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/21.jpg)
C O N T R O L SU 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.
![Page 22: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/22.jpg)
R E V I E WU 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
![Page 23: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/23.jpg)
L E T ’ S C U S T O M I Z EU 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' );
![Page 24: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/24.jpg)
A D D I N G PA N E L SU 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' );
![Page 25: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/25.jpg)
A D D I N G S E C T I O N SU 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' );
![Page 26: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/26.jpg)
D R Y P R I N C I P L EU 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' );
![Page 27: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/27.jpg)
D R Y P R I N C I P L EU S I N G T H E C U S T O M I Z E R
$general_panel = ‘my_general_panel’;
TIP
![Page 28: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/28.jpg)
D R Y P R I N C I P L EU 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
![Page 29: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/29.jpg)
A D D I N G S E T T I N G SU 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' )) );
![Page 30: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/30.jpg)
A D D I N G C O N T R O L SU 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) );
![Page 31: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/31.jpg)
C O N T R O L T Y P E SU 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
![Page 32: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/32.jpg)
M O R E C O N T R O L T Y P E SU 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()
![Page 33: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/33.jpg)
B U T WA I T ! T H E R E ’ S M O R E !
![Page 34: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/34.jpg)
C U S T O M C O N T R O L T Y P E SE X T E N D I N G T H E C U S T O M I Z E R
![Page 35: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/35.jpg)
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
![Page 36: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/36.jpg)
T H E C U S T O M I Z E RR E S O U R C E S
• Codex • Otto • Kirki • GitHub • Theme.Works
![Page 37: WordPress Customizer](https://reader030.vdocuments.us/reader030/viewer/2022032504/55c49d44bb61ebec178b46b9/html5/thumbnails/37.jpg)
@thadallender
www.GraphPaperPress.com
www.Theme.Works