Travis Hensgen: Introducing MasterPress

MasterPress is a commercial plugin for WordPress released in January 2013, that I have been building as a side-project for the past 2 years.

After a bit of background information about how the project came to be, you’ll see a demo build for a fictional restaurant website showing how MasterPress can quickly take a fresh installation of WordPress through to a highly customised dashboard containing multiple custom post types, taxonomies and custom fields.

We’ll then briefly explore how MasterPress lets you easily query your post types and bring custom field data into your WordPress themes, demonstrating its powerful and concise object-oriented API.

Transcript

1. Introducing
   MasterPress
   Travis Hensgen
   WordCamp Melbourne 2013
   1
   

   View Slide

2. Introducing MasterPress - WordCamp Melbourne 2013
   Project Background
   

   View Slide

3. Introducing MasterPress - WordCamp Melbourne 2013
   2009: Hello WordPress
   Started with WordPress in 2009
   WordPress before 3.0 was quite limited
   No Custom Post Types!
   I needed better custom fields, and some way to
   tie those to types of posts or templates
   Flutter by Freshout: “Custom Write Panels” and
   custom field types
   Then Flutter faded away, but it was forked to
   create another plugin called Magic Fields
   

   View Slide

4. Introducing MasterPress - WordCamp Melbourne 2013
   2010: Magic Fields Mods
   Late 2010:
   Contributed User
   Interface tidy ups
   Just CSS, JavaScript,
   and PHP patches
   I was by no means
   a “plugin
   developer”
   Mods were okay, but I
   would have liked
   something better...
   

   View Slide

5. Introducing MasterPress - WordCamp Melbourne 2013
   2010: Meanwhile... a better API
   Was also tinkering away with an object-oriented
   API wrapper around Magic Fields.
   Access to fields in Magic Fields wasn’t
   particularly intuitive:
   “Uh wait, what does that second 1 do again?”
   This work would come to be a major part of
   MasterPress
   Probably the most ambitious part
   
   

   View Slide

6. Introducing MasterPress - WordCamp Melbourne 2013
   Time to build the dream plugin
   UI ideas from Magic Fields
   Object-Oriented API
   WordPress 3.2 (July
   2011) and PHP 5.2 FTW!
   Custom Post Type and
   Taxonomy UI, rather than
   “Write Panels”
   A premium plugin with a
   whole lot of polish!
   Pro Tip: This book was a
   far better learning tool ...
   http://dramatica.com/analysis/field-of-dreams
   http://www.amazon.com/Professional-WordPress-Plugin-
   Development-Williams/dp/0470916222/
   

   View Slide

7. Introducing MasterPress - WordCamp Melbourne 2013
   Pffffft. No worries.
   I’ve got heaps of time!
   

   View Slide

8. Introducing MasterPress - WordCamp Melbourne 2013
   2011: Design...
   Spent a lot of time in Photoshop
   Needed to design:
   Over 20 Custom Field Types
   The custom field post editing experience
   About a week trying and trying again
   Admin Screens (over 15 of them)
   implements  Iterator
   

   View Slide

9. Introducing MasterPress - WordCamp Melbourne 2013
   Design: Field Types - Image UI States
   Drop State
   Empty
   

   View Slide

10. Introducing MasterPress - WordCamp Melbourne 2013
    Design: Field Types - Image UI States
    Populated
    Uploading
    

    View Slide

11. Introducing MasterPress - WordCamp Melbourne 2013
    Design: Collapsed Field Set UI (Magic Fields)
    

    View Slide

12. Introducing MasterPress - WordCamp Melbourne 2013
    Design: Collapsed Field Set UI (MasterPress - Photoshop Concept)
    

    View Slide

13. Introducing MasterPress - WordCamp Melbourne 2013
    Design: Collapsed Field Set UI (MasterPress 1.0)
    

    View Slide

14. Introducing MasterPress - WordCamp Melbourne 2013
    Making the solution seem so
    completely inevitable and obvious,
    so uncontrived and natural -
    it's so hard!
    Jonathon Ive
    

    View Slide

15. Introducing MasterPress - WordCamp Melbourne 2013
    2011: Development
    Admin Screens
    Including a home-grown MVC plugin-UI
    framework
    15+ Views, 10+ Models, 15+ Controllers
    Field Types - 20+, each comprising:
    Their own PHP API
    UI for field options + UI for post editing
    jQueryUI-based widget class for behaviour
    

    View Slide

16. Introducing MasterPress - WordCamp Melbourne 2013
    2011: Development
    A whole lot of: git  commit
    means a lot of commitment
    

    View Slide

17. Introducing MasterPress - WordCamp Melbourne 2013
    2011: Development
    A lot of late
    nights
    But... if you love
    what you’re
    doing, it really
    doesn’t feel like
    work
    Plus...
    I just learnt so
    much during http://himynameisjohnn.tumblr.com/post/18607151553
    http://johnfpetraglia.authorsxpress.com/2012/08/
    

    View Slide

18. Introducing MasterPress - WordCamp Melbourne 2013
    2011: Success!
    At the end of
    2011, I
    thought I was
    just about
    there
    I had a great
    plug-in built,
    and was
    actively using
    it in client
    projects
    http://seriouslove.wordpress.com/2010/05/19/cheers/
    

    View Slide

19. Introducing MasterPress - WordCamp Melbourne 2013
    Lucky too, because
    even more time had opened up!
    

    View Slide

20. Introducing MasterPress - WordCamp Melbourne 2013
    2012: Products... argh
    Building things for others is hard
    Website and marketing materials
    Crazy amounts of documentation...
    960 functions, about 50 long-form posts...
    Terms and conditions
    Legal Help + GPL = Tricky
    eCommerce, Merchant Accounts, and a
    licencing engine... Woo... Hoo...
    

    View Slide

21. Introducing MasterPress - WordCamp Melbourne 2013
    2013: Made It! For Realz!
    

    View Slide

22. Introducing MasterPress - WordCamp Melbourne 2013
    My Real Job
    2011 - 2013 = A loooong build time
    But also threaded around development work that
    earnt money
    Thankfully, most of that work has made use of
    MasterPress.
    So its development has been driven by real needs
    in those projects.
    

    View Slide

23. Introducing MasterPress - WordCamp Melbourne 2013
    Projects: World Economic Forum
    Forum:Blog
    http://forumblog.org
    A more traditional use
    of WordPress, but still
    with a few MasterPress
    enhancements.
    

    View Slide

24. Introducing MasterPress - WordCamp Melbourne 2013
    Projects: World Economic Forum
    Reports
    http://
    reports.weforum.org
    Long form reports.
    A much more advanced
    use of WordPress, with
    custom post types, custom
    taxonomies, and multisite.
    

    View Slide

25. Introducing MasterPress - WordCamp Melbourne 2013
    Good developers
    eat their own...
    

    View Slide

26. Introducing MasterPress - WordCamp Melbourne 2013
    Projects: MasterPress Website
    The MasterPress site itself is the most advanced
    project I’ve built with MasterPress.
    Post Types: Features, Pages, Field Types,
    Documentation, Classes, Methods, Releases,
    Prereleases, Products, Forums, Topics ...
    Taxonomies: Categories, Field Type
    Categories, Interfaces, Licence Types, Method
    Categories, Packages, Licences, Post Tags, ...
    Custom Fields: ... loads!
    

    View Slide

27. Introducing MasterPress - WordCamp Melbourne 2013
    Hands-on
    Creating a restaurant site
    

    View Slide

28. Introducing MasterPress - WordCamp Melbourne 2013
    Content Management setup:
    Post Types:
    Menu (list of food and drink items)
    Dish
    Drink
    Taxonomies:
    Menu Type
    Drink Type
    Dietary Notes
    

    View Slide

29. Introducing MasterPress - WordCamp Melbourne 2013
    Custom Field Sets:
    Dish:
    Details:
    Description
    (Editor)
    Photo (Image)
    Price (Number)
    Dietary Notes
    (Taxonomy
    Term)
    Menu:
    Details:
    Description
    (Editor)
    Items
    (Related Posts)
    

    View Slide

30. Introducing MasterPress - WordCamp Melbourne 2013
    Custom Field Sets:
    Dietary Notes
    (Taxonomy):
    Details:
    Abbreviation
    

    View Slide

31. Introducing MasterPress - WordCamp Melbourne 2013
    Demo
    Creating our Masterplan
    http://www.flickr.com/photos/ultrakml/
    Featuring photos by:
    Under Creative Commons Attribution-ShareAlike
    http://creativecommons.org/licenses/by-sa/2.0/deed.en
    Under Creative Commons Attribution-NonCommercial-ShareAlike
    http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en
    http://www.flickr.com/photos/diekatrin/
    Katrin Morenz
    Katherine Lim
    

    View Slide

32. Introducing MasterPress - WordCamp Melbourne 2013
    Theme API
    Reimagining the WordPress API
    

    View Slide

33. Introducing MasterPress - WordCamp Melbourne 2013
    WordPress API: first thoughts
    the_api()
    I didn’t really ...
    get_the_api()
    

    View Slide

34. Introducing MasterPress - WordCamp Melbourne 2013
    WordPress API: observations
    Consistency Problems:
    Is it get_the_something($id),
    OR the_something($id,  $get_flag=TRUE)
    OR is there no way at all to “get”
    Lack of context, and uncertain global context:
    get_post_meta(  $post_id  )
    need to use IDs a lot
    wp_reset_query()
    

    View Slide

35. Introducing MasterPress - WordCamp Melbourne 2013
    To be fair:
    Global context is part of how WordPress works,
    allowing many sites to be built without
    developers.
    The API powers thousands of themes being
    created, distributed, and sold every day
    It is well documented and evolving every day
    WordPress core team...
    I still love you, please
    don’t hunt me down...
    http://simpsons.wikia.com/wiki/File:Simpsons_angry_mob.png
    

    View Slide

36. Introducing MasterPress - WordCamp Melbourne 2013
    Theme API: Background
    I didn’t “set out” to build this from the get-go
    Started out as a way to access custom field data
    in Magic Fields
    Involved building wrapper objects around
    standard WordPress objects like posts, for
    example
    PHP 5 magic methods used to allow highly
    intuitive chained access to field sets and
    fields
    

    View Slide

37. Introducing MasterPress - WordCamp Melbourne 2013
    Theme API: Background
    Liked using objects so much, that the scope of
    this initial work expanded:
    wrapper classes around Posts, Terms, Users,
    Sites (multi-site), Post Types, Taxonomies,
    User Roles, Images, Files, and even HTTP
    requests.
    Also includes powerful querying capabilities, with
    helpful collection classes
    Everything is accessed via a single instance
    variable
    

    View Slide

38. Introducing MasterPress - WordCamp Melbourne 2013
    Theme API: Background
    Clever use of PHP5’s __toString()  to auto-
    convert echoed objects to values useful in the
    context of theme development (e.g. images =
    )
    Design heavily inspired by jQuery
    Some interesting approaches to error
    handling and “silent failure”
    Allows powerful chaining capabilities
    A lot of utilities to solve common theming needs
    

    View Slide

39. Introducing MasterPress - WordCamp Melbourne 2013
    Demo
    Building theme code for our
    restaurant site
    http://www.flickr.com/photos/ultrakml/
    Featuring photos by:
    Under Creative Commons Attribution-ShareAlike
    http://creativecommons.org/licenses/by-sa/2.0/deed.en
    Under Creative Commons Attribution-NonCommercial-ShareAlike
    http://creativecommons.org/licenses/by-nc-sa/2.0/deed.en
    http://www.flickr.com/photos/diekatrin/
    Katrin Morenz
    Katherine Lim
    

    View Slide

40. Introducing MasterPress - WordCamp Melbourne 2013
    Questions?
    

    View Slide

41. Thanks!
    More Information (features, pricing):
    http://masterpressplugin.com
    Theme API:
    http://masterpressplugin.com/docs/developer
    Follow me (Travis Hensgen) on Twitter:
    @_traversal
    (note the leading underscore)
    

    View Slide