Click here to see the demo.

Here are steps to use this feature:

1. Enable shuffle filter

In Shuffle Filter tab, select the first checkbox:

In this tab, there are a lot of settings to adjust the output, for example:
– Change the word “All”
– Change position of filter bar (left, center, right)
– Load more posts when a term is selected (when pagination is enabled)

In Style Settings tab, you can change color, background color, font… of the filter with friendly settings, without coding.

2. Select which taxonomy to show as filter

In Filter Settings tab, section Advance:
1/ Select checkbox Taxonomy (Categories, Tags…)
2/ Select taxonomy to show as filter. You can select one or more taxonomies.
3/ Select some terms, or leave empty to show all terms.

Best regards,

The main differences between Shuffle Filter and Live Filter:

/* Shuffle Filter - set default filter */
window.sf_enable_trigger = true;
setTimeout(function() {
    var $filter_bar = $('[id^="pt-cv-filter-bar-VIEWID"]');
    $filter_bar.find('.pt-cv-filter-option').eq(1).trigger('click');
}, 2000);

Please replace VIEWID with ID of your View, and replace the number 1 with index number of the filter you want to activate. Here are indexes of filters:

Best regards,

• To show the filters on the left and the result on the right, please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

  [id^="pt-cv-filter-bar-VIEWID"] {
      width: 20% !important;
      float: left !important;
  }
  [id^="pt-cv-filter-bar-VIEWID"] .btn, 
  [id^="pt-cv-filter-bar-VIEWID"] .pt-cv-filter-egroup {
      width: 100% !important;
  }
  #pt-cv-view-VIEWID {
      clear: none !important;
      margin-left: 20% !important;
  }
  

• To show the filters on the right and the result on the left, please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

  [id^="pt-cv-filter-bar-VIEWID"] {
      width: 20% !important;
      float: right !important;
  }
  [id^="pt-cv-filter-bar-VIEWID"] .btn, 
  [id^="pt-cv-filter-bar-VIEWID"] .pt-cv-filter-egroup {
      width: 100% !important;
  }
  #pt-cv-view-VIEWID {
      clear: none !important;
      margin-right: 20% !important;
  }
  

(replace VIEWID in above code with ID of your View)

Best regards,

To add “Clear All Filters” button before the filter bar, please:

• Add this HTML before the View shortcode:

  <a href="#" class="clear-filter" id="clearFilters">Clear All Filters</a>
  [pt_view id="YOUR_VIEW_ID"]
  

• Add this code to Custom JS field in Content Views >> Settings page:

  /* Shuffle Filter - add Clear button for checkboxes type */
  window.sf_enable_trigger = true;
  $('.clear-filter').on('click',function(e){e.preventDefault();
  var $last_checked = $('.pt-cv-filter-option.selected').last();
  $('.pt-cv-filter-option.selected').not($last_checked).removeClass('selected');
  $last_checked.trigger('click');
  });
  

Best regards,

To do the same for Pages, you will need to add categories or tags for pages. Categories and tags for pages are not supported natively by WordPress. So you will need to install another plugin for help. So here are steps:

• Google for “wordpress category for pages”, you will find some plugins
• Select one plugin, install & activate it
• Start adding categories or tags to pages
• Follow steps (click here) to show categories or tags as filters for pages

Thank you,

// Content Views Pro - Use dropdown for Shuffle Filter in mobile devices
add_filter( 'pt_cv_sfilter_type', 'cvp_theme_sfilter_type_mobile', 100, 1 );
function cvp_theme_sfilter_type_mobile( $args ) {

	if ( method_exists( 'PT_CV_Functions_Pro', 'check_device' ) && PT_CV_Functions_Pro::check_device( 'mobile' ) ) {
		$args = 'vertical-dropdown';
	}

	return $args;
}

Best regards,

.pt-cv-filter-group ul {max-height: 500px;}

Best regards,

.pt-cv-wrapper [id^="pt-cv-filter-bar-VIEWID"] >.dropdown-menu {min-width:400px}
.pt-cv-wrapper [id^="pt-cv-filter-bar-VIEWID"] ul.dropdown-menu li {width:48%!important;display:inline-block}

(replace VIEWID with ID of your View).

To make it works with ALL dropdown filters, please use this code instead:

div.pt-cv-wrapper .pt-cv-filter-bar >.dropdown-menu {min-width:400px}
div.pt-cv-wrapper .pt-cv-filter-bar ul.dropdown-menu li {width:48%!important;display:inline-block}

Best regards,

/* Hide items at the beginning */
var cvp_hidden = 0;
$('.pt-cv-page').on('layout.shuffle', function() {
    if (!cvp_hidden) {
        $(this).css('height', 0);
    }
    cvp_hidden++;
})

Best regards,