seo Question posted in
Some basic information to get you started with this can be found here.

Combining boostrap carousel with checkboxes in WordPress – SEO

Hello guys I’m working on implementing bootstrap carousel in my WordPress project. I’m using checkboxes to list my categories it looks something like this:
enter image description here

I would like for users to be able to change content of my carousel based on categories they choose.
Basically I need to change my query based on which checkboxes user has choosen. My query needs to change based on what categories user has choosen for example something like this ‘category_name’ => ‘test1, test2’

This is my code:

<div class="col-md-7 col-md-offset-4 main-content">
    <div class="checkbox">
      <label class="checkbox-inline">
        <input type="checkbox" name="allRadios" id="allRadios" value="all">
        all
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="frontendRadios" id="frontendRadios" value="frontend" checked>
        front end
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="wordpressRadios" id="wordpressRadios" value="wordpress" checked>
        wordpress
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="designRadios" id="designRadios" value="design" checked>
        design
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" name="seoRadios" id="seoRadios" value="seo" checked>
        seo
      </label>
    </div>
</div>

<!-- Here starts carousel loop -->
<?php $carauselLoop = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => -1, 'category_name' => 'testing' ) ); ?>
<?php $i=1; ?>
<div class="col-md-4 our-work-info">
    <div class="clients-num">
        <h5 title="01">01</h5>
    </div>
    <span class="glyphicon glyphicon-link"></span>
    <h3>Crossroads</h3>
    <h4 class="sub-heading">front end / wordpress</h4>
</div>

<div class="col-md-7">

    <div id="our-work-carousel" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <?php while ( $carauselLoop->have_posts() ) : $carauselLoop->the_post(); ?>
                <div class="item <?php if ($i == 1) echo 'active'; ?>">
                    <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="<?php the_title(); ?>">


               <div class="carousel-caption">
                    <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a>
                </div>
            </div>
        <?php $i++; ?>
        <?php endwhile; wp_reset_query(); ?>
    </div>

    <!-- Indicators -->
    <ol class="carousel-indicators our-work-indicators">
        <li data-target="#our-work-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#our-work-carousel" data-slide-to="1"></li>
        <li data-target="#our-work-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Controls -->
    <a class="left carousel-control" href="#our-work-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#our-work-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

Is there a way to achieve this and how should I approach it ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've decided to take a different approach in solving this. My idea was to load all posts from different categories and give them CSS classes which I would then show or not show based on which checkboxes user selected.
    This is my HTML:

        <div class="carousel-inner" role="listbox">
    <?php while ( $carouselLoop->have_posts() ) : ?>
        <?php $carouselLoop->the_post(); ?>
        <?php
            $categories = get_the_category();
            $cat = '';
            if ( ! empty( $categories ) ) {
                $cat = esc_html( $categories[0]->name );
            }
        ?>
        <div
            class="cat-all cat-<?= strtolower($cat) ?> item <?php if ($i == 1) echo 'active'; ?>"
            data-title="<?php the_title() ?>"
            data-category="<?= strtolower($cat) ?>"
        >
            <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="<?php the_title(); ?>">
            <div class="carousel-caption">
                <a href="<?php the_permalink() ?>"><h3><?php the_title(); ?></h3></a>
            </div>
        </div>
        <?php $i++; ?>
    <?php endwhile; ?>
    <?php wp_reset_query(); ?>
</div>

    This is my JQ:

        var checkedCategories = {
    frontend: false,
    testing: false,
    uncategorized: false,
    wordpress: false,
    design: false,
    seo: false,
};

function checkedKeys() {
    return Object.keys(checkedCategories).filter(function(key) {
        return checkedCategories[key];
    });
}

function toggleAll() {
    Object.keys(checkedCategories).forEach(function(key) {
        checkedCategories[key] = false;
        $('#' + key + 'Chb').attr('checked', false);
    });
    $('.cat-all').addClass('item').removeClass('hidden');
    $('.cat-all').eq(0).addClass('active');

    $('#allChb').attr({
        disabled: true,
        checked: true
    });
}

$('#category-checkboxes').on('change', 'input:checkbox', function(e) {
    var $chb = $(this);
    var category = $chb.data('category');

    $('.cat-all').removeClass('active');

    if (category == 'all') {
        if (this.checked) {
            toggleAll();
            return;
        } else {
            $(this).attr('disabled', true);
        }
    }

    $('.cat-all').removeClass('item').addClass('hidden');

    if (this.checked) {
        $('#allChb').attr({
            disabled: false,
            checked: false
        });
    }

    var $catItems = $('.cat-' + category);
    checkedCategories[category] = this.checked;

    var categories = checkedKeys();
    if (categories.length === 0) {
        toggleAll();
        return;
    }

    categories.forEach(function(cat) {
        var checked = checkedCategories[cat];
        var $catItems = $('.cat-' + cat);
        $catItems.addClass('item');
        $catItems.removeClass('hidden');
    });

    $('.cat-all.item').eq(0).addClass('active');
});

    If anyone runs into similar issue I hope this will help him.


  2. 0

    Doing this in PHP means doing page reloads for every checkbox click and this is generally not what you want. You’re wasting a lot of user’s time and putting a needless load on your server. That being said, what you want to do is expose a custom query parameter that you then pass along to the function querying the posts.

    So you’d add something like this to functions.php:

    public function add_query_vars($vars) {
  $vars[] = 'carousel_cat';
  return $vars;
}
add_filter('query_vars', 'add_query_vars');

    Then wherever you run the query you first fetch the query param from the URL:

    $carousel_categories = get_query_var('carousel_cat', false) ?: '1,2'; // '1,2' are defaults
// Let's assume the URL is /?carousel_cat=12,43 then $carousel_categories = '12,43'

    And pass that to your query:

    // The numbers should be category IDs because then you can pass them directly to the query:
$carauselLoop = new WP_Query(['cat' => $carousel_categories]);
// But you might wanna do some kind of sanitation on that so that ti doesn't error out

    For the checkboxes’ values make sure to output the category IDs. Also, don’t hardcode them, but loop through categories:

    <?php
  $available_categories = get_categories();
  foreach($available_categories as $cat):
?>
  <label><input type="checkbox" value="<?= $cat->term_id; ?>"> <?= esc_html($cat->name); ?></label>
<?php endforeach; ?>

    And you will still need some kind of JS logic that will listen for onchange events on the inputs, and set correct URL e.g. http://yoursite.tld/?carousel_cat=12.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search