Edit WordPress Posts and Postmeta in the Customizer

WordPress users were thrilled when widgets were added to the customizer in the 3.9 release. A better UI and real-time previews revived widgets and once again made them a joy to use. The experience was so beneficial to users that the project continues to plough ahead with customizer enhancements. WordPress 4.0 introduced contextual controls and a new Panels API for segmenting controls into groups. It also added a wider array of controls and parameters that make it possible for the customizer to be used beyond themes and widgets.

Just when you thought you’d seen it all, core contributor Weston Ruter and the folks at X-Team have added post editing to the customizer as an experimental plugin on WordPress.org. Customize Posts brings the power of live frontend previews to WordPress posts and postmeta with the tagline: “Stop editing your posts/postmeta blind!”

Once installed, you’ll find a new “Customize” menu item on pages and posts, which will launch it into the customizer for editing.

customize

Customize Posts enables you to edit both post content and postmeta, including the following:

  • Post title
  • Post content
  • Slug
  • Author
  • Published time/date
  • Excerpt
  • Status
  • Comments (Open/Closed)
  • Parent and Menu Order
  • Page Template
  • Featured Image
  • Any additional postmeta (custom metaboxes would have to be opt-in)

This would only be possible with the new Panels API, since it adds a long list of controls, as you can see in the screenshot below:

customize-posts

Version 0.2.0 makes it possible to add, modify and delete postmeta and all of these action are fully previewable. The plugin also grants customize capability to authors and editors who wouldn’t normally have access.

On themes like Twenty Fourteen, where you have featured images that appear on single posts, the plugin adds a convenient way to live preview various images without having to go back and forth between the admin and the frontend. If you have an extensive array of postmeta that lends itself well to live previews, I can see how this plugin could be very useful.

One thing that is particularly disconcerting is that once you are editing the post in the customizer, it appears that you cannot truly save the content without publishing it. The big blue “Save & Publish” button is your only option.

In the current absence of a full-featured frontend editor for WordPress, the experience of using Customize Posts for editing post content is a somewhat clunky alternative with its narrow editing pane. The slight lag between writing and the update in the preview amounts to a significant drawback for daily use. However, it’s an interesting proof of concept and definitely worth exploring. Ruter readily admits that the plugin is, for all intents and purposes, an experiment:

I’m happy if Customize Posts develops in parallel to Front-end Editing. I was just hoping it might be a useful reference for how to leverage the Customizer to preview changes to post/postmeta. I’ll continue hacking on my Customizer prototype to see what comes out of it.

The development team notes on the plugin’s description that Customize Posts is not to be confused with 10up’s Post Customizer, a plugin in the same vein that addresses a different problem. 10up and X-Team are in communication about collaborating between the two plugins wherever possible in addition to interfacing with other contributors on existing core tickets for the issues addressed in these plugins.

If a frontend editor does wind up landing in core in the future, do you think that the concept shown here for editing posts and postmeta could be a compliment to the experience?

17

17 responses to “Edit WordPress Posts and Postmeta in the Customizer”

  1. Thanks, Sarah!

    This would only be possible with the new Panels API

    A correction: the plugin actually doesn’t use the Panels API. It just registers one “Posts” section and adds controls to it. Using panels may be a better approach when editing multiple posts concurrently.

    The plugin also grants customize capability to authors and editors who wouldn’t normally have access.

    This new customize capability was introduced in 4.0 (#28605).

    On themes like Twenty Fourteen, where you have featured images that appear on single posts, the plugin adds a convenient way to live preview various images without having to go back and forth between the admin and the frontend.

    Actually, and I only realized this relatively recently myself, but did you know that changing the featured image actually makes the change live even before you save the post? I found this very surprising behavior. The only way to truly preview a change to a featured image is to use something like Customize Posts.

    Likewise, something else I learned recently, did  you know that changing a page template cannot be previewed from the post editor? When you change the selected page template, the change will not show up when you preview the post (see #11049). However, in Customize Posts you can preview changes to the page template just by changing the dropdown selection, and then you can see what your page would look like with the new template after the preview refreshes.

    Most other changes to metaboxes containing data that gets saved to custom fields (postmeta) also get written when clicking the Preview button. The Customize Posts plugin provides a way to get around this, and also provides a live preview of the changes. Fixing this underlying issue of incorrectly persisting postmeta when doing a preview is captured in #20299. The current Customize Posts UI for editing postmeta is just a non-user-firendly first stab; future iterations should make it easy to add new controls to manage postmeta, just as metaboxes are added to the post editor.

    If a frontend editor does wind up landing in core in the future, do you think that the concept shown here for editing posts and postmeta could be a compliment to the experience?

    I’m collaborating with @avryl on integrating the Front-end editor with the Customizer. We have a couple issues open where we’ve been discussing ways to collaborate, along with @celloexpressions. She’s actually re-writing the Front-end editor to use the Customizer as the underlying framework for managing changes as well. So it’s not an either/or but a both/and.

    Customize all the things!

    • Thanks for the clarification and feedback, Weston! WordPress is really in a major transition now as it concerns live editing the main content of a post. Your plugin is a great experiment and it will be interesting to see where the collaboration leads. I have to admit that typing right there in the customizer and seeing it update on the page was a little bit thrilling, even if the preview was a little slow. :)

      • Thanks! Regarding the slowness, this is just due to the postMessage transport not being implemented. Adding such live-updating previews actually requires explicit opt-in by the theme or post type since it is not known how the template is going to render the bits of information. Nevertheless, there is an issue logged to support this.

  2. This is going to far with the customizer in my opinion.

    The customizer settings should be focused on theme layout and options, and this is going out of scope. It would be better to focus on the frontend editor plugin, and give users a good, easy UX with it, instead of the strange workaround.

  3. I like it when Weston Ruter puts on his lab coat and goes to town with the customizer. In this case and as I’ve seen mentioned already, editing should be done inline and not with boxes popping up around the content. With the Front-end Editor using the Customizer as a framework, I wonder if the interface will look similar to this experiment? I hope not.

    Ultimately, I’m interested to see how the Front-end Editor comes into play when previewing a post or writing a draft post. Will we be able to use it to write a post or will the editor be refrained from use until after a post/page is published?

    What will Weston think of next to use the Customizer for? Maybe order me a pizza :)

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.