The goal of this WordPress plugin is to make posts creation and meta data edits faster by creating a modal window.  Before we begin, I have a glossary that will help you understand the terms that I use in this post.

  1. By post(s), I’m referring to any post type in WordPress: posts, pages, media attachments, custom post types, etc.
  2. By posts screen, I’m referring to a plural edit screen, like the Edit Posts screen, but for any post type.
  3. By edit post screen, I’m referring to a singular edit screen.
  4. By meta data or meta, I’m referring to custom fields added by using the WordPress Fields API, which can be created by hand, or by any number of plugins (Advanced Custom Fields and CMB2, just to name a couple).

1. Why WordPress Posts Creation & Meta Editing Needs Improvement

I love working in WordPress, but when it comes to post creation and editing meta data , it can be kind of clunky. Here’s what my workflow typically looks like for creating a new page:

  1. Click “Add New” ( +1 click, +1 page load)
  2. Type Title
  3. Set Page Parent (+1 click)
  4. Set Page Order (+1 click)
  5. Set Featured Image (+3 clicks, minimum)
  6. Click “Publish” (+1 click, +1 page load)

That’s 7 clicks and 2 page loads for a pretty bare-bones page. If you’re dealing with a lot of meta fields, that’ll be even more clicks. I think my record for highest number of meta fields for a post type was in the 20s.

It’s easy to get lost in the edit post screen when you’re dealing with that much information. To make matters worse, it’s rare that all of those settings will be grouped in one place. You’ll often need to move your focus from one area of the edit post screen to another, and if you forget one thing, it could be 10 posts later that you realize it.

Editing Meta Data is Even Worse

I can’t stand it when all I need to change is one piece of meta data for 10 posts, and I have to click in to each edit post screen (20 page loads, blerg) in order to make the update. Keeping your concentration is difficult even for somebody who’s used to working in WordPress.

2. How we Can Make WordPress Posts Creation Faster

Here’s what I think a better posts creation workflow could look like:

  1. The user stays on the edit posts screen after clicking “Add New.” (+1 click, unless we handle this with a keyboard shortcut)
  2. A modal window pops up, where the user can tab through the title, parent, menu order, featured image, and any other meta data associated with the post type.* (no clicks necessary)
  3. After entering data, the user has a choice of four actions: “Edit,” “Add Another,” or “Save & Exit.” The user can also cancel entry at any time. After choosing any of the other actions, the data is sent via AJAX to create the new post, and then:
    1. If “Edit” is clicked, the edit post screen appears, with the entered data already set.
    2. If “Add Another” is clicked, the title and featured image are cleared out, but all other meta remains in place, in case you need to set another post to the same parent, etc.
    3. If “Save & Exit” is clicked, the new post is created and the modal disappears. Reactivating it without a page reload will have the same effect as “Add Another.”

*I believe it’d be possible to determine what fields to output here by doing two checks: 1) check the “supports” argument of the post type registration for fields like page parent, template, menu order, excerpt and featured image and 2) when using a plugin like CMB2, we should be able to check the meta boxes associated with any given post type.

Creating this modal will also make it possible to do inline meta edits, very similar to the Admin Columns plugin. However, while their plugin only lets you edit one piece of meta at a time, this plugin will make it possible to edit all meta data for a post from the edit posts screen. The workflow could be as simple as:

Edit Single Post

  1. Click “Edit Inline,” a new link next to “Quick Edit.”
  2. The modal window pops up, the user edits the data, hits save, and the data is again saved via AJAX.

Edit Multiple Posts

  1. Select multiple posts via the post checkbox, and select “Inline Edit” in the bulk actions dropdown. The post IDs are gathered by AJAX.
  2. The meta fields are all blank, and the title field is excluded (because the title should not be duplicated).
  3. Only meta fields that have data are updated on save.

3. Challenges

The biggest challenge has to deal with how the markup for custom meta fields is isolated on the edit post screen, and we need to get it into the modal on the edit posts screen.

The issue is that WordPress knows very little about the registered meta fields for a website. Compared to a post type, which has a ton of registration settings, meta fields only have $meta_type, $meta_key, $sanitize_callback, $auth_callback, and $args (from the register_meta function).

Long story short: It seems that there isn’t really a way to tell WordPress what kind of field the meta is (unless that’s the purpose of $meta_type; the docs are a bit unclear).

The good news is that there’s a considerable update coming down the pipe for the WordPress Fields API that looks like it’ll make it easier to abstract out the markup into other areas of the WordPress admin.

However, we can get going on this today by implementing it via the CMB2 plugin, which already has a method for outputting meta field markup wherever you need it to go.

So in object-oriented parlance, your custom post types and meta data structure is the modal, CMB2 takes the role of the controller, and the Inline Posts Manager is the view. This way, updating the plugin to integrate with other controllers like Advanced Custom Fields or even the WordPress Fields API would be much easier.

Who’s with me?

4. Nitty Gritty Details

If you’ve stayed with me this long, then you’ll probably appreciate hearing some more of the details that I didn’t cover in my high-level pass earlier.

Design / UX

For the design, all we need to worry about is the modal window. The biggest design challenge that I want to avoid is making scrolling weird. Since we can’t predict how many meta boxes any given post type will need, it’s best to design with the idea that scrolling is a given.

I think the best solution would be to copy the basic style of the Insert Media modal window. The left and right sidebars would be unnecessary, but the action buttons could stay fixed to the bottom of the modal window, so that you can scroll down through meta boxes as necessary.

Markup / Content

  1. Modal Window Layout: use the Thickbox along with classes / styles from the WordPress media modal window.
  2. Modal Window Content: run a check for the post type and populate fields on load with PHP.
  3. Modal Trigger Buttons: add links via the post_row_actions filter, and either a) hijack the “Add New” button by switching out the source with jQuery or b) add a new button next to the “Add New” button via jQuery.

Saving the Data

  1. Bind action buttons to plugin-specific JavaScript.
  2. Use AJAX to save data.
  3. Optional: Add jQuery callback to insert new row once save is successful.