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.

073054d5848746e939c7165bc90a507b?s=128

WP Australia

April 28, 2013
Tweet

Transcript

  1. Introducing MasterPress Travis Hensgen WordCamp Melbourne 2013 1

  2. Introducing MasterPress - WordCamp Melbourne 2013 Project Background

  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
  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...
  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 <?php  echo  get('my_field',1  ,1  ,1,  14);  ?>
  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/
  7. Introducing MasterPress - WordCamp Melbourne 2013 Pffffft. No worries. I’ve

    got heaps of time!
  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
  9. Introducing MasterPress - WordCamp Melbourne 2013 Design: Field Types -

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

    Image UI States Populated Uploading
  11. Introducing MasterPress - WordCamp Melbourne 2013 Design: Collapsed Field Set

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

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

    UI (MasterPress 1.0)
  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
  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
  16. Introducing MasterPress - WordCamp Melbourne 2013 2011: Development A whole

    lot of: git  commit means a lot of commitment
  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/
  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/
  19. Introducing MasterPress - WordCamp Melbourne 2013 Lucky too, because even

    more time had opened up!
  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...
  21. Introducing MasterPress - WordCamp Melbourne 2013 2013: Made It! For

    Realz!
  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.
  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.
  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.
  25. Introducing MasterPress - WordCamp Melbourne 2013 Good developers eat their

    own...
  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!
  27. Introducing MasterPress - WordCamp Melbourne 2013 Hands-on Creating a restaurant

    site
  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
  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)
  30. Introducing MasterPress - WordCamp Melbourne 2013 Custom Field Sets: Dietary

    Notes (Taxonomy): Details: Abbreviation
  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
  32. Introducing MasterPress - WordCamp Melbourne 2013 Theme API Reimagining the

    WordPress API
  33. Introducing MasterPress - WordCamp Melbourne 2013 WordPress API: first thoughts

    the_api() I didn’t really ... get_the_api()
  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()
  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
  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
  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
  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 = <img>) 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
  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
  40. Introducing MasterPress - WordCamp Melbourne 2013 Questions?

  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)