Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Travis Hensgen: Introducing MasterPress

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.

WP Australia

April 28, 2013
Tweet

More Decks by WP Australia

Other Decks in Technology

Transcript

  1. Introducing
    MasterPress
    Travis Hensgen
    WordCamp Melbourne 2013
    1

    View full-size slide

  2. Introducing MasterPress - WordCamp Melbourne 2013
    Project Background

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  40. Introducing MasterPress - WordCamp Melbourne 2013
    Questions?

    View full-size 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 full-size slide