user to sort and filter ACF list

• Vince_M

• May 2, 2016 at 7:53 am

I have a page with athlete results. The result page has the following fields Name, Event and sport & result. I would like to find out if the user can select a athlete from a dropdown menu that has the athletes that have results and only the results from that athlete will show up.

<?php
        $athlete = single_post_title('', false);
        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

        $args = array(     
          'post_type'       =>   'result',
          'orderby'         =>   'date',
          'order'           =>   'DESC',
          'posts_per_page'  =>    10,
          'paged'           =>    $paged,
            'meta_query'      =>    array(
              array(
                  'key'     =>  'result-athlete', // athlete results name
                  'value'   =>  $athlete, // athlete name
                  'compare'  =>  '='
                ),
              ),
          );
          
      $the_query = new WP_Query( $args );

    ?>

Any help would be greatly appreciated.

• James

• May 2, 2016 at 10:49 am

Hi @vince_m

I believe you can set and get the athlete by using the $_GET variable. This page has an example how to do it on an archive page: https://www.advancedcustomfields.com/resources/creating-wp-archive-custom-field-filter/.

I hope this helps.

• Vince_M

• May 2, 2016 at 11:43 pm

Hi James,

Not sure if this will work. I have made a custom post type with the ACF of athlete, result and date. I would like the user to be able to sort the list via dropdown (or some other way) to only show a certain athletes result. If you click on any name it will take you to the athlete profile page.

• James

• May 4, 2016 at 2:51 pm

Hi @vince_m

You don’t have to follow the code on the page I gave you before. It’s only an example how to do it. I’m sorry I forgot to tell you that.

The following is a simple example to do it.

<?php if ( isset($_GET['searchkey']) ){ ?>

    <?php 
    // args
    $args = array(
        'numberposts'	=> -1,
        'post_type'	=> 'custom-post-type',
        'meta_query'	=> array(
            array(
                'key'		=> 'athlete',
                'value'		=> $_GET['searchathlete'],
                'compare'	=> 'LIKE'
            )
        )
    );

    // query
    $the_query = new WP_Query( $args );

    ?>
    <?php if( $the_query->have_posts() ): ?>
        <ul>
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>">
                    <img src="<?php the_field('event_thumbnail'); ?>" />
                    <?php the_title(); ?>
                </a>
            </li>
        <?php endwhile; ?>
        </ul>
    <?php endif; ?>

    <?php wp_reset_query(); ?>

<?php } //endif isset searchkey?>

Then you can get the posts like this:

http://example.com/path-where-you-put-the-code/?searchathlete=searchkey

Where “searchkey” is the athlete you want to search. This page should give you more idea about it: https://www.advancedcustomfields.com/resources/query-posts-custom-fields/.

I hope this makes sense 🙂

• Vince_M

• May 5, 2016 at 12:28 am

Hi James,

Thanks for all the help. I am really new to all of this. I am kinda lost with everything.

Here is the complete code for the results page that I have so far.

<section class="col-sm-12 col-md-9 athlete main-content">
          <div class="athlete-name page-header">
            <h2 class="heading"><?php the_title();  ?></h2>
          </div><!-- /.athlete-name -->

            <?php if ( have_posts() ) : while ( have_posts() ) : the_post();  ?>

            <?php the_content();  ?>

            <?php endwhile; endif; ?>

<hr>
            <?php
              
              //wp_reset_postdata();
              $args = array(       
                'post_type' => 'result',
                'category_name' => 'results',
                'orderby' => 'date',
                'order'   => 'ACS',
                'posts_per_page'  =>  15,
                'paged'             =>  $paged
                );
              $the_query = new WP_Query( $args );       
              //wp_reset_postdata();

            ?>

            <div class="col-md-12 index-results-Section">

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

              <div class="index-resultsSingle">
                     <div class="col-md-2 index-resultsAthlete">
                     <a href="<?php the_field('page_link'); ?>"><?php the_field( 'result-athlete' ); ?></a>
                  </div><!-- .index-resultsAthlete -->

                  <div class="col-md-7 index-resultsSport">
                   <?php the_field( 'result-sport' ); ?>
                     <?php the_field( 'result-date' ); ?>
                   </div> <!-- .index-resultsSport -->

                    <div class="col-md-3 index-resultsResult">
                      <?php the_field( 'result-result' ); ?>
                    </div> <!-- .index-resultsResult -->

                  <div class="clearfix"></div>

               </div>

              <?php endwhile; endif; ?>

<div class="row"> <!-- Next and Previous -->
                  <?php if ($the_query->max_num_pages > 1) { // check if the max number of pages is greater than 1  ?>
                    <nav class="prev-next-posts">
                      <div class="col-md-4 prev-posts-link">
                        <?php echo next_posts_link( '< Older Results', $the_query->max_num_pages ); // display older posts link ?>
                      </div>
                      <div class="col-md-4 col-md-offset-4 next-posts-link">
                        <?php echo previous_posts_link( 'Newer Results >' ); // display newer posts link ?>
                      </div>
                    </nav>
                  <?php } ?>
              </div>
            <div class="clearfix visible-sm"></div>

            </div>
        </section><!-- .athlete main-content -->

Here is a link of something they would like it to be like.

• James

• May 7, 2016 at 4:55 pm

Hi @vince_m

This will be hard to explain, so I’m sorry if I’m not clear enough. I’ll use the link you gave me for an example (https://swimming.ca/en/events-results/meet-results/?province=1&season=16&month=5). In that link, you can see the $_GET variables, which is “province=1&season=16&month=5”. You can get these variables by using this code:

$province = $_GET['province'];
$season = $_GET['season'];
$month = $_GET['month'];

With those variable, you can query the posts like this:

$args = array(       
    'post_type' => 'result',
    'category_name' => 'results',
    'orderby' => 'date',
    'order'   => 'ACS',
    'posts_per_page'  =>  15,
    'paged' =>  $paged,
    'meta_query'    => array(
        'relation' => 'AND',
        array(
            'key' => 'province_custom_field',
            'value' => $_GET['province'],
            'compare' => 'LIKE'
        ),
        array(
            'key' => 'season_custom_field',
            'value' => $_GET['season'],
            'compare' => 'LIKE'
        ),
        array(
            'key' => 'month_custom_field',
            'value' => $_GET['month'],
            'compare' => 'LIKE'
        ),
    )
);

Where “province_custom_field”, “season_custom_field” and “month_custom_field” are the custom fields you want to filter.

What you can do for now is trying to filter one custom field first instead of three in the same time. This will make sure that your code is working or not.

Also, if you’re not familiar with programming, I suggest you learn it here: http://www.w3schools.com/php/. If you don’t have time to do it, you can always hire a developer to help you out with it, and I’d recommend looking for one on https://studio.envato.com/ or https://www.upwork.com/.

I hope this makes sense 🙂

• Vince_M

• July 17, 2016 at 8:31 am

Thanks for the response James. Sorry I haven’t had a chance to get back to this. I haven’t looked at this for a while as I was trying to finish the rest of the site and knew I could come back to this.

The page I am trying to have to user sort is located at:

CSCM results

If you could take a quick look at this and the code I had above and point me in the direction I need to go to be able to have the user sort the field so they can select from a dropdown which athlete they would like to see the results.

And do you know if there is any way that we can add users in the backend?

Thanks for all the help.

• James

• July 17, 2016 at 1:32 pm

Hi @vince_m

Have you tried my code? I’m afraid I can’t do anything until you’ve tried my code and let me know what’s wrong with it. Please keep in mind that you need to modify it to your needs instead of just copying and pasting it.

Also, please keep in mind that I can’t help you with code customizations. What I can do is to guide you in the right direction. If you don’t have the capability to do it alone, you can always hire a developer to help you out with it.

Thanks 🙂