Hook into admin post list page

by

So I want to create a custom admin interface for the post and page lists. I want it to be a split view with a list of posts and some data on the left, and a full editable preview of the post on the right. I’m having a hard time finding the right place to hook in to accomplish this. What hooks are available for these pages?

enter image description here

I essentially want to hook into these screens to edit the output of them. All I’m looking for is a hook that will pass in all the information on this page, and allow me to output my own HTML and CSS. I plan on making this list 50% of the screen, and when you click on one of the items, it uses ajax to pull down the post content and display it in a preview window on the right side of the screen. Think Mac mail app. All I’m looking for is the right hook. I think I’ve got it past that.

1 Answer
1

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