Query posts based on radio button field

• bounty_digital

• November 5, 2013 at 11:00 am

On my posts page I have a selection of radio button options. I’m using them similar to how ‘Categories’ would work usually. I was wondering if it was possible for me to query a page of posts depending on which radio button was selected?

For example, when I create a new post I have to make a radio button selection from these options:
– Dogs
– Cats
– Rabbits

I’ve listed them on the home page of my website. Now when I click ‘Dogs’ I would like to list all the posts with ‘Dogs’ as the radio button selection.

• Elliot

• November 5, 2013 at 3:21 pm

Hi @bounty_digital

Easy, on the docs page you will find an article covering how to query posts based on a custom field value.

How did you envisage the user experience from selecting the radio button to the seeing the posts?

Did you want to redirect to an archive page which shows the posts?
Did you want to load the posts in via AJAX and render them onto the same page?
etc…

Thanks
E

• bounty_digital

• November 5, 2013 at 3:24 pm

Hey there,
Probably just an archive page would be the easiest option?
I read the docs but it says I have to list the values in the array but I’ve got an option for the user to add their own custom radio button field (Using the ‘other choice to allow for custom values’).. So everytime they add their own radio button field would I have to update the array? Or is there a way I can get a WP query going for all the fields of the radio button?

• Elliot

• November 5, 2013 at 3:39 pm

Hi @bounty_digital

You can render out the radio buttons dynamically, by loading the field object and looping through the $field[‘choices’].

Check out the get_field_object function to learn how to render out choices. This will take care of any ‘user created’ options.

As for the archive page, that part is easy.

WP has a filter called ‘pre_posts’. I highly encourage you to research this filter and understand how you can hook in and modify the WP_Query args before the query has been run.

What you can do is add some code to your functions.php file which will hook into this filter and look for a $_GET parameter. This $_GET parameter will come from the url that you send the user to after they have selected a value from the radio button.

This $_GET param can have any name, but needs to have the value of the selected radio button.

Back to the filter, look for this $_GET param and if it exists, use it to add a meta_key and meta_value args to the WP_Query args.

Your archive page will then dynamically use the URL param to update the results all on it’s own!

Easy!

Thanks
E

• bounty_digital

• November 5, 2013 at 8:41 pm

This reply has been marked as private.

• Elliot

• November 7, 2013 at 10:18 am

Hi @bounty_digital

I don’t think your code is following the correct logic path for this to work.
Your code needs to be spit up into 2 parts:

1. Create the radio button where a user can select the category and then be redirected to the archive url with the $_GET param

2. hook into the pre_get_posts filter and look for the $_GET param. If it exists, add the meta query in.

I should really write a tutorial for this one, so I’m happy to write the code. This is the most simple way to get it working:

<?php 

$field = get_field_object("field_5039a99716d1d");

?>
<form action="<?php echo home_url('slug/to/archive'); ?>" method="get">
	<ul>
	<?php foreach( $field['choices'] as $k => $v ): ?>
		<li>
			<label><input type="radio" name="acf_category" value="<?php echo $k; ?>" /><?php echo $v; ?></label>
		</li>
	<?php endforeach; ?>
	</ul>
	<input type="submit" value="Go" />
</form>

<?php 

add_filter( 'pre_get_posts', 'my_pre_get_posts' );

function my_pre_get_posts( $query ) {
	
	if( isset($_GET['my_custom_category']) )
	{
		// $query is the WP_Query object, set is simply a method of the WP_Query class that sets a query var parameter
		$query->set( 'meta_key', 'acf_field_name' );
		$query->set( 'meta_value', $_GET['acf_category'] );
	}
	return $query;
}

 ?>

This code has not been tested, you can see the 2 parts of code. The rest will be up to you to test it and fix any issues it contains!

Good luck

Thanks
E

• mvmonroe

• November 11, 2013 at 5:38 am

Try this to query a post type to display posts based on a radio button value

<?php 				
		// args
		$args = array(
			'numberposts' 	=> -1,					// Displays ALL post
			'post_type' 	=> 'custom_post_type',	// Change to reflect the name of your custom post type
			'meta_key'		=> 'custom_field',  	// Change to reflect the name of your custom field
			'meta_value'	=> 'cats'			// Change to reflect the name of the value in your custom field
		);
 		// get results
		$the_query = new WP_Query( $args );
		// The Loop
?>
<?php if( $the_query->have_posts() ): ?>
		<ul>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
		<a href="<?php the_permalink(); ?>">
			<li>
				<?php echo get_the_title(); ?>
			</li>
		</a>
<?php endwhile; ?>
		</ul>
<?php endif; ?>
<?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>