Theme customization


Published on

Seattle WordCamp 2015 presentation on the Theme Customizer

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • While many see the need for the theme customizer when developing commercial themes. It can also be useful in other situations. I decided to use the customizer for a multi-site solution where each event site is separately branded. While CSS could be used for this, the customizer allows the client to make their own updates and add new branding for an additional event.
  • I am the owner and web developer at Kool Kat Web Designs. I work with designers to create custom solutions for small to medium sized businesses and non-profits.
  • Remind them of Morten’s talk earlier today.
  • First, we are adding a new section for the Events. Sections are groups of options and let us put our custom settings together. When you are in the customizer, there are several sections such a header or nav that are there by default.
  • Once we have a section, we can add settings and controls to it. Settings are essentially the name of our controls, the name we use to pull the selection into our theme.
  • There are many built in controls for the theme customizer. WP_Customize_Image_Control will let you upload an image. Notice that it uses the settings and section from the last 2 slides.
  • You can see that we get the finovate_events_top_bg_setting we discussed earlier.
  • Theme customization

    1. 1. Theme Customization API
    2. 2.  Merrill M. Mayer  Kool Kat Web Designs    @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
    5. 5. Getting Started  Use the underscores or _s theme at  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 The events dropdown will navigate to all of the events sites.
    17. 17. Thank You