wordpress sunshine coast customizer
TRANSCRIPT
Bridging The Gap Between The WordPress Admin And
The Front End
www.mattersolutions.com.au
Cameron Jones - WordPress Developer at Matter Solutions
Warning!
Lots of codez
OOPs
There is a disconnect with updating our website settings
How do we get from this:
To this?
The process for updating settings for WordPress sites is
disjointed
This creates a negative user experience :(
Problems for users:● Cannot preview or stage their changes● Settings located in many different places and
formats○ Difficult to find○ Can’t make batch updates
Some plugins try to fix this
But we usually end up with rubbish like this:
And that’s just the page content. What about the
settings?
Settings pages everywhere
Our clients don’t understand the admin because it doesn’t
function the same as the front end
So how do we bridge the gap?
Enter The Customizer
● One place to update settings● Live preview● Device previews● Batch changes
That sounds great, but can I add my own settings to it?
Yes.
We’re going to add a phone number setting
This will be managed in a new Customizer section
It will be displayed in a widget, page content (shortcode) and a
footer hook
Demo Time!
How do I do that?
First: Prepare all the things
Store our setting names so we aren’t rewriting code (DRY)
Function to render our phone number
Output the phone number
All the hooks
Register our setting with the Customizer so we can
update it
Create a new section for contact details
Register the setting
Add a control for our setting
Add a selective refresh partial so we can live preview
Create our widget
Support for selective refresh in widgets needs to be declared first (this is normally done by
your theme)
register_widget on the widgets_init hook
New class that extends WP_Widget
Construct the class
Function for rendering the widget
Update and form functions
Ok but what about content authorship?
● Can’t preview template changes● Post thumbnail changes happen live● Shortcodes not previewed without a custom solution● Inconsistencies between WYSIWYG and front-end
stylesheets
Customize Postshttps://wordpress.org/plugins/customize-posts/
Welcome to the future
Demo Time!
Slides:
slideshare.net/cameronjonesweb/wordpress-sunshine-coast-customizer
GitHub:
github.com/cameronjonesweb/wordpress-sunshine-coast-customizer
Cameron Jonescameronjonesweb.com.au@cameronjonesweb
Matter Solutionsmattersolutions.com.au@mattersolutions