Drag n Drop Post Order for multiple Custom Post Types

2 Views

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.

Post Views: 2

Related posts

3 comments

  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 😉

  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.

Comments are closed.