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
Tweet

More Decks by Matthew Haines-Young

Other Decks in Programming

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