customize it
TRANSCRIPT
1. Introduction 2. Visual Site Building 3. How Users Can Benefit 4. Development Approach 5. New Functionality 6. Summary
Agenda
WHAT IS THE CUSTOMIZER?
• Visual Editor for making changes
• Realtime preview
• Can be done directly on a live site
• No code changes needed
CONFIGURATION VS CODING
• Simple to modify items quickly
• Developer not required
• Great for technical users who know WordPress
• No deploy process
Pros of Configuration
CONFIGURATION VS CODING
• Not suitable for complex fixes
• Changes stored in database - no revisions
• Limited to functionality defined in theme
• May not be a permanent solution
• Difficult to move/copy config to another environment
Cons of Configuration
CONFIGURATION VS CODING
• No limits to solution
• Could create a fully custom solution
• Code managed in version control
• Devs will be knowledgeable about potential solutions
• Changes may be vetted through code review
Pros of Coding
USING THE CUSTOMIZER
•Change basic information about your site
•Static Front Page Setting
Tagline and Site Settings
WHERE ARE MY SETTINGS SAVED?
Site-wide settings - Options
• wp_options table
Theme specific options - Theme Mods
• saved as an array: theme_mods_themename
Database
WHERE ARE CUSTOMIZER SETTINGS SAVED?
theme_mods_twentyfifteen
a:1:{
s:20: “customize_link_color";
s:7: "#b5b5b5";
}
customize_link_color, #b5b5b5
Theme Mods
USE CASE: SITE BUILDER
•Can make changes without getting into the code
•May be appropriate for settings and other visual tweaks
Configuration
USE CASE: DEVELOPERS
•Configuration can be done in development quickly
•Database changes need to be pushed to production
Templated Theme Options
USE CASE: MULTISITE
•Most of the configuration can be handled by code
•Some of the config can be done by users
•Logo, colors, background image
Template
Customizer Classes
• /wp-admin/customize.php
• /wp-includes/customize*
• wp-admin/js/customize-*
• wp-admin/css/customize-*
• Your Theme
Where are the files?
Customizer Framework
• Options can be available based on context
• core functionality is to display widget areas on current page
• other widget areas displayed when user navigates to a page that
uses them
Context
Customizer API
• Panels
• Sections
• Controls
• Settings
Object Oriented
Panel
Control Setting
Control Setting
Section
Control Setting
Control Setting
Section
Transports
refresh
entire frame will refresh
postMessage
asynchronous request - page updated without reloading
How WordPress Delivers Changes to Display Data
New Features in WordPress 4.7
• CSS Editor
• Theme Switcher
• Content Creation
• Persistent Changes
• Visual Edit Shortcuts
Several Exciting Things
New Feature: CSS Editor
• Not suitable for complex styling
•No revisions
• Styles are being overridden
• CSS will only work on the current theme
Edit CSS in Real Time
New Feature: Theme Switcher
• Allows you to change and preview themes
• Directly in the customizer
Change themes with live preview
New Feature: Content Creation
• Create Slugs for posts and pages directly in the Customizer
• Editors can fully populate content later
Create content directly from the Customizer
New Feature: Change sets
• Changes stored without hitting save
• Can be bookmarked, shared and revisited in the future
Make changes persistent without saving
New Feature: Visual Edit Shortcuts
• Customizer fields are highlighted and easy to identify
Change content on page quickly
Learn MoreTheme Options - The Customizer API
https://developer.wordpress.org/themes/advanced-topics/customizer-api/
A Guide to the WordPress Theme Customizer
https://code.tutsplus.com/series/a-guide-to-the-wordpress-theme-customizer--wp-33722
A Preview of the Custom CSS Editor Added to the Customizer in WordPress 4.7
https://wptavern.com/a-preview-of-the-custom-css-editor-added-to-the-customizer-in-wordpress-4-7