Meetup presentation on the customizer Code is available on GitHub: https://github.com/cameronjonesweb/wordpress-sunshine-coast-customizer

1. Bridging The Gap Between
The WordPress Admin And
The Front End
www.mattersolutions.com.au
Cameron Jones - WordPress Developer at Matter Solutions

2. Warning!

3. Lots of codez

4. OOPs

5. There is a disconnect with
updating our website settings

6. How do we get from this:

7. To this?

8. The process for updating
settings for WordPress sites is
disjointed

9. This creates a negative user
experience :(

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

11. Some plugins try to fix this

12. But we usually end up with
rubbish like this:

13. And that’s just the page
content. What about the
settings?

14. Settings pages everywhere

15. Our clients don’t understand
the admin because it doesn’t
function the same as the
front end

16. So how do we bridge the gap?

17. Enter The Customizer

18. ● One place to update settings
● Live preview
● Device previews
● Batch changes

19. That sounds great, but can I
add my own settings to it?

20. Yes.

21. We’re going to add a phone
number setting

22. This will be managed in a new
Customizer section

23. It will be displayed in a widget,
page content (shortcode) and a
footer hook

24. Demo Time!

25. How do I do that?

26. First: Prepare all the things

27. Store our setting names so we
aren’t rewriting code (DRY)

28. Function to render our phone
number

29. Output the phone number

30. All the hooks

31. Register our setting with
the Customizer so we can
update it

32. Create a new section for
contact details

33. Register the setting

34. Add a control for our setting

35. Add a selective refresh partial
so we can live preview

36. Create our widget

37. Support for selective refresh in
widgets needs to be declared
first (this is normally done by
your theme)

38. register_widget on the
widgets_init hook

39. New class that extends
WP_Widget

40. Construct the class

41. Function for rendering
the widget

42. Update and form
functions

43. Ok but what about
content authorship?

44. ● Can’t preview template changes
● Post thumbnail changes happen live
● Shortcodes not previewed without a custom solution
● Inconsistencies between WYSIWYG and front-end
stylesheets

45. Customize Posts
https://wordpress.org/plugins/customize-posts/

46. Welcome to the future

47. Demo Time!

48. Slides:
slideshare.net/cameronjonesweb/wordpress-sunshine-coast-customizer

49. GitHub:
github.com/cameronjonesweb/wordpress-sunshine-coast-customizer

50. Cameron Jones
cameronjonesweb.com.au
@cameronjonesweb
Matter Solutions
mattersolutions.com.au
@mattersolutions