Pagination – CSS selectors

Content Views helps you to show any posts with pagination easily.

Here are CSS selectors for page number, next/prev button when you want to use your own custom CSS:

/* Page number */
.pt-cv-pagination li a {
    
}

/* Page number - active */
.pt-cv-pagination li.active a {
    
}

Notice: For Pro users, please use the Style Settings tab of View to change color, font, align, transform.

Live Filter – change background and text color of label, submit and reset buttons, and others

Please add this code to Custom CSS field in Content Views >> Settings page, and change the value as your expectation:

the label text

.cvp-live-filter .cvp-label {
    background: red !important;
    color: #fff !important;
    padding: 5px;
}

the Submit button

.cvp-live-button .cvp-live-submit {
    color: #fff !important;
    background-color: #5cb85c !important;
}

the Reset button

.cvp-live-button .cvp-live-reset {
    color: #fff !important;
    background-color: #d9534f !important;
}

the active “Button” type

.cvp-live-filter.cvp-button input[type=radio]:checked+div {
    background: #00aeef !important;
    color: #fff !important;
}

the “Range Slider” filter

# Change the green background color

.cvp-range .irs-bar, .irs-from, .irs-single, .irs-to {background: #20b426 !important;}
.cvp-range .irs-bar {border-color: transparent !important;}

# Change the width of the bar

.irs-with-grid {width: 90%;} /* change the percentage value */

Best regards,

Read More button – add custom class

To add custom class name to the class attribute of the Read More button, please add this code to file functions.php in the directory of your active theme:

// Content Views Pro - Add custom class name to the class attribute of the Read More button
add_filter( 'pt_cv_field_content_readmore_class', 'cvp_theme_field_content_readmore_class', 100, 2 );
function cvp_theme_field_content_readmore_class( $class, $fargs ) {
	$class .= ' ' . 'YOUR_CLASS_HERE';
	return $class;
}

(replace YOUR_CLASS_HERE with your class names)

Best regards,

Show taxonomy term without hyperlink (disable link of taxonomy term)

Content Views helps you to show taxonomy term (category, tag, custom) of post easily without coding.
By default, term name with hyperlink to the term page will be shown.

To show term name without link, 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):

  • For a single View:
    // Content Views Pro - Show term without hyperlink
    add_filter( 'pt_cv_post_term_html', 'cvp_theme_taxonomy_no_link', 100, 2 );
    function cvp_theme_taxonomy_no_link( $args, $term ) {
    	global $pt_cv_id;
    	if ( $pt_cv_id === 'VIEW_ID' ) {
    		$args = $term->name;
    	}
    
    	return $args;
    }
    

    (replace VIEW_ID with ID of the View)

  • For all Views:
    // Content Views Pro - Show term without hyperlink
    add_filter( 'pt_cv_post_term_html', 'cvp_theme_taxonomy_no_link', 100, 2 );
    function cvp_theme_taxonomy_no_link( $args, $term ) {
    	$args = $term->name;
    	return $args;
    }
    

Best regards,

Sorting by Drag & Drop

Content Views Pro helps you to sort your content in many orders. One of them is sorting by drag & drop.

[Notice] Sorting by Drag & Drop:
– NOT work with Shuffle Filter, Live Filter, Replace Layout, Pagination (load more, infinite scrolling).
– work with Grid, Scrollable list and Collapsible list.
– work with (Ajax) Numbered pagination and Normal pagination.

Here are steps to sort content by drag & drop:

  • select Sort by in Filter Settings > Advance
  • select the Drag & Drop option
  • click Show Preview (or Update Preview) button
  • in the Preview panel, drag & drop items as you want
  • click Save button when finish sorting

CVP sort by drag & drop
(click to see full image)

Notice:

If you added specific post ids in the “Include Only” field, you can drag & drop the IDs in the “Include Only” field directly. Posts will be displayed in that order without enabling “Sort By”.

Best regards,

Set custom text for an URL custom field

If you are showing a custom field which has an URL string as value, for example:

http://google.com

Content Views Pro will convert that URL string to a HTML link (anchor tag):
http://google.com

How to use a custom text for the link?
There are 2 possible ways:

1. Manually replace the URL string in the value of custom field by an anchor tag:

<a target="_blank" href="http://google.com">YOUR TEXT HERE</a>

2. Dynamically replace the URL string by an anchor tag using PHP code.
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 - disable auto convert url to link
add_filter( 'pt_cv_wrap_ctf_value', '__return_false' );

// Content Views Pro - Set custom text for an URL custom field
add_filter( 'pt_cv_ctf_value', 'cvp_theme_ctf_url_custom_text', 100, 3 );
function cvp_theme_ctf_url_custom_text( $url, $key, $post ) {
	if ( !empty( $url ) && in_array( $key, array( 'CUSTOM_FIELD_1', 'CUSTOM_FIELD_2', 'CUSTOM_FIELD_3', 'CUSTOM_FIELD_4' ) ) ) {
		if ( !filter_var( $url, FILTER_VALIDATE_URL ) ) {
			$matches = array();
			preg_match( '/href="([^"]+)"/', $url, $matches );
			$url	 = !empty( $matches[ 1 ] ) ? $matches[ 1 ] : $url;
		}

		$url = '<a href="' . esc_url( $url ) . '">Custom Text</a>';
	}

	return $url;
}

(replace CUSTOM_FIELD_1, CUSTOM_FIELD_2, CUSTOM_FIELD_3, CUSTOM_FIELD_4 with your custom field keys. If you have only one custom field, just replace CUSTOM_FIELD_1 with your custom field key.)

Best regards,

Live Filter – force to reload the page on click filter (to fix shortcode is visible in filter result and so on)

By default, the Live filter uses AJAX technique to load filter results. It means the page doesn’t reload, and an asynchronous request is sent to the webserver to retrieve the result.
If the shortcodes of the theme or another plugin are visible in the retrieved result, the reason is these shortcodes are not available (and not executable) in the AJAX request.

To resolve this issue, please add this code to Custom JS field in Content Views >> Settings page:

/* Live Filter force to reload page */
window.cvp_lf_reload_url = true;

The page will reload, and shortcodes will be available and executable in the results.

Extra:

If you want to scroll back to the same position after reload, please add this code to Custom JS field in Content Views >> Settings page:

/* scroll back to the same section after reload */
$("input, select",".cvp-live-filter").on("change",function(){setTimeout(function(){window.cvp_lf_reload_url&&sessionStorage.setItem("cvp_offsettop",$(this).scrollTop())},100)}),$(window).on("load",function(){if($("input, select",".cvp-live-filter").length>0){var t=sessionStorage.getItem("cvp_offsettop");t&&$("html, body").animate({scrollTop:t},500)}});

Best regards,

Add taxonomy term slug (category, tag, custom) to HTML class attribute of post

To add taxonomy term slug (category, tag, custom) to post’s class, please add this code to file functions.php of your active theme:

// Content Views Pro - Add taxonomy term name to post's class
add_filter( 'pt_cv_content_item_class', 'cvp_theme_term_name_as_class', 100, 2 );
function cvp_theme_term_name_as_class( $args, $post_id ) {
	$taxonomies	 = get_taxonomies( '', 'names' );
	$terms		 = wp_get_object_terms( $post_id, $taxonomies );
	foreach ( $terms as $term ) {
		$args[] = sanitize_html_class( "cvp-term-{$term->taxonomy}-{$term->slug}" );
	}

	return $args;
}

Best regards,

Live Filter – set default filter (activate a filter at the beginning)

By default, the “All” option is active for the Checkbox, Radio, Dropdown, Button types of Live Filter.
To activate another option for these types at the beginning, please add this code to Custom JS field in Content Views >> Settings page:

/* Live Filter - set default filter */
function cvp_lf_default_option(term_slug, view_id){
    if (!window.location.search) {
        var $el = $('[value="' + term_slug + '"]', '[data-sid="' + view_id + '"]');
        $($el).attr("checked", true);
        $($el).attr("selected", true);
        $($el).trigger('change');
    }
};
// duplicate the below line for another view, and change values respectively
cvp_lf_default_option('SELECTED_OPTION_HERE', 'VIEW_ID_HERE');

then:

  • replace SELECTED_OPTION_HERE with the value you want to select by default.
    To get that value, please:
    + open the page with Live Filter
    + select the option you want to select by default
    + the URL in browser’s address bar will be changed accordingly and end with:

    /?NAME=VALUE
    

    + copy the VALUE to replace the SELECTED_OPTION_HERE in the code.

    For example, you show categories as filters and want to select the “Business” option by default.
    When you select that option, the URL ends with: /?tx_category=business.
    Then business is VALUE you should copy and put in the code.

  • replace VIEW_ID_HERE with ID of your View.

Best regards,