Drag n Drop Post Order for multiple Custom Post Types

Question

I have two custom post types (Branding Elements and Products) that I'm showing on a single page, and the client wants to be able to control the sort order of the page.

What would be the best course of action for creating a way for the client to re-order two post types with a drag n drop interface? Because they're 2 different post types, none of the currently available plugins are suitable.

Answer 1

It's common to utilize the WordPress navigational menu UI to get the drag/drop feature for free.

I think there are already some answers, on this site, explaining this better than I can, but I can't seem to find them for you. So let my try to construct one simple example:

1. We go to Appearance/Menus and create a menu with e.g. the mylist menu id.

2. Then we drag/drop posts onto that menu and save it.

3. Add the following shortcode to a page/post content:

   [wpd_list menu_id="mylist"]
   

with the following code snippet to support it:

/**
 * Shortcode [wpd_list] to display posts ordered by the nav menu UI
 */
add_shortcode( 'wpd_list', function( $atts = array(), $content = null )
{
    $atts  = shortcode_atts( 
        array( 'menu_id' => '', ), 
        $atts, 
        'shortcode_wpd_list' 
    );
    $items = wp_get_nav_menu_items( sanitize_key( $atts['menu_id'] ) );
    $ids   = wp_list_pluck( $items, 'object_id' );   // Don't use db_id or page_name!
    $li    = '';
    $q     = new WP_Query( 
        array( 
            'post_type' => 'any', 
            'post__in'  => (array) $ids,
            'orderby'   => 'post__in',         // Must have for the correct order!
        ) 
    );
    while( $q->have_posts() )
    { 
        $q->the_post();
        $li .= sprintf( 
            '<li><h2><a href="%s">%s</a></h2></li>',    // Modify this HTML to your needs!
             get_permalink(), 
             get_the_title() 
        );
    }
    wp_reset_postdata();
    return ! empty( $li ) ? sprintf( '<ul>%s</ul>', $li ) : '';
} );

PS: When writing this example I did at least two mistakes at first ;-)

I first forgot to fetch the posts in the posts__in order, to match the nav menu order.

Secondly I used the db_id as the post ID's instead, of the object_id field.

After fixing that, this seemed to run as expected, so I just post it here now ;-)

Answer 2

This isn't going to work with your current setup. You need to create a single post type and split the posts via a custom taxonomy which would have two terms: 'Branding Elements' and 'Products'. This is the only way to realistically combine two post types into one manageable list that can be reordered by drag-and-drop.

From there you can display the order via 'order' => 'ASC', 'orderby' => 'menu_order' in your query $args and use Simple Page Ordering to drag-and-drop them in the dashboard.

Also, when registering your post type you'll need to include 'hierarchical' => 'page-attributes'. So that the posts can be reordered.

Answer 3

Use categories.

Make a category that you can apply to both post types, and then use this plugin:

https://wordpress.org/plugins/custom-post-order-category/

To order all posts in that category.

Don't show the category on the front end of your website, as its purpose is purely to help relate the two post types for this plugin to use.