Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bridging The Gap Between The WordPress Admin And The Front End

8eb77972cdb278e572a470e0ca7f63ed?s=47 Cameron Jones
September 07, 2016

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


Cameron Jones

September 07, 2016

More Decks by Cameron Jones

Other Decks in Technology


  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

  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