Custom meta box with jQuery.sortable custom post type list

Question

What I'm trying to do is have a custom post type ordered differently on different pages. I've searched around for quite a while and can't seem to find anything to help.

I have a post type named staff which is a list of staff members. I then have several pages where those staff members are displayed using categories (a staff member can be in multiple categories and show up on multiple pages). I need to be able to order the staff list on a page by page basis.

For example let's say I have 6 staff in the custom post type. - John - Adam - Steve - Matt - Andrew - Tom

And in Category A there is John, Adam, Steve and Matt, in Category B there is John, Steve and Andrew.

On Page A I want the staff members from Category A to be displayed but in the following order John, Adam, Steve and Matt on Page B the staff from Category B are to be displayed but in the order of Steve, Andrew and John. Therefore I can't use menu_order.

I have written a plugin which displays a list of the custom post type staff and uses jQuery.sortable so they can be sorted easily when editing each page. I've added in some extra code into the jQuery sortable to display the start and finish position in an alert (code from demo here http://so.devilmaycode.it/getting-the-position-of-the-element-in-a-list-when-its-drag-dropped-ui-sortable/). Plugin code below

 <?php

 /*
 Plugin Name: Staff Sort Meta Box
 */

 add_action('admin_print_scripts','plugin_init'); // plugin is any name
 function plugin_init() {
 /* Register our stylesheet. */
 wp_register_style( 'myPluginStylesheet', plugins_url('css/flaticon.css', __FILE__) );
 wp_enqueue_style( 'myPluginStylesheet' );
 /* Register jQuery. */
 wp_deregister_script('jquery');
 wp_register_script('jqua', plugins_url('js/jquery.js',__FILE__), false, '1.11.2');
 wp_enqueue_script('jqua');
 wp_deregister_script('jquery-ui-core');
 wp_deregister_script('jquery-ui-sortable');
 wp_deregister_script('jquery-ui-mouse');
 wp_register_script('jqueryui', plugins_url('js/jquery.min.js',__FILE__), false, '1.11.2');
 wp_enqueue_script('jqueryui');
 }
 add_action('admin_head','jui_admin_header'); //Add JQuery UI to the admin side

 function jui_admin_header() {
 ?>
 <script type="text/javascript">
 $(function() {
 $('.sortable').sortable({
    start: function(event, ui) {
        var start_pos = ui.item.index();
        ui.item.data('start_pos', start_pos);
    },
    update: function(event, ui) {
        var start_pos = ui.item.data('start_pos');
        var end_pos = ui.item.index();
        alert(start_pos + ' - ' + end_pos);
    }
});
 });
 </script>


 <?php
 }


 /* Add a meta box to the page screen */

 function staff_meta_box() {
 add_meta_box( 'staff_meta', __( 'Staff Members', 'staff-textdomain' ), 'staff_meta_callback', 'page', 'normal', 'high' );
 }

 add_action( 'add_meta_boxes', 'staff_meta_box' );


 /* Output content of meta box */
 function staff_meta_callback( $post ) {
 /* Get the current Page ID */
 global $post;
 $pageID = $post->ID;

 if ( $pageID == 25) {
    $category = 'asset-advisory-services';
}
 /* There will be a few other categories but I thought I'd save some reading for you */   
wp_reset_query();
query_posts(array( 
    'post_type' => 'staff',
    'categories' => $category
) );  

 echo '<ul class="sortable">';
 if ( have_posts() ) : while ( have_posts() ) : the_post(); 


echo '<li>';
echo '<i class="flaticon-move7"></i>';
the_title(); 
echo '</li>';



 endwhile; else:
 endif;
 echo '</ul>';

 } 
 ?>

I've been looking at the best way to save the data. I know how to save the data to the post_meta but usually that is for static content e.g. text box1, text box2. Because a new staff member might be added I won't know how many staff members to save and also can I use the post_meta info to sort the list on my template page?

This example http://so.devilmaycode.it/getting-the-position-of-the-element-in-a-list-when-its-drag-dropped-ui-sortable/ saves the order to the menu_order which I can't use.

Do I need to create a new database table to hold the info or can it be done in post meta for the page? Or any other suggestions would be ace.

Answer 1

Short, a new database table would be an absolute overkill.

I think, what you want to do is pretty much resembling the existing menu_order column in wp_posts. Using post meta is just fine, but add it on the the singular staff member posts from your custom post type. So you will have several custom order metas saved for them. And then retrieve the posts (staff members) with WP_Query on the different pages by category and add a meta_query according to the sort order meta field you want, last but not least order your query after the meta field, which means you will likely orderby you meta_value_num. Pretty much all the information you need you get on the WP_Query codex page.

Very brief outline, I hope it helps anyway, but as you are comfortable with saving the data, this should be enough to get you there.

---

Update:

As answer to comment.

No time for a complete answer, but some (more) general information that should help you.

Firstly, do not use query_posts see:

• When should you use WP_Query vs query_posts() vs get_posts()?
• When to use WP_query(), query_posts() and pre_get_posts

for the why.

Secondly, independent from how you will retrieve your list, you generally already have the $post_id's of the single staff posts available. You pretty much just have to make use of this information to make your update_post_meta call address the single posts, instead of the page. A little bit of code refactoring will be necessary, but it should generally be not overly hard to do.

Thirdly and lastly, there are a couple of good plug-ins available which are enabling post sorting via jQuery sortable and saving the data on per post basis. As mentioned above this mostly concerns the menu_order column, but you definitely should take a look at how they do it, because it will be pretty much the same for you, with the only difference that you are going to save your data to post meta fields. So get some inspiration from how it has already be done.

Again, I hope it helps and good luck achieving what you want.