O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Bridging The Gap Between
The WordPress Admin And
The Front End
www.mattersolutions.com.au
Cameron Jones - WordPress Develo...
Warning!
Lots of codez
OOPs
There is a disconnect with
updating our website settings
How do we get from this:
To this?
The process for updating
settings for WordPress sites is
disjointed
This creates a negative user
experience :(
Problems for users:
● Cannot preview or stage their changes
● Settings located in many different places and
formats
○ Diff...
Some plugins try to fix this
But we usually end up with
rubbish like this:
And that’s just the page
content. What about the
settings?
Settings pages everywhere
Our clients don’t understand
the admin because it doesn’t
function the same as the
front end
So how do we bridge the gap?
Enter The Customizer
● One place to update settings
● Live preview
● Device previews
● Batch changes
That sounds great, but can I
add my own settings to it?
Yes.
We’re going to add a phone
number setting
This will be managed in a new
Customizer section
It will be displayed in a widget,
page content (shortcode) and a
footer hook
Demo Time!
How do I do that?
First: Prepare all the things
Store our setting names so we
aren’t rewriting code (DRY)
Function to render our phone
number
Output the phone number
All the hooks
Register our setting with
the Customizer so we can
update it
Create a new section for
contact details
Register the setting
Add a control for our setting
Add a selective refresh partial
so we can live preview
Create our widget
Support for selective refresh in
widgets needs to be declared
first (this is normally done by
your theme)
register_widget on the
widgets_init hook
New class that extends
WP_Widget
Construct the class
Function for rendering
the widget
Update and form
functions
Ok but what about
content authorship?
● Can’t preview template changes
● Post thumbnail changes happen live
● Shortcodes not previewed without a custom solution...
Customize Posts
https://wordpress.org/plugins/customize-posts/
Welcome to the future
Demo Time!
Slides:
slideshare.net/cameronjonesweb/wordpress-sunshine-coast-customizer
GitHub:
github.com/cameronjonesweb/wordpress-sunshine-coast-customizer
Cameron Jones
cameronjonesweb.com.au
@cameronjonesweb
Matter Solutions
mattersolutions.com.au
@mattersolutions
Próximos SlideShares
Carregando em…5
×

WordPress Sunshine Coast Customizer

378 visualizações

Publicada em

Meetup presentation on the customizer

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

WordPress Sunshine Coast Customizer

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

×