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