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