Sorting custom post type using select menu

• Kalistostudio

• October 5, 2020 at 7:52 am

Hi everyone!
I really like the plugin, it is great.

I have been pairing it with a custom post type displaying concert dates, I can get all my posts to work fine and I can use WP_Query and $args to filter/order them simply. I use a datepicker ACF field ‘date_selector’, and “orderby” to order them by date.

Things got more complicated then…
I am trying to create a basic select menu with 2 options that would help sorting/reordering the posts based on their date. Just changing the “orderby” value for now would be enough to understand the way it works.

From the ACF documentation, I understand that you can use if( isset($_GET['your-option']) ) to get the URL parameter and then use that to make some changes in your arrays?

Sorry if I am lost. Here is my code for the cpt:

<?php	
$today = date('Y-m-d H:i:s');
$args = array(
        'post_type' => 'agenda',
        'posts_per_page' => 8,
        'meta_key' => 'date_selector',
        'orderby' => 'meta_value',
        'order' => 'DESC',
        'suppress_filters' => true,
        'lang' => '',
        'meta_query' => array(
            'relation' => 'AND',
            array(
            'key' => 'date_selector',
            'value' => $today,
            'type' => 'DATE',
            'compare' => '<',
                )
        )
)
        
?>

<div class="filtering-box fl-2 on_w g_sm_mt">
    <p>Sort by:</p>
        <form action="<?php the_permalink(); ?>" method="get">
            <select name="filter" id="date-filter">
                <option value="date-recent">Now</option>
                <option value="to-come">To come</option>
            </select>
            <button type="submit" value="">Sort</button>
        </form> 
</div>
<wrapper class="events-container g_sm_mt">
	            

<?php 
    function my_pre_get_posts( $query ) {
	// do not modify queries in the admin
	if( is_admin() ) {
		return $query;
	}
	
	// only modify queries for 'event' post type
	if( isset($query->query_vars['post_type']) && $query->query_vars['post_type'] == 'agenda' ) {
		// allow the url to alter the query
		if( isset($_GET['date-recent']) ) {
			
    $args = array(
        'post_type' => 'agenda',
        'posts_per_page' => 1,
            'meta_query' => array(        
                'key' => 'date_selector',
                'value' => $today,
                'type' => 'DATE',
                'compare' => '>',
                    )
                );
            }
            	// return
	return $query;

            }

        }
    
    add_action('pre_get_posts', 'my_pre_get_posts');

?>

<?php //Query posts 
$agenda_dates = new WP_Query( $args ); ?>
	<?php if ($agenda_dates->have_posts()): ?>
		<?php while ($agenda_dates->have_posts()): $agenda_dates->the_post();?>

//my posts here...

<?php endwhile;?>
	<?php endif;?>

<?php wp_reset_postdata();?>

I got this far, it keeps working but the filter option does not change anything to the posts when I select the value “date-recent”. Sorry for this poor attempt, I am not good at php and do not understand how to implement the sorting option.

I am not even sure about the syntax and where I should write the URL parameter condition if( isset($_GET['...'])).

Can anyone of you help me with this?

Thank you,
Have a nice day!