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

Making shortcodes a piece of cake

Making shortcodes a piece of cake

How we manage complex page elements
in WordPress with Shortcake on Fusion.net

B17c1f19d80bf8f61c3f14962153f959?s=128

Matthew Haines-Young

March 10, 2015
Tweet

Transcript

  1. MAKING SHORTCODES A PIECE OF CAKE Manage complex page elements

    in WordPress with Shortcake https://github.com/fusioneng/Shortcake
  2. None
  3. • US-based, multi-platform media company • Expanding their web presence

    • Migrated Fusion.net to WordPress (end 2014) • Launched a big redesign (early 2015) • Want to publish great content on the web
  4. AUTHORS NEED TO BUILD INTERESTING PAGES THEMSELVES ON A DAILY

    BASIS
  5. EXAMPLE: BLOCKQUOTE

  6. GOALS • Simple and easy to use tool • No

    code • WYSIWYG • Flexible, reusable modules • Simple for developers to add new modules • Make use of existing tools
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. HOW DO WE DO IT?

  14. • Available in WordPress since 2.5 • WordPress uses them

    for galleries, 
 audio and video • Simple code: [name attr="value"] • Converted to HTML when output SHORTCODES
  15. BUT EVERYBODY 
 HATES SHORTCODES!

  16. • Terrible user experience • Users still have to write

    code • No discoverability • Poor documentation • Often don’t have previews WHY ARE SHORTCODES BAD?
  17. SHORTCODE PREVIEWS • It is possible to get previews in

    the editor • Easier now than it once was • MCE Views • Simple JavaScript API to register a preview for a shortcode
  18. SHORTCAKE = SHORTCODES + MCE VIEWS + INTERFACE

  19. • Mostly JavaScript - Backbone.js • Modules - Grunt +

    Browserify • Jasmine for unit testing (Grunt, TravisCI) • PHP to generate preview - output exactly as 
 on the front end TECHNICAL INFO
  20. EXAMPLES FROM FUSION.NET

  21. GALLERY

  22. IMAGE COMPARISON

  23. EMBEDDED PDF

  24. • Interactives. JS apps & games • Liveblogs (WordPress VIP

    Liveblogs) • Social Streams. Curated grid of content from Twitter, Instagram etc • Embedding third party content. (Quiz from Playbuzz) OTHER EXAMPLES
  25. SHORTCAKE MAKES USING SHORTCODES A PIECE OF CAKE!

  26. BUT ITS NOT REALLY ABOUT SHORTCODES

  27. IF A USER EVER 
 SEES A SHORTCODE, 
 THEN

    WE’VE FAILED
  28. SHORTCAKE MAKES IT EASY TO ADD COMPLEX BLOCKS OF CONTENT