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
210
WordPress REST API - Writing Custom Endpoints
mattheu
0
84
Intro to I18N in code
mattheu
0
76
Tips for writing secure code in WordPress
mattheu
1
120
Other Decks in Programming
See All in Programming
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
160
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
330
Flatt Security XSS Challenge 解答・解説
flatt_security
0
590
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
410
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
260
Go の GC の不得意な部分を克服したい
taiyow
3
990
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
200
CloudflareStack でRAGに入門
asahiiwm
0
140
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.3k
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
340
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
270
HTML/CSS超絶浅い説明
yuki0329
0
160
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
460
33k
The Language of Interfaces
destraynor
155
24k
4 Signs Your Business is Dying
shpigford
182
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Automating Front-end Workflow
addyosmani
1366
200k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
112
50k
Producing Creativity
orderedlist
PRO
343
39k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
190
RailsConf 2023
tenderlove
29
960
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Raft: Consensus for Rubyists
vanstee
137
6.7k
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