Изменить порядок зацикливания WordPress с «desc» на «asc» нажатием или раскрывающимся списком

Я новичок в PHP, и мне нужно сделать следующее:

• Создайте выпадающее меню или ссылку, которая изменяет цикл WordPress с «desc» на «asc» при выборе или нажатии.

Вот мой код цикла:

<?php
global $wp_query; $post; $post_id = $post-> ID;
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
rewind_posts();
$temp = $wp_query;
$wp_query = NULL;

$post_type = 'post'; // change this to the post type you want to show
$show_posts = '20'; // change this to how many posts you want to show
$category_name = 'used-cars'; // change this to the category name you need
$order_by = 'meta_value_num';
$meta_key = 'price';
$order = 'desc'

?><?php $wp_query = new WP_Query( 'category_name=' . $category_name . '&post_type=' . $post_type . '&posts_per_page=' . $show_posts . '&paged=' . $paged . '&orderby=' . $order_by . '&meta_key=' . $meta_key . '&order=' . $order ); ?>

<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

<div style="width: 670px; height: 170px; border-bottom: 3px solid #ccc; width: 100%; padding-top: 20px;">

<!-- POST THUMB -->

<div style="float: left; width: 150px;">

<?php if ( has_post_thumbnail() ) : ?>

<a href="<?php the_permalink() ?>"><?php the_post_thumbnail( 'thumbnail' ); ?></a>

<?php else : ?>

<div style="width: 150px; height: 150px; border: 1px solid #efefef;">

<p style="text-align: center; margin-top: 60px;">No Pictures Available</p>

</div>

<?php endif; ?>

</div>

<!-- POST CONTENT RIGHT -->

<div style="float: left; margin: 0px 0 0 20px; width: 450px;">

<div style="float: left; width: 245px; height: 150px;">

<!-- POST INNER LEFT -->

<h2 style="margin-bottom: 20px; font-size: 16px;"><a class="loop-link" href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>

<div style="float: left; width: 70px; height: 120px;">
<p style="font-size: 12px;"><strong>Year/Reg:</strong></p>
<p style="font-size: 12px;"><strong>Fuel Type:</strong></p>
<p style="font-size: 12px;"><strong>Colour:</strong></p>
<p style="font-size: 12px;"><strong>Mileage:</strong></p>
<p style="font-size: 12px;"><strong>Gearbox:</strong></p>
</div>

<div style="float: left; width: 70px; height: 120px; text-align:right;">
<p style="font-size: 12px;"><?php the_field('year-reg'); ?></p>
<p style="font-size: 12px;"><?php the_field('fuel_type'); ?></p>
<p style="font-size: 12px;"><?php the_field('colour'); ?></p>
<p style="font-size: 12px;"><?php the_field('mileage'); ?></p>
<p style="font-size: 12px;"><?php the_field('gearbox'); ?></p>
</div>

</div>

<!-- POST INNER RIGHT -->

<div style="float: right; margin: 0; width: 170px; height: 150px; border-left: 1px solid #efefef; text-align: right;">

<h2>Price: <?php the_field('price'); ?></h2>

<br><a class="view-button" href="<?php the_permalink(); ?>">VIEW THIS USED CAR</a>
<br>
<br>
<br>
<br>

<!-- SHARE BUTTONS -->

<p>SHARE THIS CAR</p>
<span class='st_facebook'></span>
<span class='st_twitter'></span>
<span class='st_googleplus'></span>
<span class='st_linkedin'></span>
<span class='st_pinterest'></span>
<span class='st_email'></span>

</div>

</div></div>

<?php endwhile; ?>

<?php wp_reset_query(); ?>

Код для автомобильного сайта, и вы можете просмотреть страницу здесь:

http://temp51.clrs-hosting.co.uk/used-cars

Я искал несколько дней, чтобы найти решение, но я не смог найти ни одного. Опять же, как я уже сказал, я новичок в PHP, поэтому любая помощь или совет будут полезны. Есть идеи, интернет-друзья?

SLAINTE.