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

921b21db0adbe6810cae63e616777d4a?s=47 thebeckyhamm
September 26, 2015

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

Presentation made at WordCamp Tampa 2015

921b21db0adbe6810cae63e616777d4a?s=128

thebeckyhamm

September 26, 2015
Tweet

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
  22. None
  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.
  50. None
  51. None
  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.
  65. None
  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