Making shortcodes a piece of cake

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