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
   

   View Slide

2. View Slide

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
   

   View Slide

4. AUTHORS NEED TO
   BUILD INTERESTING
   PAGES THEMSELVES
   ON A DAILY BASIS
   

   View Slide

5. EXAMPLE: BLOCKQUOTE
   

   View Slide

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
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. HOW DO WE DO IT?
    

    View Slide

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
    

    View Slide

15. BUT EVERYBODY 

    HATES SHORTCODES!
    

    View Slide

16. • Terrible user experience
    • Users still have to write code
    • No discoverability
    • Poor documentation
    • Often don’t have previews
    WHY ARE SHORTCODES BAD?
    

    View Slide

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
    

    View Slide

18. SHORTCAKE
    =
    SHORTCODES
    +
    MCE VIEWS
    +
    INTERFACE
    

    View Slide

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
    

    View Slide

20. EXAMPLES FROM
    FUSION.NET
    

    View Slide

21. GALLERY
    

    View Slide

22. IMAGE COMPARISON
    

    View Slide

23. EMBEDDED PDF
    

    View Slide

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
    

    View Slide

25. SHORTCAKE MAKES
    USING SHORTCODES A
    PIECE OF CAKE!
    

    View Slide

26. BUT ITS NOT REALLY
    ABOUT SHORTCODES
    

    View Slide

27. IF A USER EVER 

    SEES A SHORTCODE, 

    THEN WE’VE FAILED
    

    View Slide

28. SHORTCAKE MAKES IT
    EASY TO ADD COMPLEX
    BLOCKS OF CONTENT
    

    View Slide