Customize it

Customize It!

Edmund Turbin, Solutions Engineer @spicecadet

Give users control with the Customizer

1. Introduction 2. Visual Site Building 3. How Users Can Benefit 4. Development Approach 5. New Functionality 6. Summary

Agenda

INTRODUCTION

WHAT IS THE CUSTOMIZER?

• Visual Editor for making changes

• Realtime preview

• Can be done directly on a live site

• No code changes needed

WHO CAN USE IT?

• Super Admin

• Administrator

CONFIGURATION VS CODING

• Simple to modify items quickly

• Developer not required

• Great for technical users who know WordPress

• No deploy process

Pros of Configuration


• 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


• 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

VISUAL SITE BUILDING

USING THE CUSTOMIZER

•Change basic information about your site

•Static Front Page Setting

Tagline and Site Settings


• Logo

• Title

• Tagline

• Site Icon

Site Identity


•Menu Locations

•Primary Navigation

Menus


•Add Widgets to any

defined widget areas

Widgets

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

HOW USERS CAN BENEFIT

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

DEVELOPMENT APPROACH

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

Object Oriented

Panels Sections Controls Settings

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 FUNCTIONALITY

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

Configuration

Makes it simple for users to customize their site

Give Users OptionsCustomizer can give users more control

Thank you!

@spicecadet

[email protected]

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

Internet

Customize it