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

Matthew Haines-Young

March 10, 2015

More Decks by Matthew Haines-Young

Other Decks in Programming


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

    in WordPress with Shortcake https://github.com/fusioneng/Shortcake
  2. • 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
  3. 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
  4. • 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
  5. • Terrible user experience • Users still have to write

    code • No discoverability • Poor documentation • Often don’t have previews WHY ARE SHORTCODES BAD?
  6. 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
  7. • 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
  8. • 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