Slide 1
Slide 1 text
Bridging The Gap Between
The WordPress Admin And
The Front End
www.mattersolutions.com.au
Cameron Jones - WordPress Developer at Matter Solutions
Slide 2
Slide 2 text
Warning!
Slide 3
Slide 3 text
Lots of codez
Slide 4
Slide 4 text
OOPs
Slide 5
Slide 5 text
There is a disconnect with
updating our website settings
Slide 6
Slide 6 text
How do we get from this:
Slide 7
Slide 7 text
To this?
Slide 8
Slide 8 text
The process for updating
settings for WordPress sites is
disjointed
Slide 9
Slide 9 text
This creates a negative user
experience :(
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
Some plugins try to fix this
Slide 12
Slide 12 text
But we usually end up with
rubbish like this:
Slide 13
Slide 13 text
And that’s just the page
content. What about the
settings?
Slide 14
Slide 14 text
Settings pages everywhere
Slide 15
Slide 15 text
Our clients don’t understand
the admin because it doesn’t
function the same as the
front end
Slide 16
Slide 16 text
So how do we bridge the gap?
Slide 17
Slide 17 text
Enter The Customizer
Slide 18
Slide 18 text
● One place to update settings
● Live preview
● Device previews
● Batch changes
Slide 19
Slide 19 text
That sounds great, but can I
add my own settings to it?
Slide 20
Slide 20 text
Yes.
Slide 21
Slide 21 text
We’re going to add a phone
number setting
Slide 22
Slide 22 text
This will be managed in a new
Customizer section
Slide 23
Slide 23 text
It will be displayed in a widget,
page content (shortcode) and a
footer hook
Slide 24
Slide 24 text
Demo Time!
Slide 25
Slide 25 text
How do I do that?
Slide 26
Slide 26 text
First: Prepare all the things
Slide 27
Slide 27 text
Store our setting names so we
aren’t rewriting code (DRY)
Slide 28
Slide 28 text
Function to render our phone
number
Slide 29
Slide 29 text
Output the phone number
Slide 30
Slide 30 text
All the hooks
Slide 31
Slide 31 text
Register our setting with
the Customizer so we can
update it
Slide 32
Slide 32 text
Create a new section for
contact details
Slide 33
Slide 33 text
Register the setting
Slide 34
Slide 34 text
Add a control for our setting
Slide 35
Slide 35 text
Add a selective refresh partial
so we can live preview
Slide 36
Slide 36 text
Create our widget
Slide 37
Slide 37 text
Support for selective refresh in
widgets needs to be declared
first (this is normally done by
your theme)
Slide 38
Slide 38 text
register_widget on the
widgets_init hook
Slide 39
Slide 39 text
New class that extends
WP_Widget
Slide 40
Slide 40 text
Construct the class
Slide 41
Slide 41 text
Function for rendering
the widget
Slide 42
Slide 42 text
Update and form
functions
Slide 43
Slide 43 text
Ok but what about
content authorship?
Slide 44
Slide 44 text
● Can’t preview template changes
● Post thumbnail changes happen live
● Shortcodes not previewed without a custom solution
● Inconsistencies between WYSIWYG and front-end
stylesheets
Slide 45
Slide 45 text
Customize Posts
https://wordpress.org/plugins/customize-posts/
Slide 46
Slide 46 text
Welcome to the future
Slide 47
Slide 47 text
Demo Time!
Slide 48
Slide 48 text
Slides:
slideshare.net/cameronjonesweb/wordpress-sunshine-coast-customizer
Slide 49
Slide 49 text
GitHub:
github.com/cameronjonesweb/wordpress-sunshine-coast-customizer
Slide 50
Slide 50 text
Cameron Jones
cameronjonesweb.com.au
@cameronjonesweb
Matter Solutions
mattersolutions.com.au
@mattersolutions