Create an Ajax Sorter for WordPress Custom Post Types
Ordering custom posts is a generally a drawn-out process of editing the menu order field, post by post. Today, we will make the process many times easier and quicker by using jQuery and a handful of WordPress hooks to create a drag-and-drop solution.
The Set-Up
This tutorial covers a couple semi-advanced topics. I will, therefore, assume you have a firm grasp of PHP, JavaScript, CSS, and WordPress actions. Because of this, I will not going in depth at every step but have made an attempt to reference blog posts and codex articles that may be of help. Despite this lack of depth, you should be able to copy and paste the code and adapt to your own use without much trouble.
One of the best ways to cut down on development time in your projects is to create reusable code. In order to achieve this goal, we will keep all of our PHP, CSS, and JavaScript code in separate files to be easily ported from project to project. I generally keep code of this nature in a /library sub-directory underneath my theme folders.
We will begin by defining our custom post type. In this example, will be creating and working with a Video custom post type. There are numerous other tutorials on the net explaining this process, so I will not cover it in depth. I recommend you read this post over at NetTuts to get started. The code that defines our custom post type is below.
/** * Register Video custom post type * * @return void * @author Soul **/ function soulsizzle_videos_register() { $labels = array( 'name' => _x('Videos', 'post type general name'), 'singular_name' => _x('Video', 'post type singular name'), 'add_new' => _x('Add New', 'release'), 'add_new_item' => __('Add New Video'), 'edit_item' => __('Edit Video'), 'new_item' => __('New Video'), 'view_item' => __('View Video'), 'search_items' => __('Search Videos'), 'not_found' => __('No videos found'), 'not_found_in_trash' => __('No videos found in Trash'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'hierarchical' => false, 'rewrite' => true, 'supports' => array('title', 'editor', 'comments'), 'menu_position' => 20, 'menu_icon' => get_bloginfo('template_url').'/images/menu-videos.png' ); register_post_type( 'video' , $args ); } add_action('init', 'soulsizzle_videos_register');
As stated above, it is best to keep this in a separate file, so it may be reused again later in other projects. I recomend you create a videos.php file in the library folder underneath your theme directory, and place this and any additional PHP code in it. Then, be sure to include it in your theme by referencing it in the functions.php file as so:
require_once('library/video.php');
Creating the Sort Menu
We will now create a Sort sub-menu item that will appear underneath the menu for our Video post type we defined above.
<?php /** * Enable Sort menu * * @return void * @author Soul **/ function soulsizzle_enable_video_sort() { add_submenu_page('edit.php?post_type=video', 'Sort Videos', 'Sort', 'edit_posts', basename(__FILE__), 'soulsizzle_sort_videos'); } add_action('admin_menu' , 'soulsizzle_enable_video_sort'); /** * Display Sort admin * * @return void * @author Soul **/ function soulsizzle_sort_videos() { $videos = new WP_Query('post_type=video&posts_per_page=-1&orderby=menu_order&order=ASC'); ?> <div class="wrap"> <h3>Sort Videos <img src="<?php bloginfo('url'); ?>/wp-admin/images/loading.gif" id="loading-animation" /></h3> <ul id="video-list"> <?php while ( $videos->have_posts() ) : $videos->the_post(); ?> <li id="<?php the_id(); ?>"><?php the_title(); ?></li> <?php endwhile; ?> </div><!-- End div#wrap //--> <?php }
The first function simply adds a submenu underneath the Video menu using WordPress’s add_submenu_page(). It is then enabled using add_action().
The second function is what we told WordPress to call for the sub-menu we defined above. It begins by getting a list of all the posts with type video. By setting posts_per_page to -1, we are telling WordPress to return all of them.
We then create a unordered list with an ID of video-list. Finally, we loop through all the videos and output them as list items. The important thing to note here is that we are setting the ID of the list item to the ID of the post. This will be important later.
Additionally, we placed a reference to loading.gif in the page’s header. This file is included with WordPress and will be used to let users know when they are waiting on AJAX actions to complete.
Styling the List
If you click on the Sort menu item now, it should list all our videos. However, it doesn’t exactly look pretty. Let’s work on that. Begin by telling WordPress to queue up our CSS file, which we will create in a moment, by adding the following to our videos.php.
/** * Queue up administration CSS * * @return void * @author Soul **/ function soulsizzle_videos_print_styles() { global $pagenow; $pages = array('edit.php'); if (in_array($pagenow, $pages)) wp_enqueue_style('soulsizzle_videos', get_bloginfo('template_url').'/library/videos.css'); } add_action( 'admin_print_styles', 'soulsizzle_videos_print_styles' );
The appearence of our list is going to be somewhat of a personal preference. However, by putting the following in a video.css file in the /library directory, you will have something that is simple but meshes well with the WordPress UI.
#video-list { margin-top: 20px; } #video-list li { padding: 10px; width: 50%; font-weight: bold; background: #f0f0f0; /* for non-css3 browsers */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e7e7e7'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7)); /* for webkit browsers */ background: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); /* for firefox 3.6+ */ cursor: move; border: 1px solid #ddd; border-raidus: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } #loading-animation { display: none; }
The JavaScript
Thanks to the power of jQuery, which is automatically included in a WordPress install, we can do powerful DOM manipulation and AJAX with very little code. We will be using jQuery to allow our list items to be sorted by drag-and-drop and automatically updating the menu order of our posts each time the order of the list is changed. Let’s begin by enabling the necessary JavaScript files. We will need to enable jQuery UI’s Sortable plugin to handle the drag-and-drop functionality. Additionally, we will need to create and enable our own JavaScript file to handle the AJAX and tell Sortable what to do. Place the following in your videos.php.
/** * Queue up administration JavaScript file * * @return void * @author Soul **/ function soulsizzle_videos_print_scripts() { global $pagenow; $pages = array('edit.php'); if (in_array($pagenow, $pages)) { wp_enqueue_script('jquery-ui-sortable'); wp_enqueue_script('soulsizzle_videos', get_bloginfo('template_url').'/library/videos.js'); } } add_action( 'admin_print_scripts', 'soulsizzle_videos_print_scripts' );
The above works just like enable our CSS did above. Place the following in video.js in the /library folder.
jQuery(document).ready(function($) { var videoList = $('#video-list'); videoList.sortable({ update: function(event, ui) { $('#loading-animation').show(); // Show the animate loading gif while waiting opts = { url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php type: 'POST', async: true, cache: false, dataType: 'json', data:{ action: 'video_sort', // Tell WordPress how to handle this ajax request order: videoList.sortable('toArray').toString() // Passes ID's of list items in 1,3,2 format }, success: function(response) { $('#loading-animation').hide(); // Hide the loading animation return; }, error: function(xhr,textStatus,e) { // This can be expanded to provide more information alert('There was an error saving the updates'); $('#loading-animation').hide(); // Hide the loading animation return; } }; $.ajax(opts); } }); });
The code above tells jQuery UI’s Sortable plug-in that the unordered-list with the ID #video-list should be sortable. We also tell Sortable that everytime the user changes the order of the list items, it should preform the function assigned to the update option. Most of the function should be self-explanatory. If you have any questions, be sure to reference jQuery’s documentation on .ajax.
The first important thing to note is that we set the url option to ajaxurl. This is defined by WordPress and always points to /wp-admin/admin-ajax.php, which is somewhat of a traffic cop for AJAX requests. By making our request through this file, we will have access to all the functions and variable defined by WordPress when we handle the AJAX request below.
The data option contains the variables that we want to send our PHP AJAX handler. The first variable is action and tells admin-ajax.php how to handle the request. The second variable we are using is one we define ourselves. It is named order and contains a list of ID’s of our videos in the order they currently our in our list. Calling .sortable('toArray') will create an array of these ID’s and .toString() will put it in a format that is easy to pass through AJAX.
Handling the AJAX Request
We must now create our custom PHP AJAX handler. When using custom handlers, admin-ajax.php will execute an action in the form of wp_ajax_[action] where [action] is the name of the action value we pass in our JavaScript. From that point, it’s just a matter of assigning a function to that action. Add this last bit of PHP to our videos.php.
function soulsizzle_save_video_order() { global $wpdb; // WordPress database class $order = explode(',', $_POST['order']); $counter = 0; foreach ($order as $video_id) { $wpdb->update($wpdb->posts, array( 'menu_order' => $counter ), array( 'ID' => $video_id) ); $counter++; } die(1); } add_action('wp_ajax_video_sort', 'soulsizzle_save_video_order');
If you notice, any variables we sent in our JavaScript as data now exists in the $_POST variable. The above code takes the order value and splits it into an array. In then iterates over each ID, and updates the menu_order column of the posts database table with an increasing value.
After rearranging your list of videos, you should be able to the Videos menu and see these changes reflected.
Wrap-up
In only a short amount of code, we were able to create a custom Video post type that is both reusable and goes beyond the basics to make it sortable. Not only do we make it easier on our clients but also on ourselves. We covered a lot of information very quickly, so if you have any questions, feel free to ask in the comments section below. For simplicity’s sake, I’ve included the full contents of our videos.php file below.
<?php /** * Register Video custom post type * * @return void * @author Soul **/ function soulsizzle_videos_register() { $labels = array( 'name' => _x('Videos', 'post type general name'), 'singular_name' => _x('Video', 'post type singular name'), 'add_new' => _x('Add New', 'release'), 'add_new_item' => __('Add New Video'), 'edit_item' => __('Edit Video'), 'new_item' => __('New Video'), 'view_item' => __('View Video'), 'search_items' => __('Search Videos'), 'not_found' => __('No videos found'), 'not_found_in_trash' => __('No videos found in Trash'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'hierarchical' => false, 'rewrite' => true, 'supports' => array('title', 'editor', 'comments'), 'menu_position' => 20, 'menu_icon' => get_bloginfo('template_url').'/images/menu-videos.png' ); register_post_type( 'video' , $args ); } add_action('init', 'soulsizzle_videos_register'); /** * Enable Sort menu * * @return void * @author Soul **/ function soulsizzle_enable_video_sort() { add_submenu_page('edit.php?post_type=video', 'Sort Videos', 'Sort', 'edit_posts', basename(__FILE__), 'soulsizzle_sort_videos'); } add_action('admin_menu' , 'soulsizzle_enable_video_sort'); /** * Display Sort admin * * @return void * @author Soul **/ function soulsizzle_sort_videos() { $videos = new WP_Query('post_type=video&posts_per_page=-1&orderby=menu_order&order=ASC'); ?> <div class="wrap"> <h3>Sort Videos <img src="<?php bloginfo('url'); ?>/wp-admin/images/loading.gif" id="loading-animation" /></h3> <ul id="video-list"> <?php while ( $videos->have_posts() ) : $videos->the_post(); ?> <li id="<?php the_id(); ?>"><?php the_title(); ?></li> <?php endwhile; ?> </div><!-- End div#wrap //--> <?php } /** * Queue up administration JavaScript file * * @return void * @author Soul **/ function soulsizzle_videos_print_scripts() { global $pagenow; $pages = array('edit.php'); if (in_array($pagenow, $pages)) { wp_enqueue_script('jquery-ui-sortable'); wp_enqueue_script('soulsizzle_videos', get_bloginfo('template_url').'/library/videos.js'); } } add_action( 'admin_print_scripts', 'soulsizzle_videos_print_scripts' ); /** * Queue up administration CSS * * @return void * @author Soul **/ function soulsizzle_videos_print_styles() { global $pagenow; $pages = array('edit.php'); if (in_array($pagenow, $pages)) wp_enqueue_style('soulsizzle_videos', get_bloginfo('template_url').'/library/videos.css'); } add_action( 'admin_print_styles', 'soulsizzle_videos_print_styles' ); function soulsizzle_save_video_order() { global $wpdb; // WordPress database class $order = explode(',', $_POST['order']); $counter = 0; foreach ($order as $video_id) { $wpdb->update($wpdb->posts, array( 'menu_order' => $counter ), array( 'ID' => $video_id) ); $counter++; } die(1); } add_action('wp_ajax_video_sort', 'soulsizzle_save_video_order');
45 Comments
Leave a Reply
About
Welcome to the blog of Ryan Marganti, the owner of SoulSizzle Design. I am currently booked until the end of time and not accepting freelance work. Contact me with any questions or comments.
Categories
Recent Posts
-
Create an Ajax Sorter for WordPress Custom Post Types
Create an AJAX sorter for WordPress custom post types
-
Adding Additional Image Sizes to WordPress Themes
Define and implement Wordpress images resolutions beyond the default Large, Medium, and Thumb sizes.
-
Manage a Boatload of WordPress Sidebars With Help From jQuery
Enhance the Wordpress dashboard with jQuery
-
Display a Different Number of Posts in WordPress Searches
Change the number of results shown in a Wordpress search
Just voted @talenthouse for Chris http://t.co/I1qRfAUh #ladyantebellum #
Really cool. Helped me a lot, thanks.
It’s the very thing i want to catch. Thanks!
Thanks for this absolutely what I’m looking for! Couldn’t find anything else like this on the web – one problem though, when I use this to order my custom posts it is the wrong way round!?
Sorted the problem! Thanks for the code!
orderby=menu_order&order=ASC!
Works great, but I’ve got two questions:
1. What do I need to do to get this custom order to display on the actual theme?
2. I have a custom post type that uses a meta value to separate three kinds of people, which are displayed in different areas in the theme. Can I
Nevermind – figured it out. Thanks!
Hey thanks for this tutorial, I’ve used this recently on two projects and was able to easily expand your example for my uses.
For some reason, chrome throws and error saying that the ajax did not properly come through but sortable still appears. I’ve just commented out the ajax error notification for now but is this happening with your example when using chrome? Any ideas? I looked into it a bit to see if it was a webkit issue, but couldn’t really find anything.
Thanks,
J
@John,
Not really sure what’s happening. I’ve tested this code in Safari, IE8, FireFox, Opera, and Chrome. I haven’t received errors with any of them.
Thanks Ryan, I’ll take a closer look at my code. I must have made a mistake.
John
Left a console.log in the ajax callback that was tripping up several browsers and making weird things happen.
~~ shame ~~
@John
Yeah, it’s an easy mistake to make. One I make occasionally myself. IE especially doesn’t like to play nice.
16, Hello there, I was entertained a lot by your unique topic in your blog. In reality, I think about you as one of my favorite blogger because you write articles with heart.
Thank you very much for posting this tutorial… I am stuck in a unique position though as I am trying to utilize your script for a custom hierarchical post type. Could you extend your plugin to allow these capabilities. More specifically, not only being able to resort items within a parent but also being able to move a post from one parent to a different parent and move a parent (which children) sortable into the root or another parent.
I think many others would be very interested in how this would be done.
@Chris,
I’d love to update this tutorial as soon as I get the free time, but not quite sure when that will be. Until then, if you feel like dropping 8 bones, I just stumbled upon a premium plugin tonight called Reorder. It looks like it supports pages and custom post types, including hierarchical types. Check it out at CodeCanyon @ http://codecanyon.net/item/reorder-reorder-posts-and-pages/112877
one of the best WP related article/tutorial i’ve ever read.
THX
How about doin the same with creating post and uploading its featured thumbnail image to media?
Fantastic.
Works perfectly.
Could I get some feedback from the group regarding modifying the function soulsizzle_sort_videos such that I can group the sorter by custom taxonomy or category?
So on the Sort page, I’d like to list the sortable posts grouped by their assigned cat or tax.
Might be the long day, but how would I arrange the query such that I can list it as such?
Thanks! on this site http://www.wordpressfunctions.com are some goof wordpress functions for in the functions.php of your wordpress theme! functions in wordpress has never been easier.
This is a great tutorial! I’ve been trying to figure out how to do sorting for ages!!! Thanks a lot – very clear and easy to follow.
Has anyone tried creating/editing/deleting a post of custom-post-type within another custom-post-type post? For example if I have a CD custom-post-type and would like to add/edit/delete lots of Track custom-post-type within the CD window. There will be lots of AJAX calls … has anyone tried / came across how to do it? Please let me know
Thanks
Hey!
Love this article! I have been looking to do this for so long. I have taken the code and read through the tutorial and I am trying to use this with my own custom post type.
I have changed function names and I am trying to use this for my custom post type called “dmg_services”. I can see the sort menu, and see all of the post in the edit area. But the reordering doesn’t seem to be working!
not sure what I am missing here… Any help would be appreciated!
Thanks!
Here is the code I am working with.
MY FUNCTIONS FILE CODE
http://pastebin.com/TPQcpZJq
MY JS CODE
http://pastebin.com/ruhQLSa6
Hey – nevermind figured it out!
It turns out that since I am using a child theme of twentyten the part in the code that says:
get_bloginfo(‘template_url’).’/library/re-order.js
was pointing to the twentyten theme folder not my child theme folder
So I changed it to this:
get_bloginfo(‘stylesheet_directory’).’/library/re-order.js
Thanks for this awesome article!
Awesome tutorial/article! It was exactly what I was looking to do but unfortunately after implementing your code it doesn’t work for me.
It adds the Sort section to the Custom Post Type and allows me to sort/move the posts within the Sort section but the new order isn’t reflected on the front end where I have the post_thumbnails being displayed from the Custom Post Type. I’m using WP v3.0.4. I know i can change the order by changing the post date but that’s a tedious task.
nice tutorial, one thing when you sort, then goto the videos tab, its still in the same order, by date of creation.
Thanks for the tutorial, I added a filter to display cpts videos in the order they should be displayed in the admin:
[php]
add_filter( ‘posts_orderby’, ‘ilc_orderby’);
function ilc_orderby($orderby){
global $wpdb;
if (is_admin())
$orderby = “{$wpdb->posts}.menu_order, {$wpdb->posts}.post_date DESC”;
return($orderby);
}
[/php]
awesome! Just what I was looking forward – borrowed and credited, thanks a million.
Excellent! I needed to implement this today and I had an idea about how to do it but seeing your code really helped me out.
Thanks.
Great tutorial. This was adopted into a solution as a front end sorter where the admin is able to actually move the posts around on the front end of the site and save the order using your method. See http://wordpress.stackexchange.com/questions/16342/how-to-save-the-state-of-a-drag-and-drop-jquery-ui-sortables-front-end-layout-edi this for more information. Thanks for contributing this!
[...] город секса виртуальная люб&… знакомства [...]
nice tutorial. I used to do sth like this with normal posts. Today for another project I’ll do it for a custom post type. Its a good tutorial before starting. Thanks
Hello Ryan,
I have written a plugin which is released under the same license as wordpress itself, and its proved to be quite popular with the users.
http://wordpress.org/extend/plugins/wp-realtime-sitemap/
I am trying to give users an easier way to sort the output from my plugin, you see it creates a sitemap, and there is a seperate output for pages, posts, categories, archives and tags.
If users wish to change the output order of the sections from the default they need to use the individual shortcodes, but I would like to give them the ability to change the order within the admin interface for the plugin, so I thought I could use the excellent guide that you have made, however I have been unable to adapt it for the purpose above.
I have been able to add it onto the admin interface and the ajax is working, I can change the order, but its not saving the order in the options table, the video.js file I have left as it is on your site. The only thing I have changed is the saving function to as below.
function saveSitemapOrder() {
global $_POST;
// Get any settings from the database.
$options = get_option(‘plugin_wp_realtime_sitemap_settings’);
// Update.
$options['display_order'] = $_POST['order'];
// Install settings into the database.
update_option(‘plugin_wp_realtime_sitemap_settings’, $options);
}
Thank you for your time
Daniel.
Thank you very much for this line:
orderby=menu_order&order=ASC
Just an amazing piece of code!
I´ve tested almost every Plugin which “should” order Custom Post Types. None of them did a good job, but your code does!
Thanks you very much!
tk
You saved my day, thanks a lot Ryan!
Tried this out (with my own personalizations) but for some reason I am unable to get it to save. I drag the posts to the order I want but when I refresh it goes back to it’s original order. Any clue what I’m doing wrong?
Here’s a link to my plugin code. any help would be great!
http://bit.ly/cvrezplugin
Thank you, exactly what I was after, great tutorial.
I was searching for a copy and paste code like this. Thank you and great article. Keep up the great work!
I have checked out a couple of your tutorials, and I must say your style is great!
Your instructions and explanations, even when you tell the reader up front you are not giving a lot of in depth instructions, are clear and easy to understand.
I am not the best in jQuery, and AJAX is all new to me. And yet, I get a good understanding of what is happening here.
This is not a “fluff” comment just for a link back to my site. I honestly wanted to encourage you to consider writing a “how to” book or two, possibly around items like jQuery or Ajax. With the way you are able to explain things clearly, I would be interested!
Great job.
Ed
Awesome tutorial Ryan, thanks a lot it was exactly what I needed and really saved me a lot of time. Really clear and concise, please keep ‘em coming!
Great tutorial. If anyone’s insterested I made this into a class so it’s reusable for multiple post types without repeating the code.
https://gist.github.com/1506926
[...] you don’t want a custom post type you’ve defined to be sorted by the publish date. soulsizzle.com has a great tutorial on making a post type sortable with an AJAX admin [...]
A great tutorial very useful and I learned a lot.
I have a question though, is it possible to add a filter by taxonomy term, to sort within a specific taxonomy term?
I’d be thankful with a tip or suggestion to accomplish this?
thank you very much for this tutorial:)
[...] I’ve been pursuing this tutorial to create a sorting site for my posts: http://soulsizzle.com/jquery/create-an-ajax-sorter-for-wordpress-custom-post-types/ [...]
I’d like to see this used with a select box to choose a post category. That would be helpful for those with long post lists and for many, many custom post type flavors.
Thanks very much. This was exactly what I was looking for.
I made one small change to the javascript file. I added axis: ‘y’ as an option to the sortable to make it so that the sorting elements can only be moved up and down, as opposed to up+down+left+right.
Cheers
Trevor
thanx for guidness