How to change custom post order ASC/DESC menu_order wise dynamically?

Question

I have created custom post type in back end with sort menu_order post as you can see in the screenshot. http://prntscr.com/gacw95

In back end sorting ASCENDING/DESCENDING working fine.

But I need to Sort ASC/DESC on the front side also.

When I click on order tab in back end It will be sorting the post in back end but not in front end.

How can I sort the custom post in front side when change in the back end?

Backend code

<?php
// ptype_gallery Custom Post Type
add_action( 'init', 'ptype_gallery_post_type' );
function ptype_gallery_post_type() {
    register_post_type( 'ptype_gallery',
        array(
            'labels' => array(
                'name' => __( 'Gallery', 'theme' ),
                'singular_name' => __( 'Gallery', 'theme' ),
                'add_new' =>  __( 'Add New Gallery', 'theme' ),
                'add_new_item' =>  __( 'Add New Gallery', 'theme' ),
                'edit_item' =>  __( 'Edit Gallery', 'theme' ),
                'new_item' =>  __( 'New Gallery', 'theme' ),
                'all_items' =>  __( 'All Gallery', 'theme' ),
                'view_item' =>  __( 'View Gallery', 'theme' ),
                'search_items' =>  __( 'Search Gallery', 'theme' ),
                'not_found' =>   __( 'No Gallery found', 'theme' ),
                'not_found_in_trash' =>  __( 'No Gallery found in Trash', 'theme' ), 
                'parent_item_colon' => '',
                'menu_name' =>  __( 'Gallery', 'theme')
            ),
        'public' => true,
        'has_archive' => true,
        'hierarchical' => false,
        'menu_position' => 26,      
        'supports' => array( 'title', 'page-attributes', 'thumbnail', 'editor' ), 
        'rewrite'  => array( 'slug' => 'gallery', 'with_front' => true ),
        'menu_icon' => 'dashicons-format-gallery',  // Icon Path
        )
    );
}

// MetaBox
add_action( 'admin_init', 'ptype_gallery_register_meta_box' );
function ptype_gallery_register_meta_box()
{
    // Check if plugin is activated or included in theme
    if ( !class_exists( 'RW_Meta_Box' ) )
    return;
    $prefix = 'ptype_gallery_';
    $meta_box = array(
            'id' => 'gallery-settings',
            'title' => 'Photo Gallery',
            'pages' => array( 'ptype_gallery' ),
            'context' => 'normal',
            'priority' => 'core',
            'fields' => array(          
                    /*array(
                        'name' => 'Specifications',
                        'desc' => '',
                        'id' => $prefix . 'specs',
                        'type' => 'textarea',
                        'std' => '',
                        'rows' => '10'
                    ),*/

                    array(
                        'name' => 'Gallery Images',
                        'desc' => '',
                        'id' => $prefix . 'images',
                        'type' => 'image_advanced'
                    ),

                 )
            );
    new RW_Meta_Box( $meta_box );
}

// Add a new column for the order
function add_new_ptype_gallery_column($ptype_gallery_columns) {
  $ptype_gallery_columns['menu_order'] = "Order";
  return $ptype_gallery_columns;
}
add_action('manage_edit-ptype_gallery_columns', 'add_new_ptype_gallery_column');

// Render the column values
function show_order_column_gallery($name){
  global $post;

  switch ($name) {
    case 'menu_order':
      $order = $post->menu_order;
      echo $order;
      break;
   default:
      break;
   }
}
add_action('manage_ptype_gallery_posts_custom_column','show_order_column_gallery');

// Set the column to be sortable
function order_column_register_sortable_gallery($columns){
  $columns['menu_order'] = 'menu_order';
  return $columns;
}
add_filter('manage_edit-ptype_gallery_sortable_columns','order_column_register_sortable_gallery');
?>

Front End code

  Template Name: Photo Gallery Page Template

 */

get_header();
?>
<div id="main">
    <div class="wrapper">
        <div id="container" class="fullwidth photo-gallery-section">
            <h2 class="pageTitle">
                <?php the_title(); ?>
            </h2>
            <?php
            $args = array(
                'post_type' => 'ptype_gallery', 'posts_per_page' => -1, 'post_status' => 'publish'
            );
            // the query
            $the_query = new WP_Query($args);               
            ?>

            <?php if ($the_query->have_posts()) : ?>

                <!-- pagination here -->

                <!-- the loop -->
                <?php
                while ($the_query->have_posts()) : $the_query->the_post();
                    $images = get_post_meta(get_the_ID(), 'ptype_gallery_images');

                    if ($images) {
                        ?>
                        <h4 class="pageTitle">
                            <?php the_title(); ?>
                        </h4>
                        <div class="photogallery-section">
                            <?php
                            echo '<div class=""></div><div class="productImages row">';
                            foreach ($images as $image) {
                                $thumb = wp_get_attachment_image_src($image, 'product_thumb');
                                $img = wp_get_attachment_image_src($image, 'full');
                                $attachment = get_post($image);
                                ?>
                                <div class="grid2">
                                    <div class="productImgBx">
                                        <div class="productImg"><a data-fancybox="gallery" href="<?php echo $img[0]; ?>"><img src="<?php echo $thumb[0]; ?>"/></a></div>
                                        <div class="productImgTitle"><?php echo $attachment->post_content; ?></div>
                                    </div>
                                </div>
                                <?php
                            }
                            echo '</div>';
                            ?>
                        </div>

                    <?php } endwhile; ?>
                <!-- end of the loop -->

                <!-- pagination here -->

                <?php wp_reset_postdata(); ?>

            <?php else : ?>
                <p><?php _e('Sorry, no products found.'); ?></p>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php get_footer(); ?>

This is my page template with displaying custom post type on frontend but can not sorting as per the backend.

Please help me.

Thank you indvance.

Answer 1

You can hook pre_get_posts and use the order_by argument of WP_Query. From a plugin or functions.php of active theme, something like the following (untested example):

add_action( 'pre_get_posts', 'my_post_type_sort', 10, 1);

function my_post_type_sort( $query ) {
     if ( is_admin || ! $query->is_main_query() ) {
        return;
     }
     if ( $query->get('post_type') !== 'name_of_post_type' ) {
        return;
     }
     $query->set('orderby', array( 'menu_order' => 'ASC') );

}