Save time by adding a Quick Edit Button in WordPress Posts

One of the most useful features, especially in terms of User Experience, since WordPress 2.7 history is the Quick Edit panel. Quick Edit allows you to edit different pieces of data about a post without having to navigate your browser to the full edit page. The amount of time it helps save when editing main details of a post is a big deal. As a personal favorite feature, and generally as a popular feature of WordPress, I am going to dive into how to set up your very own Quick Edit fields. This way, your clients will have more control over their content when editing their content.

To create WordPress buttons with MaxButtons, you just need to download and install the plugin. Then, you can create a button by clicking on the MaxButtons link in your dashboard sidebar. Unfortunately, you can’t add buttons directly in the WordPress Editor, though the plugin does make it easy to insert buttons you’ve already created.

The overall process for outputting these fields is similar to what we did for our metabox. We want to display our featured checkbox, rating select field and text input controls. The classes used on our elements are the same ones that WordPress uses for their layout. You will need to experiment with them if you’re after a particular style, but using inline-edit-col-left, inline-edit-col-center and inline-edit-col-right will align your layout for you.

If you are using a plugin like W3 Total Cache, or another caching plugin, then when you add the above code to your theme, it will not show or hide based on the user. In order to make it work you need to use something called fragment caching. Rather than the above code, add the following code to your theme and you will have the edit button on your posts and pages.

The important thing you have to know about this filter is that it fires for EVERY custom column. In some official WordPress tutorials each input field is wrapped in <fieldset> element, which is incorrect. I want ALL my new fields to be wrapped in a single <fieldset> tag. Do not you think so?

If you want to create visually pleasing content, in terms of both text and image arrangement, not being able to accurately determine how your post will look when its published can involve plenty of switching back and forth between the post editor and the preview of your post. Front-end editing eliminates this as you are creating content as your visitors will see it.

If you want to change the looks of your new button then WordPress has you covered as well. Click on the block containing the button to bring out the Block options. If the options aren’t visible, click on the gear icon on the top right. Now you can simply select the style, background color as well as the text color. You can choose between a number of available colors or input your own from the custom color picker. WordPress will even warn you if your color scheme is difficult to read.