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

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