Live Filter – translate text of the Submit, Reset button

With Content Views Pro 5.3.2 and before, you can translate text of the Submit, Reset button using the translation feature of WordPress (read more).

Since Content Views Pro 5.3.3 and after, you can translate text of these buttons quickly and easily using JavaScript variables. Please add this code to Custom JS field (the right textarea) in Content Views >> Settings page:

window.cvp_lf_submit_text = 'Your Submit Text';
window.cvp_lf_reset_text = 'Your Reset Text';

Best regards,

Show Custom Field – show more info of ACF post object

Content Views Pro helps you to show custom fields easily.
When showing a post object custom field of the Advanced Custom Fields plugin, Content Views Pro will show the title of the object by default.
To show more info of the object, 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):

add_filter( 'pt_cv_acf_post_object_html', 'cvp_theme_acf_post_object_html', 100, 2 );
/**
 * Content Views Pro - show more info of ACF post object
 * @param string $args The output of this ACF field (default output is the post title)
 * @param object $post The post object
 * @return string
 */
function cvp_theme_acf_post_object_html( $args, $post ) {
	global $pt_cv_id;
	if ( $pt_cv_id === 'VIEW_ID' ) {
		// For example: show thumbnail before title
		$args = get_the_post_thumbnail( $post->ID ) . $args;
	}

	return $args;
}

(replace VIEW_ID with ID of your View)

Best regards,

Add “title” attribute to links

For SEO purposes, many researches state that title attribute might not be given much weight in ranking.
For user’s experience, the title attribute can provide descriptive text (or supplementary information) to the link.

To add title attribute to links in grid or list of Content Views, 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 Title attribute to images
add_filter( 'wp_get_attachment_image_attributes', 'cv_add_tilte_for_image', 100, 3 );
function cv_add_tilte_for_image( $attr, $attachment, $size ) {
	global $post;
	if ( isset( $post->post_title ) ) {
		$attr[ 'title' ] = $post->post_title;
	}
	return $attr;
}
// Content Views Pro - add Title attribute to links
add_filter( 'pt_cv_field_href_attrs', 'cvp_theme_add_title_to_links', 100, 3 );
function cvp_theme_add_title_to_links( $custom_attr, $open_in, $oargs = array()  ) {
	global $post;
	if ( isset( $post->post_title ) ) {
		$custom_attr[] = "title='{$post->post_title}'";
	}
	return $custom_attr;
}

Best regards,

WooCommerce – Hide product is restricted to members of WooCommerce Memberships plugin

Content Views Pro helps you to show any WooCommerce products easily.

This document is used to hide product is restricted to members of WooCommerce Memberships plugin.

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 - Hide product is restricted to members of WooCommerce Memberships
add_filter( 'pt_cv_show_this_post', 'cvp_theme_support_woomembership', 100, 1 );
function cvp_theme_support_woomembership( $args ) {
	if ( wc_memberships_is_product_viewing_restricted( $args->ID ) || wc_memberships_is_post_content_restricted( $args->ID ) ) {
		$args = 0;
	}
	return $args;
}

Best regards,

Add translation of View with Polylang plugin

The Polylang plugin helps you to create multilingual WordPress website.
And our Content Views Pro plugin helps you to show WordPress content of these languages easily.
For most case, you only need to create one View for all languages (read more).
But sometimes you need to create each View for each language, that is supported by Content Views Pro too.

Set language for a View

  • In the admin Content Views > All Views page, mouse over the View which you want to set language, click Edit Language:
    CVP with Polylang - edit view language
  • It will navigate you to a page, where you can select language of the View. After finishing, please click the Update button.

Add translation of a View

For example, you have a View in English, now you want to create the same purpose View in Deutsch, please follow these steps:

  • In the admin Content Views > All Views page, click on the plus “+” icon to add a translation of a View:
    CVP with Polylang - add translation of View
  • Enter the title of the translation View, then click Publish button:
    CVP with Polylang - add title of the translation View
  • The translation View will be created, click the
    [Content Views] Filter Posts Now
    button:
    CVP with Polylang - edit the translation View
  • Notice: This step and below step are required. If not, the translation View won’t be created successfully.

  • It will navigate to the View settings page, change settings there to filter content in new language, then click the Save button:
    CVP with Polylang - filter content of new language

Best regards,

Zigzag thumbnail vertically

Content Views helps you to show the thumbnail image of posts easily without coding.
In the Pro version, you can show thumbnail zigzag vertically (see demo). Here is how to do that with 2 simple clicks:

  • Under “Display Settings” tab, select the option Show thumbnail on the left/right of text of Format
  • Select the checkbox Alternate thumbnail position

CVPro - Vertical zigzag thumbnail


Customization

If you want zigzag thumbnails to touch each other in an edge, like this:
zigzag thumbnail touch in an edge
Please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

@media (min-width: 992px) {
#pt-cv-view-VIEW_ID .pt-cv-thumbnail {width: 50%!important; margin-bottom: 0!important;}
#pt-cv-view-VIEW_ID .pt-cv-content-item {padding-bottom: 0!important}
#pt-cv-view-VIEW_ID .pt-cv-title {padding-top: 30px}
}

(replace VIEW_ID with ID of your View)

Notice: This customization only works with the Grid layout.

Live Filter – show checkboxes and radio buttons horizontally in rows and columns (instead of vertical list)

To show Live Filter checkboxes and radio buttons in rows and columns (instead of vertical list), please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

.cvp-live-filter,
.cvp-live-filter label {
    display: block!important
}

.cvp-live-filter .checkbox,
.cvp-live-filter .radio {
    display: inline-block;
    width: 33%;
}

/* on mobile */
@media (max-width: 768px) {
    .cvp-live-filter .checkbox,
    .cvp-live-filter .radio {
        width: 50% !important;
    }
}

Please replace 33% by another value to change the number of columns.

To use above styles for specific View only, please replace

.cvp-live-filter

above with

.cvp-live-filter[data-sid="VIEW_ID"]

(replace VIEW_ID with ID of your View)

Best regards,

Lightbox – change background color, opacity, close icon, etc.

Change background color and opacity around the lightbox:

#cvpboxOverlay {
    background: #000 !important;
    opacity: 0.5 !important;
}

Change the border of the lightbox:

#cvpboxLoadedContent {
    border: 5px solid #000 !important;
}

Change the close icon:

#cvpboxClose {
    background: url(URL_OF_YOUR_CLOSE_ICON_HERE) !important;
}

Lightbox of thumbnail: change title font-size, color, etc.

#cvpboxTitle {
    font-size: 20px;
    color: #ccc;
    font-family: Arial, serif;
}

Pagination – trigger custom Javascript action after clicking a pagination number

Content Views and Content Views Pro helps you to show posts, pages, etc. with pagination easily.

To trigger custom Javascript action after clicking a pagination number, please use this Javascript code:

$('body').on('pt-cv-pagination-finished pt-cv-pagination-finished-simple', function(e, pages_holder, $loaded_content) {
    // add your JS code here
});

It works with Ajax load-more and infinite scrolling pagination too. Your event will be triggered after the new page finishes loading.

Best regards,