Using The WordPress Customizer
0 likes309 views
The document discusses the WordPress customizer, which is a visual editor and live-view for customizing WordPress themes. It allows flexibility for users and is simple for front-end users to use. The customizer contains settings, panels, sections, and controls. Settings store reusable customization options, panels group sections, sections group controls, and controls are the user interface elements like text boxes and color pickers. The document provides examples of adding these different customizer elements and recommends resources for learning more.
Using The WordPress Customizer
- 1. USING THE WORDPRESS CUSTOMIZER /JOSHUA KIDD @G33K_KIDD
- 2. ABOUT ME - JOSHUA KIDD Web Developer for 8 Years Developer at Mainly focused on JavaScript Frameworks, WordPress, Ruby, and Go Folsom Creative
- 3. WHAT IS THE CUSTOMIZER? Visual editor and live-view for WordPress
- 4. WHY THE CUSTOMIZER? Flexibility for the user Simple for front-end users
- 5. PARTS OF THE CUSTOMIZER Settings Panels Sections Controls
- 6. SETTINGS The settings API allows you to create reusable settings that are changed and used by the customizer.
- 7. THEME_MOD VS OPTION theme_mod: Current theme only. option: Global setting.
- 8. EXAMPLES $wp_customize->add_setting('social_media_twitter_setting', array( 'default' => '@g33k_kidd', // default value 'type' => 'option', // theme_mod or option 'transport' => 'refresh' // how it updates )); $wp_customize->add_setting('background_color', array( 'default' => '#FFFFFF', // default value 'type' => 'theme_mod', // theme_mod or option 'transport' => 'refresh' // how it updates ));
- 9. PANELS New since 4.0 Used for grouping sections.
- 10. EXAMPLE $wp_customize->add_panel('options_panel', array( 'title' => 'Example Panel', 'description' => 'Description', 'priority' => 10 ));
- 11. SECTIONS Used for grouping controls.
- 12. EXAMPLE $wp_customize->add_section('social_media_section', array( 'title' => 'Example Panel', 'theme_supports' => '', 'capability' => 'edit_theme_options', 'description' => 'Description', 'panel' => 'options_panel', 'priority' => 10 ));
- 13. CONTROLS
- 14. DEFAULT CONTROLS Plain Text Color Picker Image Select/Upload Background Image (not documented) Header Image (not documented)
- 15. EXAMPLE $wp_customize->add_control('social_media_twitter', array( 'label' => 'Twitter Profile', 'description' => 'Enter your twitter username or url here.', 'settings' => 'social_media_twitter_setting', 'priority' => 10, 'section' => 'social_media_section', 'type' => 'text' ));
- 17. DEMO TIME
- 18. QUESTIONS?
- 19. GET IN TOUCH Website: g33kidd.com Folsom: folsomcreative.com Twitter: @g33k_kidd Github: @g33kidd