Question

I have eleven categories I’ve created in WordPress with a post for each one. The categories are really destinations (as in ‘travel’). I would like a way for the site visitor to select and compare categories and have the result shown on one page.

Example: This link as it is, will show categories 7 and 8 on the same page. I would like a way to produce this result dynamically via checkboxes or something similar.

Answer 1

With jQuery you can use Ajax to load the categories through a PHP file which fetches them from the WordPress database. If we assume you use json as datatype, and you return a structure like this:

{
  "category1": "1;2;3",
  "category2": "4;5;6"
}

Where each key is the name of a selected category, and each value is a string containing the ids of the posts included in the category (this is just an example of how the data could be returned).

You can then iterate through the returned data like this:

function update_categories(q){
  $.ajax({
    url: "get_categories.php",
    dataType: 'json',
    data: q,
    success: function(data){
      var items = [];
      $.each(data, function(key, val) {
        items.push(key + ' : ' + val + '<br>');
        $('#category-container').html(items.join(''));
      });
    }
  });
}

Your function is called everytime a checkbox is changed:

$('.checkbox').change(function(){
  $(this).parent().find('input:check').each(function(){
    /* 
     * Build the querystring q which should be sent to the PHP file through the 
     * data property of the $.ajax() method.
     */
  });
  update_categories(q);
});

Now this is not perfect, and you need to write the PHP file that fetches the categories, but hopefully it gets your going!

References:

• change()
• ajax()