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.
Theme Customization
API
 Merrill M. Mayer
 Kool Kat Web Designs
 http://www.koolkatwebdesigns.com/
 merrill@koolkatwebdesigns.com
 @koolkatweb
Overview
 What is the theme customization API?
 Getting Started
 Adding Custom Areas
 The Dashboard
 Pulling the Cust...
What is the Theme
Customization API?
 The Theme Customization API, added in WordPress
3.4, allows developers to customize...
Getting Started
 Use the underscores or _s theme at
http://underscores.me/
 Modify customizer.php (in the inc folder) wi...
Register Customizer
function customizedemo_customize_register(
$wp_customize ) {
…
}
add_action( 'customize_register',
'cu...
Adding Custom Areas
 Add a Section
 Add Settings
 Add Controls
Add a Section
/*backgrounds and colors*/
$wp_customize->add_section(
'finovate_conference_settings', array(
'title' => 'Fi...
Add Settings
/*settings and controls for the
backgrounds*/
$wp_customize->add_setting(
'finovate_events_top_bg_setting', a...
Add Controls
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'finovate_events_top_bg_setting', ...
Custom Options in your
Theme
 To retrieve our options we use get_theme_mod
$medium_color = get_theme_mod(
'finovate_main_...
The Dashboard
The Dashboard
Custom Options in your
Theme
 In the case of this site, we want to actually create
unique styles with CSS for each site.
...
Custom Options in your
Theme
function finovate_load_custom_styles() {
$medium_color = get_theme_mod( 'finovate_main_accent...
More Information
 Slides will be placed on slideshare
 The website for this presentation is http://finovate.com/.
The ev...
Thank You
Upcoming SlideShare
Loading in …5
×

Theme customization

56,138 views

Published on

Seattle WordCamp 2015 presentation on the Theme Customizer

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Theme customization

  1. 1. Theme Customization API
  2. 2.  Merrill M. Mayer  Kool Kat Web Designs  http://www.koolkatwebdesigns.com/  merrill@koolkatwebdesigns.com  @koolkatweb
  3. 3. Overview  What is the theme customization API?  Getting Started  Adding Custom Areas  The Dashboard  Pulling the Custom Options into your Theme
  4. 4. What is the Theme Customization API?  The Theme Customization API, added in WordPress 3.4, allows developers to customize and add controls to the "Appearance" → "Customize" admin screen. The Theme Customization screen allows site admins to tweak a theme's settings, color scheme or widgets, and see a preview of those changes in real time.  Documentation can be found at http://codex.wordpress.org/Theme_Customization_API
  5. 5. Getting Started  Use the underscores or _s theme at http://underscores.me/  Modify customizer.php (in the inc folder) with your specific settings and controls.  The customizer.php file already  Adds the necessary action to register the theme customer  Includes a JavaScript file to make the customizer preview reload changes asynchronously.
  6. 6. Register Customizer function customizedemo_customize_register( $wp_customize ) { … } add_action( 'customize_register', 'customizedemo_customize_register' );
  7. 7. Adding Custom Areas  Add a Section  Add Settings  Add Controls
  8. 8. Add a Section /*backgrounds and colors*/ $wp_customize->add_section( 'finovate_conference_settings', array( 'title' => 'Finovate Events', 'priority' => 36, ) );
  9. 9. Add Settings /*settings and controls for the backgrounds*/ $wp_customize->add_setting( 'finovate_events_top_bg_setting', array( 'default' => '', 'capability' => 'edit_theme_options', ) );
  10. 10. Add Controls $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'finovate_events_top_bg_setting', array( 'label' => 'Upload main events background', 'section' => 'finovate_conference_settings', 'settings' => 'finovate_events_top_bg_setting', ) ) );
  11. 11. Custom Options in your Theme  To retrieve our options we use get_theme_mod $medium_color = get_theme_mod( 'finovate_main_accent_color', '#fa8c1e' ); $light_color = get_theme_mod( 'finovate_light_accent_color', '#ffe191' ); $extralight_color = get_theme_mod( 'finovate_extralight_accent_color', '#fffff' ); $dark_color = get_theme_mod( 'finovate_dark_accent_color', '#b41400' );
  12. 12. The Dashboard
  13. 13. The Dashboard
  14. 14. Custom Options in your Theme  In the case of this site, we want to actually create unique styles with CSS for each site.  We use wp_head action to place styles using the <style> tag into our site add_action( 'wp_head', 'finovate_load_custom_styles' );
  15. 15. Custom Options in your Theme function finovate_load_custom_styles() { $medium_color = get_theme_mod( 'finovate_main_accent_color', '#fa8c1e' ); ….. ?> <style type="text/css"> .eventstop, .sponsors { background-image: url(<?php echo get_theme_mod( 'finovate_events_top_bg_setting', ''); ?>); }
  16. 16. More Information  Slides will be placed on slideshare  The website for this presentation is http://finovate.com/. The events dropdown will navigate to all of the events sites.
  17. 17. Thank You

×