1

Hello guys I'm trying to make simple filter options for my WordPress project. I want to do it with checkboxes. It looks like this:

enter image description here

This is the code for checkboxes:

<div class="categories">
    <?php
        $cat_count_web = get_category( '8' );
        $cat_count_marketing = get_category( '3' );
        $cat_count_uncatagorized = get_category( '1');
    ?>
    <h3 title="<?php echo $cat_count_web->count; ?>">
        <?php echo $cat_count_web->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="uxWebChb" id="uxWebChb">
        <label for="uxWebChb">UX WEB TACTICS</label>
    </div>
</div><div class="categories">
    <h3 title="<?php echo $cat_count_marketing->count; ?>">
        <?php echo $cat_count_marketing->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="marketingChb" id="marketingChb">
        <label for="marketingChb">MARKETING TACTICS</label>
    </div>
</div><div class="categories">
    <h3 title="<?php echo $cat_count_uncatagorized->count; ?>">
        <?php echo $cat_count_uncatagorized->count; ?>
    </h3>
    <div class="checkboxCustom">
        <input type="checkbox" name="outherChb" id="outherChb">
        <label for="outherChb">OTHER TACTICS</label>
    </div>
</div>

I'm using custom post type to show posts on this page. This is my code to show posts:

<div class="vb-posts clearfix">
    <?php
        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
        $args = array(
            'post_type' => 'html5-blank',
            'posts_per_page' => 5,
            'paged' => $paged
        );
    ?>
    <?php $loop = new WP_Query( $args ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="col-md-3 col-md-offset-1">
        <div class="featured-img featured-img-small" style="background-image: url(<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>);"></div>
    </div>
    <div class="col-md-1 post-num">
        <h3>01</h3>
    </div>
    <div class="col-md-1">
        <hr class="dark-line" />
    </div>
    <div class="col-md-5">
        <a class="post-headline text-uppercase" href="<?php the_permalink() ?>">
            <h4 class="post-headline text-uppercase"><?php the_title() ?></h4>
        </a>
        <div class="post-body-short">
            <p><?php the_excerpt(); ?></p>
        </div>
        <div class="subject">
            <p>
                <?php foreach ((get_the_category()) as $category) {
                    echo $category->cat_name . ' ';
                } ?>
            </p>
        </div><div class="tags">
            <p>
                <?php
                    $posttags = get_the_tags();
                    if ($posttags) {
                        foreach($posttags as $tag) {
                            echo $tag->name . ', ';
                        }
                    }
                ?>
            </p>
        </div>
    </div>
    <?php endwhile; ?>

    <?php if ($loop->max_num_pages > 1) { // check if the max number of pages is greater than 1
        $nextUrl = get_next_posts_page_link();
        $prevUrl = get_previous_posts_page_link();
    ?>
    <div class="paginations clearfix">
        <ul class="pagination">
            <li><a href="<?php echo esc_url( $prevUrl ); ?>"><span class="icon-left_arrow"></span></a></li>
            <!-- pagination here -->
            <?php
              if (function_exists(custom_pagination)) {
                custom_pagination($loop->max_num_pages,"",$paged);
              }
            ?>
            <li><a href="<?php echo esc_url( $nextUrl ); ?>"><span class="icon-right_arrow"></span></a></li>
        </ul>
    </div>
    <?php } ?>
</div>

I have been reading on the subject of how to make filters in WordPress but nothing I found helped me. I found this in WordPress codex, but could not get it to work https://codex.wordpress.org/Function_Reference/wp_category_checklist.
Is there a way to make my custom query work with these checkboxes, so when the user selects or deselects some of them my custom query changes so it only takes posts from those categories ?

2

I was able to solve this by using Ajax.
First I've changed my query args:

$args = array(
  'post_type' => 'html5-blank',
  'posts_per_page' => 5,
  'paged' => $paged,
  'category_name' => get_query_var('category_name')
);

Then I made template where my content would change by injecting it with Ajax like this:

var $vbPosts = $('#vb-posts');
var videoCats  = {
    'ux-web-tactics': true,
    'marketing-tactic': true,
    'other-tactics': true,
};

$('#video-checkboxes').on('change', 'input:checkbox', function() {
    var cat = $(this).data('category'); // ux-web-tactics
    videoCats[cat] = this.checked;
    var lookupCategories = [];
    for (key in videoCats) {
        if (videoCats[key] === true) {
            lookupCategories.push(key);
        }
    }

    // This doesnt allow for checkboxes to be turned off
    if (lookupCategories.length === 0) {
        this.checked = true;
        return;
    }
    $vbPosts.load('video-checkboxes/?category_name=' + lookupCategories.join(','));
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.