Avoiding "How do I do that again?" - WordCamp Tampa 2015

Presentation made at WordCamp Tampa 2015

Transcript

1. Avoiding "How do I Avoiding "How do I do that again?" do that again?" Making WordPress easy for Making WordPress easy for your clients your clients Becky Hamm
2. Freelancer at MetricSlice Front-end Development and UX Build custom WordPress themes and edit existing ones @thebeckyhamm • metricslice.com
3. "How do I put: "How do I put: - a picture - a picture - in the sidebar - in the sidebar - on the About page?" - on the About page?"
4. How can we avoid How can we avoid these types of these types of questions from our questions from our clients? clients?
5. No questions (make it intuitive) No coding No breaking the site Auto-maintenance and... Goals Today Goals Today
6. Make it easier for Make it easier for them AND them AND for you for you
7. Solutions Solutions (ranked by difficulty for us) 1. Get on good hosting 2. Use plugins preemptively 3. Add code to functions.php 4. Custom meta data and post types
8. We're going to We're going to tackle this problem tackle this problem by problem. by problem.
9. Problem #1: Problem #1: They uploaded a 10mb They uploaded a 10mb image on the home page. image on the home page.
10. Solutions Solutions
11. Imsanity Imsanity Resizes images down to Resizes images down to max width/height max width/height
12. EWWW Image EWWW Image Optimizer Optimizer Optimizes all types of Optimizes all types of images, automatically images, automatically
13. Picturefill.WP Picturefill.WP Polyfill for new <picture> Polyfill for new <picture> element element
14. Add other image Add other image sizes for them to sizes for them to choose from choose from
15. Title Text Title Text // in functions.php add_theme_support( 'post-thumbnails' ); add_action( 'after_setup_theme', 'ms_add_image_sizes' ); function ms_add_image_sizes() { add_image_size( 'small', 300, 300, true ); // 300 pixels square and cropped add_image_size( 'xlarge', 1000, 1000 ); // (max 1000 x 1000 pixels, not cropped) }
16. Problem #2: Problem #2: "I want to put a picture in "I want to put a picture in the sidebar on my About the sidebar on my About Me page." Me page."
17. Solution Solution
18. Custom Sidebars Custom Sidebars Add sidebars on the fly and Add sidebars on the fly and assign by page/post assign by page/post
19. Problem #2.5: Problem #2.5: "I don't understand the "I don't understand the code in the text widget" code in the text widget"
20. Solution Solution
21. WP Editor Widget WP Editor Widget Adds Visual Editor in a Adds Visual Editor in a widget widget
23. Problem #3: Problem #3: "I want 2 columns here" "I want 2 columns here"
24. Solution Solution
25. Column Shortcodes Column Shortcodes
26. This is starting to This is starting to add up to a LOT of add up to a LOT of plugins. plugins.
27. "I want 2 columns here ... "I want 2 columns here ... because I want to have a because I want to have a gallery of photos gallery of photos of my work of my work and when and when you click on them you click on them they pop they pop out and then.. out and then.." "
28. You could keep You could keep adding plugins, or adding plugins, or
29. DEVELOP DEVELOP FOR FOR CONTENT CONTENT
30. Ask your client what Ask your client what content they will content they will have. have.
31. Then build for that. Then build for that.
32. If they want more If they want more than just a blog... than just a blog... events news rentals bios charters job listings directory products gallery
33. Start looking at Start looking at Custom Post Types Custom Post Types & & Custom Meta Boxes Custom Meta Boxes
34. Add CPTs/CMBs in a Add CPTs/CMBs in a custom plugin custom plugin https://www.doitwithwp.com/putting-things-where-they-belong
35. Post types & meta Post types & meta data are data are content content, not , not style. style. Keep them out of the theme so they can be used in future site iterations.
36. How to add a CPT How to add a CPT
37. generateWP.com generateWP.com Post Type Generator Post Type Generator Use generator tool Copy and paste code into your custom plugin Custom Post Type Custom Post Type UI Plugin UI Plugin Easier Add custom post type and then delete the plugin (types will remain) Downside: your CPTs are not as visible moving forward
38. How to add custom How to add custom meta boxes meta boxes
39. CMB2 Library CMB2 Library it "will blow your mind" it "will blow your mind" (and it's free!)
40. Easy to install Great inline and wiki documentation Does a bunch of stuff, like...
41. Radios, selects, color Radios, selects, color pickers, wysiwyg, image pickers, wysiwyg, image upload, dates, maps*, upload, dates, maps*, galleries*, repeaters galleries*, repeaters *3rd party field types (also free)
42. Limit to individual pages or CPTs Add fields to user profiles etc.
43. So what does this So what does this have to do with our have to do with our client, again? client, again?
44. Example time! Example time!
45. Boat charters Boat charters
46. Types of data needed: Types of data needed: 1. Length of sail 2. Charter rate ($) 3. Photo gallery 4. Available boats 5. Related charters 6. General description
47. Add CMB2 library to Add CMB2 library to our custom plugin our custom plugin
48. Example Code Example Code Initialize the meta box // Start with an underscore to hide fields from custom fields list $prefix = '_ms_charter_'; /** * Sample metabox to demonstrate each field type included */ $cmb_demo = new_cmb2_box( array( 'id' => $prefix . 'details', 'title' => __( 'Charter Details', 'cmb2' ), 'object_types' => array( 'charter' ), // Show only on charter post type ) );
49. Add the fields Add the fields $cmb_demo->add_field( array( 'name' => __( 'Length of Sail', 'cmb2' ), 'id' => $prefix . 'length', 'type' => 'text', ) ); $cmb_demo->add_field( array( 'name' => __( 'Related Charters', 'cmb2' ), 'id' => $prefix . 'related_charters', 'type' => 'multicheck', 'options' => array( // Really would be a dynamic list 'dateNight' => __( 'Date Night', 'cmb2' ), 'sunsetSail' => __( 'Sunset Sail', 'cmb2' ), 'fullDayCharter' => __( 'Full-day Charter', 'cmb2' ), ), ) ); // etc.
52. Why is this worth Why is this worth the effort? the effort?
53. 1. Consistent end-user 1. Consistent end-user (vistor) experience (vistor) experience
54. 2. Your client doesn't 2. Your client doesn't have to do extra have to do extra work to get a great work to get a great result! result!
55. Bonus: Bonus: Custom meta data is Custom meta data is sortable! sortable!
56. $args = array( 'post_type' => 'event', // querying events 'order' => 'DESC', 'orderby' => 'meta_value', // sorting by meta value 'meta_key' => '_ms_event_end_date' // meta key ); $query = new WP_Query( $args );
57. But Becky, But Becky, Y u no use Advanced Y u no use Advanced Custom Fields? Custom Fields?
58. 1. It's almost the same amount of work. It's almost the same amount of work. 2. ACF costs $$ for the most useful parts ACF costs $$ for the most useful parts (like repeaters). (like repeaters). 3. If you use their get_field() function in If you use their get_field() function in your theme and disable ACF*, you will your theme and disable ACF*, you will get a broken page. get a broken page. *or your client accidentally disables it, which results in a frantic phone call to you.
59. Like so. Like so.
60. What have we What have we learned so far? learned so far?
61. Plugins solve basic Plugins solve basic issues, like image issues, like image handling and lack of handling and lack of coding skills coding skills
62. Custom Post Types Custom Post Types and Custom Meta and Custom Meta Data solve larger site Data solve larger site content issues. content issues.
63. Any questions so Any questions so far? far?
64. Problem #4: Problem #4: White text on a light White text on a light background. background.
66. Solution Solution
67. Custom meta color picker
68. Problem #5: Problem #5: They're still on WP 3.9 They're still on WP 3.9
69. Solution Solution
70. Move them to great Move them to great hosting! hosting!
71. If you can't convince If you can't convince them... them...
72. Use a few performance / Use a few performance / security plugins security plugins - optimization - caching - security and caching Plus - automatic backups autoptimize W3 Total Cache Wordfence Updraft
73. ...and last but not ...and last but not least... least...
74. Some good ol' Some good ol' fashioned training fashioned training videos videos
75. videousermanuals.com videousermanuals.com
76. Quick Recap Quick Recap
77. Add plugins to avoid breakage Add plugins to avoid breakage Use quality hosting to auto- Use quality hosting to auto- maintain maintain Add custom content with CPTs Add custom content with CPTs and CMBs and CMBs Use easy in-dashboard training Use easy in-dashboard training videos videos
78. Thank you! Thank you! @thebeckyhamm @thebeckyhamm