Custom Sort Backend Posts In WordPress

There were probably instances where you wished you could custom sort posts in WordPress. There are a few very good plugins out there that accomplish this task. This brief tutorial will show you how to apply the sorting function to the All Post Screen itself, bypassing the need to create a submenu or settings page.

Queueing the scripts

Let’s queue the scripts we’ll be using on the backend. We’ll be using the sortable widget from jQuery UI, and our own admin.js. Many are not aware that WordPress includes many popular scripts and libraries, including jQuery UI. In our functions.php file, we’ll add the following:

Make sure to add jquery-ui-sortable in your admin.js dependency parameter, we want to make sure jquery-ui-sortable is loaded BEFORE our admin.js script is loaded.

Applying the sortable plugin

Let’s open our admin.js and add the following:

It took a while to figure out that in order to sort a table row, you have to attach the function the the table body. So let’s check out our progress so far…


Cool! Table row dragging and dropping is now working. But how do we save the order?

Saving the order

There are a few ways to skin this cat, but I’m going to use the ajax approach. Let’s make some modifications to our admin.js:

Did you know: The ajaxurl is available as a global in external javascript files queued on the administration side.

Ok, we’re half way there. We prepped our admin.js to pass the ids array of the sorted table rows to an ajax function that we will create now. In the functions.php, add:

What’s happening here is that our function is looping through the “sort” array passed from the admin.js script. We trimmed the post- prefix from the id so we can get the correct post id. Finally, we updated the post with the _custom_sort_post_order meta key. Of course you can replace that handle with your own. So now we have our post order saved for the All Posts Screen. But you probably have noticed that the order is still not reflected upon refresh. So let’s fix that.

Displaying the sort order

We’re going to use the pre_get_posts action to display the custom sort order. Go back to the functions.php and add the following function and hook:

It’s imperative that you only invoke our custom sort  hook on the All Posts Screen. If not, pre_get_posts will apply our custom sort query site wide and we don’t want that.

Now you’ll see the All Post Screen display the proper sort order upon refresh.

Applying the custom sort order to your templates

Use the WP_Query class to call your custom sort order on your archive templates

And there you have it. Of course you can expand this brief tutorial to include custom post types, taxonomy sorting, etc. Tell me what to think in the comments section below.