1 of 33

Providing a great editing

experience with WordPress

and Shortcake

Stanislav Khromov

Aftonbladet

2 of 33

About

Stanislav Khromov�WordPress Developer at Aftonbladet

@khromov

http://snippets.khromov.se

3 of 33

*

4 of 33

Schibsted Media Group

*

5 of 33

*

6 of 33

*

7 of 33

8 of 33

9 of 33

This presentation

  • Site building vs. Content creation
  • What do we want in a good content creation interface?
  • What does WordPress give us out of the box?
  • What is Shortcake?
  • Integrating Shortcake
  • Resources

10 of 33

Site building

  • Site building is about setting up the structure of a site
  • Complicated layout options
  • Requires maximum flexibility
  • Previews and perfect expectations not required

11 of 33

Site builders

12 of 33

Site building - problems

  • Complicated!
  • Too many option (violates KISS principle)
  • Steep learning curve
  • Most are aimed at developers or site builders, not end users.

13 of 33

14 of 33

Content creation

  • Content creation is about producing content for visitors to enjoy.
  • Challenge: Content is not limited to text and images.
    • Slideshows
    • Interactive graphics
    • External embeds (Video, live streaming)
    • Site elements (Headings, Anfang, info boxes)

15 of 33

Content creation - what we want

  • The “Medium” experience - editing at your fingertips
  • No complicated layouts options
  • Distraction-free
  • Seamless and predictable

16 of 33

17 of 33

Content creation Tools

  • Distraction-free writing mode

18 of 33

Content creation - problems

  • Not a big ecosystem (yet).
  • Difficult to integrate seamlessly and reliably.
  • Creating a simple interface is hard.

19 of 33

WordPress

20 of 33

WordPress - text formats

21 of 33

WordPress - shortcodes

22 of 33

Shortcake - A UI for shortcodes

  • Standardized way to add UI to shortcodes
  • Puts shortcode previews directly into the WYSIWYG editor.
  • Built on backbone.js
  • Bundles its own field suite
  • Proposed for inclusion in a future version of WordPress.

23 of 33

WordPress

+

Shortcake

​

​

​

​

​

Demo

24 of 33

Integrating an existing shortcode with Shortcake

Shortcode example:

[lrf_media image_id="12345" display_type="inline_left" caption="Caption"]

25 of 33

Integrating an existing shortcode with Shortcake

Shortcode example:

[lrf_media image_id="12345" display_type="inline_left" caption="Caption"]

26 of 33

Integrating an existing shortcode with Shortcake

  • Register the shortcode base with Shortcake
  • Specify fields and tie them to attributes�(Available field types: text, checkbox, textarea, radio, select, email, url, number, date, attachment, color, post_select)
  • Lean back and relax!

27 of 33

28 of 33

Aftonbladet Long Reads

  • Challenge: Display a wide variety of content.
  • Currently being implemented via Shortcake.
  • Demo: http://fukushima.aftonbladet.se/

​

*

29 of 33

Site Building

Content Creation

30 of 33

In closing

  • Site building and content creation target different end users of the sites you build
  • WordPress has a mature community of site builders, and a nascent community of content creation tools.

31 of 33

Resources

32 of 33

Questions?

33 of 33

About

Stanislav Khromov�WordPress Developer at Aftonbladet

@khromov

http://snippets.khromov.se