Slide 1
Slide 1 text
MAKING SHORTCODES A
PIECE OF CAKE
Manage complex page elements
in WordPress with Shortcake
https://github.com/fusioneng/Shortcake
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
• 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
Slide 4
Slide 4 text
AUTHORS NEED TO
BUILD INTERESTING
PAGES THEMSELVES
ON A DAILY BASIS
Slide 5
Slide 5 text
EXAMPLE: BLOCKQUOTE
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
HOW DO WE DO IT?
Slide 14
Slide 14 text
• 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
Slide 15
Slide 15 text
BUT EVERYBODY
HATES SHORTCODES!
Slide 16
Slide 16 text
• Terrible user experience
• Users still have to write code
• No discoverability
• Poor documentation
• Often don’t have previews
WHY ARE SHORTCODES BAD?
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
SHORTCAKE
=
SHORTCODES
+
MCE VIEWS
+
INTERFACE
Slide 19
Slide 19 text
• 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
Slide 20
Slide 20 text
EXAMPLES FROM
FUSION.NET
Slide 21
Slide 21 text
GALLERY
Slide 22
Slide 22 text
IMAGE COMPARISON
Slide 23
Slide 23 text
EMBEDDED PDF
Slide 24
Slide 24 text
• 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
Slide 25
Slide 25 text
SHORTCAKE MAKES
USING SHORTCODES A
PIECE OF CAKE!
Slide 26
Slide 26 text
BUT ITS NOT REALLY
ABOUT SHORTCODES
Slide 27
Slide 27 text
IF A USER EVER
SEES A SHORTCODE,
THEN WE’VE FAILED
Slide 28
Slide 28 text
SHORTCAKE MAKES IT
EASY TO ADD COMPLEX
BLOCKS OF CONTENT