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

Customizing the WordPress Admin Without Code

Customizing the WordPress Admin Without Code

This session will teach you how to use the power of the WordPress Administration interface all without digging into code.

Suzette Franck

July 26, 2014
Tweet

More Decks by Suzette Franck

Other Decks in Technology

Transcript

  1. WordPress Wizardry Without Code:
    Customizing the Admin
    Suzette Franck
    WordPress Evangelist,
    (mt) Media Temple
    2014 Milwaukee WordCamp
    Saturday, July 26, 2014 #wcmke @mt_Suzette
    Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple

    View full-size slide

  2. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Suzette Franck with a “ck”
    Twitter:
    @mt_Suzette
    ★WordPress Evangelist @ (mt) Media Temple
    ★Using WordPress since version 2.7 in 2008
    ★20 years of web development experience
    ★Created 200+ WordPress custom themes
    ★Spoke at 20 WordCamps since 2011
    ★WordPress Podcast WPUnicornProject.com
    https://www.youtube.com/user/mediatemple
    ★Reg. Contributor on WPwatercooler.com
    ★Blogs at: suzettefranck.com
    ★Slides: speakerdeck.com/suzettefranck

    View full-size slide

  3. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    ★Admin User Experience Matters!
    ★Make it easier for your client and you
    ★Eight plugins for streamlining experience
    What We Will Cover

    View full-size slide

  4. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin User
    Experience

    View full-size slide

  5. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Design Experience
    ★Don’t Let user experience defined by default
    ★Add an extra touch to completed projects
    ★Show you really care about the project
    ★Thoughtfulness counts
    ★Make it easier for clients to update their site

    View full-size slide

  6. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Codepress Admin
    Columns
    Version 2.2
    Codepress

    View full-size slide

  7. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Codepress Admin Columns
    ★Show/hide default admin columns
    ★Posts, Pages, Media, Users, Comments, CPTs
    ★Many relevant columns are hidden
    ★Add icon for featured images
    ★Show Post ID, image dimensions, etc.
    ★No code necessary

    View full-size slide

  8. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin Columns (Posts)
    Settings > Admin Columns > Posts

    View full-size slide

  9. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin Columns (Posts)

    View full-size slide

  10. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Posts (Before)

    View full-size slide

  11. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Posts (After)

    View full-size slide

  12. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin Columns (Posts)
    Settings > Admin Columns > Media Library

    View full-size slide

  13. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Media Library (Before)

    View full-size slide

  14. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Media Library (After)

    View full-size slide

  15. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    My Page Order
    Version 3.3.2
    Andrew Charlton

    View full-size slide

  16. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    My Page Order
    ★Drag and drop page and subpage order
    ★Default is alphabetical by name
    ★Put pages in order that makes sense

    View full-size slide

  17. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin Columns (Posts)
    Pages > My Page Order

    View full-size slide

  18. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    My Page Order (Pages)

    View full-size slide

  19. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    All in One Favicon
    Version 4.3
    Arne Franken

    View full-size slide

  20. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    What are Favicons

    View full-size slide

  21. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    All in one Favicon
    ★Favicons show at 16x16 pixels
    ★Show when page is bookmarked
    ★Show in address bar or tab
    ★Upload any image (.png. gif, ico )
    ★Different icons for admin and front-end
    ★Branding for you and client

    View full-size slide

  22. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    All In One Favicon
    Settings > All in one Favicon

    View full-size slide

  23. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Custom Login Logo
    Version 1.0.2
    Dreams Online Themes

    View full-size slide

  24. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Custom Login Logo
    ★Upload your own logo for login screen
    ★Branding for you or your client
    ★Nice touch, polishing
    ★Easiest to use, upload from settings
    ★No required height or width

    View full-size slide

  25. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Custom Login Logo
    Settings > Custom Login Logo

    View full-size slide

  26. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Custom Login Logo

    View full-size slide

  27. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin Menu Editor
    Version 1.3.2
    Janis Elsts

    View full-size slide

  28. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin Menu Editor
    ★Hide menu items that are not relevant
    ★Drag and drop order
    ★Add separators to group content
    ★Move sub items to upper levels

    View full-size slide

  29. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin Menu Editor
    Settings > Imsanity

    View full-size slide

  30. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Admin Menu Editor
    Settings > Menu Editor

    View full-size slide

  31. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Imsanity
    Version 2.2.6
    Jason Hinkle

    View full-size slide

  32. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Imsanity
    ★Limit size of uploaded pictures
    ★Easier for clients to use
    ★Can resize older images
    ★Keep your big image files elsewhere
    ★Helps site to run faster
    ★Effortless and automatic
    ★No change to workflow

    View full-size slide

  33. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Imsanity
    Settings > Imsanity

    View full-size slide

  34. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Imsanity
    Settings > Imsanity

    View full-size slide

  35. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Imsanity (Media Library)

    View full-size slide

  36. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    WP Help
    Version 1.3
    Mark Jaquith

    View full-size slide

  37. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    WP Help
    ★Create documentation in WordPress Admin
    ★Copy documentation from other sites
    ★Easy help document management
    ★Works like pages (WYSIWYG)
    ★Can be hierarchal
    ★Embed pictures, video, and other media

    View full-size slide

  38. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    WP Help
    Publishing Help

    View full-size slide

  39. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    WP Help Settings
    Publishing Help > Settings

    View full-size slide

  40. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    WP Help Manage
    Publishing Help > Manage

    View full-size slide

  41. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    WP Help Editing

    View full-size slide

  42. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    WP Help Example

    View full-size slide

  43. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    TinyMCE Advanced
    Version 4.0.2
    Andrew Ozz

    View full-size slide

  44. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    TinyMCE Advanced
    ★Remove/Add buttons to editor
    ★Add controls for table editing
    ★Enable an editor file menu
    ★Customize lists and links easily
    ★Changes Visual Editor only

    View full-size slide

  45. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    TinyMCE Advanced
    Settings > Tiny MCE Advanced

    View full-size slide

  46. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    TinyMCE Editor

    View full-size slide

  47. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    In Summary

    View full-size slide

  48. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2014 (mt) Media Temple
    Things to Remember
    ★Always set a favicon and logo for the admin
    ★Add user-specific documentation with WP Help
    ★Use Admin Menu Editor to hide menu items
    ★Save clients from themselves
    ★Plugins code so you don’t have to, use them!
    ★Have fun and learn!

    View full-size slide

  49. Questions?
    Suzette Franck
    [email protected]
    https://speakerdeck.com/suzettefranck
    HAVE FUN AND LEARN!
    @mt_Suzette
    Follow Me On

    View full-size slide