Post on 07-Aug-2015
transcript
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
B A C K S T O R YG E T T I N G S TA R T E D
G E T T I N G S TA R T E D
“There is no such thing as a new idea.”
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
• 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
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
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
PA N E L SU S I N G T H E C U S T O M I Z E R
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.
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
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.
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
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.
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
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.
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
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' );
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' );
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' );
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' );
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
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
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' )) );
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) );
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
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()
B U T WA I T ! T H E R E ’ S M O R E !
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
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
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
@thadallender
info@graphpaperpress.com
www.GraphPaperPress.com
www.Theme.Works