Bridging The Gap Between The WordPress Admin And The Front End

Meetup presentation on the customizer

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

Transcript

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