Live Filter – disable loading results on changing filter option, only loading on click “Submit” button

Live Filter helps you to show taxonomies, custom fields… as filter options, which allows your visitors to filter content in their way.
By default, the results are loaded on changing a filter option (select an option from dropdown, select a checkbox, select an option…)
To disable that behavior, and only loading results on click the “Submit” button, please add this code to Custom JS field (the right textarea) in Content Views >> Settings page:

var cvp_lf_loadonsubmit=function(){$("input, select",".cvp-live-filter").each(function(){$(this).data("nosubmit",!0)})};cvp_lf_loadonsubmit(),$("body").on("pt-cv-pagination-finished",function(){cvp_lf_loadonsubmit()});

Best regards,

Show posts list of custom code, or another plugin in Content Views Pro layout

In case you used custom code to query posts, or used another plugin to get posts, you can use Content Views Pro to display these posts in a beautiful grid or list.
Here is the code you need to use:

$pids = array();

// #1: If there is existing variable contains array of post objects
// Replace $posts by the existing variable
if ( isset( $posts ) ) {
	foreach ( $posts as $post ) {
		$pids[] = $post->ID;
	}
} 
else {
	// #2: If there is existing loop
	// Replace null by the query variable
	$query_obj = null;
	while ( $query_obj ? $query_obj->have_posts() : have_posts() ) :
		$query_obj ? $query_obj->the_post() : the_post();
		$pids[] = get_the_ID();
	endwhile;
}

// Replace VIEW_ID with the ID string of your grid/list View
echo do_shortcode('[pt_view id="VIEW_ID" post_id="' . implode( ',', $pids ) . '"]');

Notice: Above code requires your knowledge of PHP.

Best regards,

List posts by year (display yearly archives)

If you want to show list of years, and list of posts in each year, this document will help.
We will leverage the live filter for the custom field to display yearly archives, with only 2 steps:

  • Step 1: add a custom field to every existing and upcoming posts, to store the published year.
    Please add this code to file functions.php in the theme’s folder (or install this plugin Code Snippets then add this code to the “Code” textarea):

    // Content Views Pro - add custom field to store the published year
    add_action( 'admin_head', 'cvp_theme_add_ctf_to_exising_posts' );
    function cvp_theme_add_ctf_to_exising_posts() {
    	if ( !get_option( 'cvp_theme_add_ctf_to_posts' ) ) {
    		global $wpdb;
    		$wpdb->query( "INSERT INTO {$wpdb->postmeta} (post_id,meta_key,meta_value)
      SELECT ID, 'cvp_published_year', STR_TO_DATE(post_date_gmt,'%Y')
      FROM {$wpdb->posts} WHERE {$wpdb->posts}.post_type = 'post' AND {$wpdb->posts}.post_status = 'publish'" );
    		add_option( 'cvp_theme_add_ctf_to_posts', 1, '', false );
    	}
    }
    add_action( 'save_post', 'cvp_theme_add_ctf_to_new_posts' );
    function cvp_theme_add_ctf_to_new_posts( $post_id ) {
    	if ( wp_is_post_revision( $post_id ) )
    		return;
    	update_post_meta( $post_id, 'cvp_published_year', get_the_date( 'Y', $post_id ) );
    }
    // End code
    
  • Step 2: Create a new View to show the years list, and allow visitors to filter posts by year.
    In Admin area, click Content Views > Add New menu item. In Filter Settings tab of the View, select Custom Fields in Advance group, then click Add New button. A new field will be added, please select options as same as here:

    Content Views Pro - live filter by year

Then you can save the View, and add View shortcode to where you want to display the yearly archives.

Best regards,

Shuffle Filter – remove scroll bar in “Group by Taxonomy” type (checkboxes)

With the Shuffle Filter feature, you can show categories, tags and custom taxonomies as options in several types to filter result. When you show options as checkboxes, the scrollbar will be shown if there are a lot of options (see demo).
To show all options without scrollbar, Please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

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

Best regards,

WooCommerce – add ‘Out of stock’ text on products

Content Views Pro helps you to show WooCommerce products in grid and list layout easily.
For products which you don’t have in stock anymore, you might want to show the “Out of stock” text. To do that, please add this code to file functions.php in the theme’s folder (or install this plugin Code Snippets then add this code to the “Code” textarea):

// Content Views Pro - Woocommerce: Display Out of Stock badge
add_action( 'pt_cv_item_extra_html', 'cvp_item_extra_html_wofs' );
function cvp_item_extra_html_wofs( $post_id ) {
	$product = wc_get_product( $post_id );
	if ( is_object( $product ) ) {
		if ( !$product->is_in_stock() ) {
			echo '<div class="out-of-stock">Out of stock</div>';
		}
	}
}

Best regards,

Prevent same posts from showing in multiple Views on same page

You can show as many Views on a page as you want. Due to the “Filter Settings” configuration of the View, the View will return list of posts. There is a possible case that a same post appear in different Views, because it matches the filter settings of these Views.
In case you want to prevent same posts from showing in multiple Views on same page, please add this code to file functions.php in the theme’s folder (or install this plugin Code Snippets then add this code to the “Code” textarea):

// Content Views Pro - prevent same posts appear in multi Views on same page
$GLOBALS['cvp_shown_posts'] = array();
add_action( 'pt_cv_after_process_item', 'cvp_theme_after_process_item1' );
function cvp_theme_after_process_item1() {	
	if ( isset( $GLOBALS[ 'cv_posts' ] ) ) {
		$GLOBALS['cvp_shown_posts'] = array_merge( $GLOBALS['cvp_shown_posts'], array_keys( $GLOBALS[ 'cv_posts' ] ) );
	}
}
add_filter( 'pt_cv_post__not_in', 'cvp_theme_post__not_in1', 100, 2 );
function cvp_theme_post__not_in1( $args, $settings ) {	
	$args = array_merge( $args, $GLOBALS['cvp_shown_posts'] );
	return $args;
} // end

Best regards,

Live Filter – set default sort option

With the Live Filter feature in Pro version, you can show sort options in frontend, to help your users to sort content themselves.
To set the default sort option, please add this code to Custom JS field (the right textarea) in Content Views >> Settings page:

if (!window.location.search) {
    var viewid = 'VIEW_ID', default_sort = 'SORT_VALUE';
    if ($('[data-sid="' + viewid + '"] [name="_orderby"]').val() == '') {
        $('[data-sid="' + viewid + '"] [name="_orderby"]').val(default_sort).trigger('change');
    }
}

then:

  • replace VIEW_ID with ID of your View
  • replace SORT_VALUE with the sort option you want to set as default, it can be title, date, or custom field key (to get correct custom field key, select that field from the live filter, the URL will change to ?_orderby=FIELD_KEY, then copy the FIELD_KEY in URL).

Best regards,