Making shortcodes a piece of cake

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

Transcript

1. MAKING SHORTCODES A PIECE OF CAKE Manage complex page elements in WordPress with Shortcake https://github.com/fusioneng/Shortcake
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
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