Add taxonomy buttons above query, for user filter?

  • iisrael

    (@iisrael)


    7 years, 3 months ago

    I would like to add buttons that show each option of a taxonomy (including ALL) above my wp_query results so users can filter by type.

    Here is my loop code:

    
<div class="content-wrap">
	<div class="galleries">	
	<?php
	$campGallery = new WP_Query(array(
		'posts_per_page' => 2,
		'post_type' => 'camp_gallery',
		'paged' => $paged,
		'mid_size' => 2,
		'orderby' => 'meta_value',
		'meta_key' => 'start_date'
	));

	while($campGallery->have_posts()){
		$campGallery->the_post(); ?>
		<div class="gallery-inner">
			<h2><?php the_title()?></h2>
			<h3><?php the_field('start_date')?> to <?php the_field('end_date')?></h3>
			<div class="gallery-images avia-gallery">
				<?php 
				$photos = get_field('photos');

				if ($photos) {
					foreach ($photos as $photo) { ?>
						
						<a href="<?php echo $photo['url']?>">
						<img src="<?php echo $photo['sizes']['square']?>">
						</a>						
					<?php }
				}
				?>					
			</div>
		</div>
	<?php }
	?>

		<div>
			<ul>
	        	<li class="page-btn"><?php previous_posts_link( '<i class="fas fa-chevron-left"></i>&nbsp; Newer Galleries', $campGallery->max_num_pages) ?></li> 
	        	<li class="page-btn"><?php next_posts_link( '&nbsp; Older Galleries &nbsp;<i class="fas fa-chevron-right"></i>', $campGallery->max_num_pages) ?></li>
	    	</ul>
		</div>
	</div>
</div>
    • This topic was modified 7 years, 3 months ago by iisrael.
    • This topic was modified 7 years, 3 months ago by iisrael.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years, 3 months ago

    Add links to your template, styled as buttons, with the taxonomy term appended as a URL parameter. Pick key values that are not used by WP. Such as example.com/your-query-page/?my-tax=foobar.

    Where you instantiate WP_Query, get the passed value from $_GET. Validate and sanitize as required. Then set the appropriate WP_Query argument that will implement the desired filtering.

    Thread Starter iisrael

    (@iisrael)

    7 years, 3 months ago

    bcworkz, Thanks for that suggestion. I think I am following what you are saying, but I have two more follow up questions.

    1. How can I have the links(buttons) display dynamically based on the available tax terms in the query?

    2. Do I have to set up a different WP_Query for each tax term or is there a way to use IF logic to do the filter based on the URL Parameter?

    Moderator bcworkz

    (@bcworkz)

    7 years, 3 months ago

    You can get the desired terms with get_terms(), supplied with appropriate arguments. You can use the “fields” argument to limit data returned to only what you need. If need be, certain terms can be excluded from the query used. Loop through the returned term data and use it to generate a list of links on your template.

    The same WP_Query instantiation code is used in all cases. The arguments filtering the results are dynamically added to the arguments, but only when the URL parameter is present. You’ll need to rearrange your code a little. Something like

    $args = array( /*all the usual arguments declared here*/ );
if ( array_key_exists('foo', $_GET )) {
  // sanitize $_GET['foo'] as required and build appropriate tax_query array here
  $args['tax_query'] = array( /*appropriate tax_query array*/ );
}
$campGallery = new WP_Query( $args );
    Thread Starter iisrael

    (@iisrael)

    7 years, 3 months ago

    bcworkz, thank you again. However, I think I am a bit lost with what you are suggesting. I am sorry, I am new to the development game. Things like “the usual arguments” are beyond my current knowledge. Can you please help me with this in a way a beginner would understand?

    Thanks

    Moderator bcworkz

    (@bcworkz)

    7 years, 3 months ago

    Sorry for being vague. I meant your usual arguments:

    		'posts_per_page' => 2,
		'post_type' => 'camp_gallery',
		'paged' => $paged,
		'mid_size' => 2,
		'orderby' => 'meta_value',
		'meta_key' => 'start_date'

    insert exactly, replacing /*all the usual arguments declared here*/

    For sanitation, see https://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data
    URL parameters are considered user data even if generated by code because users can alter URLs. You don’t need to do this right now, but before use in production.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Add taxonomy buttons above query, for user filter?’ is closed to new replies.