title: Change Wordpress Loop Order from 'desc' to 'asc' with click or dropdown
body: <p>I'm a PHP newbie and I need to do the following:</p>
  
  <p>• Create a dropdown menu or link that changes a WordPress loop from 'desc' to 'asc' when selected or clicked.</p>
  
  <p>Here's the my loop code:</p>
  
  <pre><code>&lt;?php
      global $wp_query; $post; $post_id = $post-&gt; 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' 
  
    ?&gt;
  
  
    &lt;?php $wp_query = new WP_Query( 'category_name=' . $category_name . '&amp;post_type=' . $post_type . '&amp;posts_per_page=' . $show_posts . '&amp;paged=' . $paged . '&amp;orderby=' . $order_by . '&amp;meta_key=' . $meta_key . '&amp;order=' . $order ); ?&gt;
  
        &lt;?php while ( $wp_query-&gt;have_posts() ) : $wp_query-&gt;the_post(); ?&gt;
  
        &lt;div style="width: 670px; height: 170px; border-bottom: 3px solid #ccc; width: 100%; padding-top: 20px;"&gt;
  
          &lt;!-- POST THUMB --&gt;
  
          &lt;div style="float: left; width: 150px;"&gt;
  
            &lt;?php if ( has_post_thumbnail() ) : ?&gt;
  
              &lt;a href="&lt;?php the_permalink() ?&gt;"&gt;&lt;?php the_post_thumbnail( 'thumbnail' ); ?&gt;&lt;/a&gt;
  
            &lt;?php else : ?&gt;
  
              &lt;div style="width: 150px; height: 150px; border: 1px solid #efefef;"&gt;
  
                &lt;p style="text-align: center; margin-top: 60px;"&gt;No Pictures Available&lt;/p&gt;
  
              &lt;/div&gt;
  
            &lt;?php endif; ?&gt;
  
          &lt;/div&gt;
  
          &lt;!-- POST CONTENT RIGHT --&gt;
  
          &lt;div style="float: left; margin: 0px 0 0 20px; width: 450px;"&gt;
  
              &lt;div style="float: left; width: 245px; height: 150px;"&gt;
  
              &lt;!-- POST INNER LEFT --&gt;
  
              &lt;h2 style="margin-bottom: 20px; font-size: 16px;"&gt;&lt;a class="loop-link" href="&lt;?php the_permalink() ?&gt;"&gt;&lt;?php the_title() ?&gt;&lt;/a&gt;&lt;/h2&gt;
  
                &lt;div style="float: left; width: 70px; height: 120px;"&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;strong&gt;Year/Reg:&lt;/strong&gt;&lt;/p&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;strong&gt;Fuel Type:&lt;/strong&gt;&lt;/p&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;strong&gt;Colour:&lt;/strong&gt;&lt;/p&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;strong&gt;Mileage:&lt;/strong&gt;&lt;/p&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;strong&gt;Gearbox:&lt;/strong&gt;&lt;/p&gt;
                &lt;/div&gt;
  
                &lt;div style="float: left; width: 70px; height: 120px; text-align:right;"&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;?php the_field('year-reg'); ?&gt;&lt;/p&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;?php the_field('fuel_type'); ?&gt;&lt;/p&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;?php the_field('colour'); ?&gt;&lt;/p&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;?php the_field('mileage'); ?&gt;&lt;/p&gt;
                  &lt;p style="font-size: 12px;"&gt;&lt;?php the_field('gearbox'); ?&gt;&lt;/p&gt;
                &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;!-- POST INNER RIGHT --&gt;
  
              &lt;div style="float: right; margin: 0; width: 170px; height: 150px; border-left: 1px solid #efefef; text-align: right;"&gt;
  
                  &lt;h2&gt;Price: &lt;?php the_field('price'); ?&gt;&lt;/h2&gt;
  
                  &lt;br&gt;
  
  
                  &lt;a class="view-button" href="&lt;?php the_permalink(); ?&gt;"&gt;VIEW THIS USED CAR&lt;/a&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
                  &lt;br&gt;
  
                  &lt;!-- SHARE BUTTONS --&gt;
  
                      &lt;p&gt;SHARE THIS CAR&lt;/p&gt;
                      &lt;span class='st_facebook'&gt;&lt;/span&gt;
                      &lt;span class='st_twitter'&gt;&lt;/span&gt;
                      &lt;span class='st_googleplus'&gt;&lt;/span&gt;
                      &lt;span class='st_linkedin'&gt;&lt;/span&gt;
                      &lt;span class='st_pinterest'&gt;&lt;/span&gt;
                      &lt;span class='st_email'&gt;&lt;/span&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
  
        &lt;/div&gt;
  
        &lt;?php endwhile; ?&gt;
  
    &lt;?php wp_reset_query(); ?&gt;
  </code></pre>
  
  <p>The code is for a car website and you can view the page here:</p>
  
  <p><a href="http://temp51.clrs-hosting.co.uk/used-cars" rel="nofollow">http://temp51.clrs-hosting.co.uk/used-cars</a></p>
  
  <p>I've search for days to find a solution to this, however, I've not been able to find any. Again, as I said, I'm new to PHP, so any help or advice would be great. Any ideas, internet friends?</p>
  
  <p>Slainté.</p>