Hook into admin post list page

by

From your screenshot and explanation I guess I understand what you’re trying to accomplish.

Concept

Point is, that the question is more a X-Y Problem. What I’d recommend is changing the idea and use as much of what is available per default: The Quick Edit box.

Quick Edit

The default hook to extend quick edit is quick_edit_custom_box. It has two arguments: The $colName and the $postType. Use that to extend the quick edit box. An example including the needed Javascript for the AJAX save action an be found in that answer, or this answer as well in that answer by Frank.

Javascript

The global inlineEditPost JavaScript object holds all the actions you need. Just console.log( inlineEditPost ); in your console on a post admin list screen to see the list of available functions:

  • edit: function (id) {
  • getId: function (o) {
  • init: function (){
  • revert: function (){
  • save: function (id) {
  • setBulk: function (){
  • toggle: function (el){
  • type: "post"
  • what: "#post-"

Saving

The save action happens during edit_post hook. In there you should check $_POST['is_quickedit'] to be set. From there on you can process the saving of all your data fields.

Moving Quick Edit to a new location

The main goal of all above things is to build your new UI. After you have done that, you might want to limit the table width to 50% (class="wp-list-table") and insert your altered quick edit box on the other 50% of the screen.

Edit Found out that it’s actually easier to extend the core jQuery function.

( function( $ ) {
    "use strict";


    var id = '',
        rowData="",
        $wpInlineEditPost = inlineEditPost.edit;

    inlineEditPost.customFunction= function( id ) {
        var $this = this;

        // Working with promises to bubble event later than core.
        $.when( inlineEditPost ).then( function() {
                setTimeout( function() {
                    $( '#edit-' + id ).insertAfter( $( '.wp-list-table' );
                }, 0 );
            } );
    }

    inlineEditPost.edit = function( id ) {
        var $this = this;

        // Run WP core first. Do not unbind from core.
        $wpInlineEditPost.apply( $this, arguments );

        // Run our custom function
        $this.customFunction( id );
    };
} )( jQuery || {} );

If you managed the last part it would be nice if you edit my answer and add in the missing piece (moving the box) as I got no test system at the moment.

Leave a Comment