Wordpress Customier Presentation at Internetdagarna/WordCamp Stockholm 2016

1. Customize It!
Edmund Turbin, Solutions Engineer @spicecadet
Give users control with the Customizer

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

3. INTRODUCTION

4. WHAT IS THE CUSTOMIZER?
• Visual Editor for making changes
• Realtime preview
• Can be done directly on a live site
• No code changes needed

5. WHO CAN USE IT?
• Super Admin
• Administrator

6. CONFIGURATION VS CODING
• Simple to modify items quickly
• Developer not required
• Great for technical users who know WordPress
• No deploy process
Pros of Configuration

7. 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

8. 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

9. VISUAL SITE BUILDING

10. USING THE CUSTOMIZER
•Change basic information about your site
•Static Front Page Setting
Tagline and Site Settings

12. USING THE CUSTOMIZER
• Logo
• Title
• Tagline
• Site Icon
Site Identity

14. USING THE CUSTOMIZER
•Menu Locations
•Primary Navigation
Menus

15. USING THE CUSTOMIZER
•Add Widgets to any
defined widget areas
Widgets

17. 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

18. WHERE ARE CUSTOMIZER SETTINGS SAVED?
theme_mods_twentyfifteen
a:1:{
s:20: “customize_link_color";
s:7: "#b5b5b5";
}
customize_link_color, #b5b5b5
Theme Mods

19. HOW USERS CAN BENEFIT

20. USE CASE: SITE BUILDER
•Can make changes without getting into the code
•May be appropriate for settings and other visual tweaks
Configuration

21. USE CASE: DEVELOPERS
•Configuration can be done in development quickly
•Database changes need to be pushed to production
Templated Theme Options

22. 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

23. DEVELOPMENT APPROACH

24. Customizer Classes
•/wp-admin/customize.php
• /wp-includes/customize*
• wp-admin/js/customize-*
• wp-admin/css/customize-*
• Your Theme
Where are the files?

25. 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

26. Customizer API
Object Oriented
Panels Sections Controls Settings

27. Customizer API
• Panels
• Sections
• Controls
• Settings
Object Oriented
Panel
Control Setting
Control Setting
Section
Control Setting
Control Setting
Section

29. Transports
refresh
entire frame will refresh
postMessage
asynchronous request - page updated without reloading
How WordPress Delivers Changes to Display Data

30. NEW FUNCTIONALITY

31. New Features in WordPress 4.7
• CSS Editor
• Theme Switcher
• Content Creation
• Persistent Changes
• Visual Edit Shortcuts
Several Exciting Things

32. 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

34. New Feature: Theme Switcher
• Allows you to change and preview themes
• Directly in the customizer
Change themes with live preview

35. 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

36. New Feature: Change sets
• Changes stored without hitting save
• Can be bookmarked, shared and revisited in the future
Make changes persistent without saving

37. New Feature: Visual Edit Shortcuts
• Customizer fields are highlighted and easy to identify
Change content on page quickly

39. Configuration
Makes it simple for users to
customize their site

40. Give Users Options
Customizer can give users more
control

41. Thank you!
@spicecadet
edmund.turbin@wpengine.com

42. Learn More
Theme 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