How to pass multiple checkbox values to wordpress query?

Question

I am working on a website that has multiple check boxes and I want to show results based on what user has selected.

There are about 16 check boxes for music, 8 check boxes for venues and 6 radio buttons for area. The user can check a maximum of 3 check boxes from Music category, a maximum of 3 from Venues and 1 from Area. How do I accomplish this wordpress query that would show posts only from categories that are selected.

For example, If a user has selected House, Techno and Dubstep in Music, Miami as Area, and they want to search for events, music festivals, and live venues, How can I get that using wordpress query?

if(!empty($_POST)){
            global $names;
            $names  = $_POST['music'];
            $music = implode(",", $names);
            $echo $music;
  }

That will echo out all the selected checkboxes as house, dubstep, Miami, music festivals. Now I want to show posts that are in caegories of house, dubstep and are in music festivals category, and in miami area.

What I've used is

 $args = array (
      'category_name' => $music,
      'posts_per_page' => 12,
      'orderby' => 'title',
      'order' => 'ASC',
     );
$posts = query_posts($args);

But this will show all the posts from house, dubstep which is fine but it also shows all posts from music festivals that are not even in house and dubstep category.

Here is my HTML code for checkboxes

        <div class="customsearchul">
        <div id="searchArea">
        <ul>
        <li><h4>Area:</h4></li>
        <li>All of London<input type="radio" name="area" value="london" checked="london"/></li>
        <li>North<input type="radio" name="area" value="north" /></li>
        <li>East<input type="radio" name="area" value="east" /> </li>   
        <li>South<input type="radio" name="area" value="south" /></li>
        <li>West<input type="radio" name="area" value="west" /></li>
        <li>Central<input type="radio" name="area" value="central" /></li>
        </ul>  
        </div>
        </div>

        <div class="customsearchul">
        <div id="searchMusic">
        <ul>
        <li><h4>Music:</h4></li>
        <li>House<input type="checkbox" name="music[]" value="house" /></li>
        <li>Techno<input type="checkbox" name="music[]" value="techno" /></li>
        <li>Trance<input type="checkbox" name="music[]" value="trance" /></li>
        <li>Electronica<input type="checkbox" name="music[]" value="electronica" /></li>  
        <li>Drum and Bass<input type="checkbox" name="music[]" value="drum-and-bass" /></li>
        <li>Garage<input type="checkbox" name="music[]" value="garage" /></li>
        <li>Dubstep<input type="checkbox" name="music[]" value="dubstep" /></li>
        <li>Trap<input type="checkbox" name="music[]" value="trap" /></li>
        </ul> 
        </div> 
        </div>

        <div class="customsearchul" style="margin-top: 34px;">
        <div id="searchMusic">
        <ul>
        <li>Hip-Hop<input type="checkbox" id="music" name="music[]" value="hiphop" /></li>
        <li>R'n'B<input type="checkbox" name="music[]" value="rnb" /></li>
        <li>Rock<input type="checkbox" name="music[]" value="rock" /></li>
        <li>Indie<input type="checkbox" name="music[]" value="indie" /></li>
        <li>Reggae<input type="checkbox" name="music[]" value="reggae" /></li>
        <li>Retro 80's/90's<input type="checkbox" name="music[]" value="retro" /></li>
        <li>Party Bangers<input type="checkbox" name="music[]" value="party-bangers" /></li>
        <li>Chart Hits<input type="checkbox" name="music[]" value="chart-hits" /></li>
        </ul>  
        </div>
        </div>

        <div class="customsearchul">
        <div id="searchType">
        <ul>
        <li><h4>Search Type:</h4></li>
        <!--<li>Everything<input type="checkbox" name="occasion[]" value="debauchery" /></li> -->
        <li>Nightclubs<input type="checkbox" name="occasion[]" id="nightclub" value="nightclub" checked="checked" /></li>
        <li>Events & Tickets<input type="checkbox" name="occasion[]" value="club-guide" checked="checked" /> </li>   
        <li>Live Venues<input type="checkbox" name="occasion[]" value="festivals" checked="checked" /></li>
        <li>Artist Interviews<input type="checkbox" name="occasion[]" value="artist" checked="checked" /></li>
        </ul>
        </div>
        </div>
       <!-- <input class="searchbutton" type="submit" value="Search" id="performsearch"/> -->

        </form> 

Thanks in advance for your help.

Answer 1

OK here's an attempt, however I don't know the exact structure of your categories taxonomy so it may need some slight tweaking. I've updated the HTML of your form so it uses the values selected by the user, then there's a block of PHP code which runs a custom WP_Query to display the relevant posts (which you can edit to display how you like, currently it just returns an unordered list of posts)

HTML Form

<!-- THE HTML FOR THE FORM -->
<form action="" method="post">
    <div class="customsearchul">
    <div id="searchArea">
    <ul>
        <?php // Get the values from $_POST for area
            if($_POST['area']) { $a=$_POST['area'];} else { $a='';} ?>
        <li><h4>Area:</h4></li>
        <li>All of London<input type="radio" name="area" value="london" <?php if ($a == 'london' || ! isset($_POST['area']) ) { echo 'checked'; } ?> /></li>
        <li>North<input type="radio" name="area" value="north" <?php if ($a == 'north' ) { echo 'checked'; } ?> /> </li>
        <li>East<input type="radio" name="area" value="east" <?php if ($a == 'east') { echo 'checked'; } ?> /> </li>   
        <li>South<input type="radio" name="area" value="south" <?php if ($a == 'south') { echo 'checked'; } ?> /></li>
        <li>West<input type="radio" name="area" value="west" <?php if ($a == 'west') { echo 'checked'; } ?> /></li>
        <li>Central<input type="radio" name="area" value="central" <?php if ($a == 'central') { echo 'checked'; } ?> /></li>
    </ul>  
    </div>
</div>

<div class="customsearchul">
    <div id="searchMusic">
        <ul>
        <?php // Get the values from $_POST for music
            if($_POST['music']) { $m=$_POST['music'];} else { $m[]='';} ?>                      
            <li><h4>Music:</h4></li>
            <li>House<input type="checkbox" name="music[]" value="house" <?php if (in_array('house', $m)) { echo 'checked'; } ?> /></li>
            <li>Techno<input type="checkbox" name="music[]" value="techno" <?php if (in_array('techno', $m)) { echo 'checked'; } ?> /></li>
            <li>Trance<input type="checkbox" name="music[]" value="trance" <?php if (in_array('trance', $m)) { echo 'checked'; } ?> /></li>
            <li>Electronica<input type="checkbox" name="music[]" value="electronica" <?php if (in_array('electronica', $m)) { echo 'checked'; } ?> /></li>  
            <li>Drum and Bass<input type="checkbox" name="music[]" value="drum-and-bass" <?php if (in_array('drum-and-bass', $m)) { echo 'checked'; } ?> /></li>
            <li>Garage<input type="checkbox" name="music[]" value="garage" <?php if (in_array('garage', $m)) { echo 'checked'; } ?> /></li>
            <li>Dubstep<input type="checkbox" name="music[]" value="dubstep" <?php if (in_array('dubstep', $m)) { echo 'checked'; } ?> /></li>
            <li>Trap<input type="checkbox" name="music[]" value="trap" <?php if (in_array('trap', $m)) { echo 'checked'; } ?> /></li>
            <li>Hip-Hop<input type="checkbox" id="music" name="music[]" value="hiphop" <?php if (in_array('hiphop', $m)) { echo 'checked'; } ?> /></li>
            <li>R'n'B<input type="checkbox" name="music[]" value="rnb" <?php if (in_array('rnb', $m)) { echo 'checked'; } ?> /></li>
            <li>Rock<input type="checkbox" name="music[]" value="rock" <?php if (in_array('rock', $m)) { echo 'checked'; } ?> /></li>
            <li>Indie<input type="checkbox" name="music[]" value="indie" <?php if (in_array('indie', $m)) { echo 'checked'; } ?> /></li>
            <li>Reggae<input type="checkbox" name="music[]" value="reggae" <?php if (in_array('reggae', $m)) { echo 'checked'; } ?> /></li>
            <li>Retro 80's/90's<input type="checkbox" name="music[]" value="retro" <?php if (in_array('retro', $m)) { echo 'checked'; } ?> /></li>
            <li>Party Bangers<input type="checkbox" name="music[]" value="party-bangers" <?php if (in_array('party-bangers', $m)) { echo 'checked'; } ?> /></li>
            <li>Chart Hits<input type="checkbox" name="music[]" value="chart-hits" <?php if (in_array('chart-hits', $m)) { echo 'checked'; } ?> /></li>
        </ul>  
    </div>
</div>

<div class="customsearchul">
    <div id="searchType">
        <ul>
        <?php // Get the values from $_POST for music
            if($_POST['occasion']) { $o=$_POST['occasion'];} else { $o[]='';} ?>                                 
            <li><h4>Search Type:</h4></li>
            <!--<li>Everything<input type="checkbox" name="occasion[]" value="debauchery" /></li> -->
            <li>Nightclubs<input type="checkbox" name="occasion[]" id="nightclub" value="nightclub" <?php if (in_array('nightclub', $o)) { echo 'checked'; } ?> /></li>
            <li>Events &amp; Tickets<input type="checkbox" name="occasion[]" value="club-guide" <?php if (in_array('club-guide', $o)) { echo 'checked'; } ?> /> </li>   
            <li>Live Venues<input type="checkbox" name="occasion[]" value="festivals" <?php if (in_array('festivals', $o)) { echo 'checked'; } ?> /></li>
            <li>Artist Interviews<input type="checkbox" name="occasion[]" value="artist" <?php if (in_array('artist', $o)) { echo 'checked'; } ?> /></li>
        </ul>
    </div>
</div>
<input class="searchbutton" type="submit" value="Search" id="performsearch"/>
</form> 

PHP Code (WP_Query)

<?php
    // Get the values from $_POST
    $a = ($_POST['area']);
    $m = ($_POST['music']);
    $o = ($_POST['occasion']);

    // Change the ID of the area category
    $a_tmp = get_category_by_slug( $a );
    $a_catID[] = $a_tmp->term_id;

    // Get the ID of each music category
    // Do some conditional checks to make sure
    // that we're correctly indexing an array
    // and that output is an array for the later
    // use with array_merge()
    if ( is_array($m) ) {
        // If we already have an array it means
        // multiple checkboxes have been selected
        foreach( $m as $m_cat ){
            $m_tmp = get_category_by_slug( $m_cat );
            $m_catIDs[] = $m_tmp->term_id;
        }
    } else {
        // If we don't have an array then
        // only one checkbox has been 
        // selected
        $m_tmp = get_category_by_slug( $m );
        $m_catIDs[] = $m_tmp->term_id;
    }

    // Get the ID of each occasion category
    // with the checking as described above
    if ( is_array($o) ) {
        foreach( $o as $o_cat ){
            $o_tmp = get_category_by_slug( $o_cat );
            $o_catIDs[] = $o_tmp->term_id;
        }
    } else {
        $o_tmp = get_category_by_slug( $o );
        $o_catIDs[] = $o_tmp->term_id;
    }

    // Concatenate the arrays
    $cat_IDs = array_merge($a_catID,$m_catIDs,$o_catIDs);

    // Build the WP_Query arguments
    $query_args =
        array (
            'post_type' => 'post',
            'post_status' => 'publish',
            //'category__and' => $cat_IDs
            'tax_query' => array(
                    array(
                        'taxonomy' => 'category',
                        'field' => 'term_id',
                        'operator' => 'AND',
                        'terms' => $cat_IDs
                    ),
                )

        );//end $query_args;

    $the_query = new WP_Query($query_args);

    // The Loop to echo posts
    if ( $the_query->have_posts() ) {
            // if we have posts, echo opening <ul>
            echo '<ul>';

        while ( $the_query->have_posts() ) {
            // while we have posts, echo the title in an <li>
            $the_query->the_post();
            echo '<li>' . get_the_title() . '</li>';
        }
            // echo the closing <ul>
            echo '</ul>';
    } else {
        // no posts found
        echo 'Nothing found.';
    } wp_reset_postdata();      /* Restore original Post Data */

?>

A few pointers:

• You'll need to double check the taxonomy setup and ensure that the calls to get_category_by_slug is being passed the category's slug
• Probably change the HTML outputted from the loop so it's more than a <ul>