While the Quick Edit box is a great tool that WordPress users appreciate, customizing it is a bit tricky in current versions of WordPress. While we could easily add data to each individual item in sections, such as the post editor, for our new custom post type, the Quick Edit section requires more work to add custom fields. The root of the issue stems from the fact that there is really only a single instance of the Quick Edit section that gets rendered as part of the edit page. That section is hidden at first, then appears, and moves to the correct position when a user clicks on the Quick Edit link. With this in mind, we cannot assign proper values to custom fields in the Quick Edit box and, therefore, need to store hidden information as each item gets listed to be able to update each field appropriately based on which item is being edited.

The first section of our recipe code starts off by rendering a text input field and two drop-down lists within the Quick Edit section. You will notice that we do not set the value of the text field or set options to be selected in the select lists. Another interesting point with this callback is that it sends us the same list of columns that we used in the Displaying additional columns in the custom post list page recipe. This means that if we wanted to add fields other than the ones we have added to the post table, we would still have to place these field names in the list of columns and then use some tricks to hide them from the table.

Once these extra fields are in place, we will add the code to the admin page footer of the book review editor to create a Javascript function that we will call when it is time to update our new custom fields in the Quick Edit section. The function receives an array of data, then locates the custom fields in the page using the document.getElementById function, and updates their values based on the incoming data array.

The next block of code we added creates a new Quick Edit link to replace the original one for each book review item. The new link not only enables users to display the Quick Edit section, but also embeds values for each item within the onclick Javascript code along with a call to the function that we added to the footer so that a new set of values is assigned to each field when the user decides to quickly edit a book review.

Finally, we store data from our custom fields when the user clicks on the Update button. Interestingly, we do this by registering a second callback for the save_post action. This means that both of our functions will be called when posts are saved. However, this second saving function checks for a number of conditions to be true before actually saving values, and the names of the fields that it saves are different than the save function we put in place for the post editor.