This is very simple to achieve with Views and Isotope (3rd party JS plugin). Please follow the steps below carefully and you are all set.
Step 1:
For an example scenario, I have used standard word press Posts and Post Categories (taxonomy as button filters). My view looks like below:
<!-- Standard show all results view. This isn't a Parametric Search view. -->
[wpv-layout-start]
<div id="filters" class="button-group">
<button data-filter="*">show all</button>
<button data-filter=".Modern">Modern</button>
<button data-filter=".Classic">Classic</button>
<button data-filter=".Future">Future</button>
<button data-filter=".Uncategorized">Uncategorized</button>
</div>
[wpv-items-found]
<!-- wpv-loop-start -->
<div id="myposts">
<wpv-loop>
<!-- Using WPV-POST-TAXONOMY short-code to product category name as an additional CSS class. -->
<!-- The category name as class, is being used to enable filters above. -->
<div class='item [wpv-post-taxonomy type="category" separator=" " format="text" show="name" order="asc"]'>
[wpv-post-link]
[wpv-post-date]
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]
If you take a look right after the first line, I have added a DIV with ID "filters". There I have defined a few buttons to use as filters. These button filters represent Post Categories and using a special attribute "data-filter". Each attribute is using the same class name, as I have defined via short-code "WPV-POST-TAXONOMY" in the items (posts) loop below that filter DIV.
Step 2:
Add following CSS in Views CSS Editor. Although it is not necessary, but just a little visual aid to the posts. You may want to add your flavour preferably.
.item {
width: 25%;
border: 1px solid darkgray;
background-color: #eee;
padding: 10px;
text-align: center;
}
Step 3:
Please visit hidden link to download packaged plugin file. And upload these file to your theme's directory (or whatever is the best suitable place under your theme directory).
After uploading the Isotope packaged file, you may want to include this in your Word Press. There are 2 possible ways, please adopt whichever is feasible for you:
- Add a <script> tag to your theme's header.php, to include the Isotope package file, such as below.
<script src="<?php echo get_template_directory_uri() ?>/isotope.pkgd.min.js" type="text/javascript"></script>
- If above is not possible, please add following code to your functions.php. This rolls out through the standard script registration and enqueue process.
function add_isotope_js() {
wp_enqueue_script( "isotope-js", get_template_directory_uri() . '/isotope.pkgd.min.js');
}
add_action('wp_enqueue_scripts', 'add_isotope_js');
Please remember to adjust Isotope package file name and path accordingly.
Step 4:
Finally, add following Java Script code in your view's JS Editor:
var $container = jQuery('#myposts'); // Container for the all post items
// init
$container.isotope({
// options
itemSelector: '.item', // Individual post item selector
layoutMode: 'fitRows'
});
// Enable filter buttons to behave as expected
jQuery('#filters').on( 'click', 'button', function() {
var filterValue = jQuery(this).attr('data-filter');
$container.isotope({ filter: filterValue });
});
That is all. Please consider following points for an understanding around all above:
- Adjust your view according to your requirements.
- Notice the "syntax" required by Isotope, to layout the resulting items as well as the button filters.
- Please visit hidden link for a detailed help and examples on Isotope.
I hope this will give you pretty much a good start, and you can customize it as per your needs.
Please let me know if I can help you with anything related.
