Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Making shortcodes a piece of cake
Search
Matthew Haines-Young
March 10, 2015
Programming
0
24k
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
Share
More Decks by Matthew Haines-Young
See All by Matthew Haines-Young
Building Sites with Gutenberg
mattheu
1
230
WordPress REST API - Writing Custom Endpoints
mattheu
0
91
Intro to I18N in code
mattheu
0
81
Tips for writing secure code in WordPress
mattheu
1
130
Other Decks in Programming
See All in Programming
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
30k
オープンソースソフトウェアへの解像度🔬
utam0k
13
2.6k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
220
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
130
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
820
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
What's new in Spring Modulith?
olivergierke
1
140
Devvox Belgium - Agentic AI Patterns
kdubois
1
110
Featured
See All Featured
KATA
mclloyd
32
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Facilitating Awesome Meetings
lara
56
6.6k
Practical Orchestrator
shlominoach
190
11k
Become a Pro
speakerdeck
PRO
29
5.5k
Speed Design
sergeychernyshev
32
1.2k
Documentation Writing (for coders)
carmenintech
75
5k
Music & Morning Musume
bryan
46
6.8k
Fireside Chat
paigeccino
40
3.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
MAKING SHORTCODES A PIECE OF CAKE Manage complex page elements
in WordPress with Shortcake https://github.com/fusioneng/Shortcake
None
• 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
AUTHORS NEED TO BUILD INTERESTING PAGES THEMSELVES ON A DAILY
BASIS
EXAMPLE: BLOCKQUOTE
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
None
None
None
None
None
None
HOW DO WE DO IT?
• 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
BUT EVERYBODY HATES SHORTCODES!
• Terrible user experience • Users still have to write
code • No discoverability • Poor documentation • Often don’t have previews WHY ARE SHORTCODES BAD?
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
SHORTCAKE = SHORTCODES + MCE VIEWS + INTERFACE
• 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
EXAMPLES FROM FUSION.NET
GALLERY
IMAGE COMPARISON
EMBEDDED PDF
• 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
SHORTCAKE MAKES USING SHORTCODES A PIECE OF CAKE!
BUT ITS NOT REALLY ABOUT SHORTCODES
IF A USER EVER SEES A SHORTCODE, THEN
WE’VE FAILED
SHORTCAKE MAKES IT EASY TO ADD COMPLEX BLOCKS OF CONTENT