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

Client-Proofing Your WordPress Sites

Client-Proofing Your WordPress Sites

Learn how to:
1) Provide user-friendly and deeply customized edit screens
2) Streamline the admin to help your client navigate
3) Create efficient and easy-to-understand support documentation
4) Host screencasts to walk your clients through their new site’s back-end

96a0a10f9fd8dc86310ab3d68a0b535c?s=128

Jeff Brock Studio

August 17, 2013
Tweet

More Decks by Jeff Brock Studio

Other Decks in Design

Transcript

  1. @JeffBrockStudio! jeffbrockstudio.com CLIENT-PROOFING YOUR WORDPRESS SITES WordCamp Vancouver 2013

  2. @JeffBrockStudio jeffbrockstudio.com A Case Study Square 1 Management

  3. @JeffBrockStudio jeffbrockstudio.com Advanced Custom Fields... comes to the rescue

  4. @JeffBrockStudio! jeffbrockstudio.com The path to client happiness • Provide user-friendly

    and deeply customized edit screens! • Streamline the admin to help your client navigate! • Create efficient and easy-to- understand support documentation! • Host screencasts to walk your clients through their new site’s back-end
  5. @JeffBrockStudio jeffbrockstudio.com My background 16 years in web design &!

    development! Built 50+ Wordpress sites! jeffbrockstudio.com
  6. @JeffBrockStudio jeffbrockstudio.com Ahh ... it's comfortable here But remember that

    your clients may not feel at home right away
  7. @JeffBrockStudio! jeffbrockstudio.com • No jargon! • No shortcodes! • No

    HTML Meet your client where they are
  8. @JeffBrockStudio jeffbrockstudio.com The horror ... the horror ... When bad

    design happens to good clients, we have only ourselves to blame
  9. @JeffBrockStudio jeffbrockstudio.com Fling #1: Pods plugin Felt locked in to

    plugin since it depended on custom tables
  10. @JeffBrockStudio jeffbrockstudio.com Fling #2: More Fields plugin Development on the

    plugin stalled
  11. @JeffBrockStudio jeffbrockstudio.com Long-term relationship: Advanced Custom Fields plugin Created by

    Elliot Condon! Actively maintained! More than 1 million downloads! advancedcustomfields.com
  12. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: Scientific conference schedules

  13. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: Product tables

  14. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: Price lists

  15. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: FAQs

  16. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: Product slideshows

  17. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: Detailed rental listings

  18. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: Staff directories

  19. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: Text blocks

  20. @JeffBrockStudio jeffbrockstudio.com ACF can help clients create: Custom Google Maps

  21. @JeffBrockStudio jeffbrockstudio.com Getting started with ACF Feels like it could

    be WP core! Styling looks native to WordPress! Documentation website filled with! samples & screenshots
  22. @JeffBrockStudio jeffbrockstudio.com ACF Add-ons Repeater Field! Gallery Field ! Options

    Page! Flexible Content Field
  23. @JeffBrockStudio jeffbrockstudio.com Add a field group Give it a title

    and start adding fields
  24. @JeffBrockStudio jeffbrockstudio.com Add a field Each field has a label,

    a name & field type
  25. @JeffBrockStudio! jeffbrockstudio.com • Text and textarea! • Number and email!

    • Password! • WYSIWYG editor! • Image & file upload! • Select, checkbox, radio, T/F! • Page links! • Taxonomy! • Users Field types are epic
  26. @JeffBrockStudio jeffbrockstudio.com Tabs layout Organizes data for your client

  27. @JeffBrockStudio jeffbrockstudio.com Client helpers In-context help/instructions! Required fields! Default values

  28. @JeffBrockStudio jeffbrockstudio.com Conditional logic Show a field based on client's

    answer to another field
  29. @JeffBrockStudio jeffbrockstudio.com Location Page template! Front page! Children of a

    specific parent
  30. @JeffBrockStudio jeffbrockstudio.com Options Position meta boxes in main column or

    right column! Hide many elements on page
  31. @JeffBrockStudio jeffbrockstudio.com Repeater Field add-on Clients can add, delete &!

    re-order items! You set a min / max number
  32. @JeffBrockStudio jeffbrockstudio.com Options Page add-on Contact info in footers! Text

    for Page Not Found! Default page banner! Custom Google Maps marker
  33. @JeffBrockStudio jeffbrockstudio.com Gallery Field add-on Intuitive drag and drop

  34. @JeffBrockStudio jeffbrockstudio.com Gallery Field add-on Easily see & edit photo

    meta- data
  35. @JeffBrockStudio jeffbrockstudio.com Flexible Content Field ! add-on Package content layouts,

    using all the tools of Advanced Custom Fields, and then offer them as choices to the client
  36. @JeffBrockStudio jeffbrockstudio.com Flexible Content Field ! add-on Package content layouts,

    using all the tools of Advanced Custom Fields, and then offer them as choices to the client
  37. @JeffBrockStudio jeffbrockstudio.com Flexible Content Field ! add-on Package content layouts,

    using all the tools of Advanced Custom Fields, and then offer them as choices to the client
  38. @JeffBrockStudio jeffbrockstudio.com Free community add-ons PayPal Field! Date & Time

    Picker! Location Field! Gravity Forms & Contact Form 7
  39. @JeffBrockStudio! jeffbrockstudio.com • Future-proof! • Follow development timeline! • Don't

    overdo it Final thoughts on ACF
  40. @JeffBrockStudio jeffbrockstudio.com Menu Editor plugin Rename, reorder & hide items!

    Can hide by user role
  41. @JeffBrockStudio jeffbrockstudio.com TinyMCE Advanced plugin Hide underline, strikethrough, full align,

    font family, background color, split page, and insert image
  42. @JeffBrockStudio! jeffbrockstudio.com • Hide Dashboard widgets! • Customize TinyMCE format

    dropdown items! • Hide Appearance widgets! • Add an editor style CSS to TinyMCE Functions.php
  43. @JeffBrockStudio! jeffbrockstudio.com • Test client's login credentials! • Change "Display

    name publicly as" to first and last name! • Reorganize Dashboard widgets! • Increase number of pages shown per screen Polishing the interface
  44. @JeffBrockStudio jeffbrockstudio.com Erident Custom Login and Dashboard plugin Custom version

    of Client's logo! Match colors
  45. @JeffBrockStudio jeffbrockstudio.com CodePress Admin Columns plugin Choose the columns your

    client ! sees ! Display lots of data at once
  46. @JeffBrockStudio jeffbrockstudio.com CodePress Admin Columns plugin Drag and drop! Set

    labels & widths! Choose from Advanced Custom Fields
  47. @JeffBrockStudio! jeffbrockstudio.com • Be comprehensive but not overly detailed! •

    What are key tasks clients needs to accomplish?! • Set up subdomain of your primary site & install WordPress Multisite! • Create sub-subdomain for each client Support Documentation
  48. @JeffBrockStudio jeffbrockstudio.com New Blog Defaults plugin Set the default theme,

    permalinks structure, media settings for each support site
  49. @JeffBrockStudio jeffbrockstudio.com Easy Docs theme shakenandstirredweb.com/ theme/easy-docs

  50. @JeffBrockStudio! jeffbrockstudio.com • What is WordPress?! • Login! • Dashboard!

    • Pages (titles, permalinks, revision history, page attributes, featured image upload, previewing changes & WordPress SEO)! • Posts! • Menus! • Options (footer content, social media links) Primary areas to cover in support docs
  51. @JeffBrockStudio jeffbrockstudio.com Add screenshots of ! key functions Whole page

    or detail
  52. @JeffBrockStudio jeffbrockstudio.com Add screenshots of ! key functions Use Lightbox

    Plus ColorBox
  53. @JeffBrockStudio! jeffbrockstudio.com • Copy text from previous support docs! •

    Write instructions as you're developing the theme! • Send link to client before training, but don't send their login until after the training! • Provide links to tutorial videos, such as wp101.com or lynda.com Documentation tips
  54. @JeffBrockStudio jeffbrockstudio.com Training A reliable screencast service is crucial. My

    favorite is join.me.
  55. @JeffBrockStudio! jeffbrockstudio.com • FreeConferenceCall.com for audio! • WebEx.com Other services

  56. @JeffBrockStudio! jeffbrockstudio.com • Schedule for 60-90 minutes! • Invite everyone

    from client's organization who will be users! • Login and run through all key actions! • Have sample images and text easily accessible ! • Fully charge your equipment Prepping for the training
  57. @JeffBrockStudio! jeffbrockstudio.com • Login 15 minutes early! • Share only

    your browser window! • Keep support docs open in another browser! • Login as a user from another computer, to see what client is seeing! • Be aware of the lag time when narrating ! • Call in 5 minutes early and get centered mentally Tech tips
  58. @JeffBrockStudio! jeffbrockstudio.com • Never condescend! • Take notes! • Keep

    an eye on the clock! • Assure them this is not their only opportunity to ask questions ! • Send their login credentials immediately afterward During the training
  59. @JeffBrockStudio jeffbrockstudio.com Empower your clients