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
220
WordPress REST API - Writing Custom Endpoints
mattheu
0
89
Intro to I18N in code
mattheu
0
79
Tips for writing secure code in WordPress
mattheu
1
130
Other Decks in Programming
See All in Programming
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
効率的な開発手段として VRTを活用する
ishkawa
1
180
NEWT Backend Evolution
xpromx
1
160
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.8k
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
540
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
650
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
370
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Statistics for Hackers
jakevdp
799
220k
Speed Design
sergeychernyshev
32
1k
How to Ace a Technical Interview
jacobian
278
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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