Link Media to the file itself, instead of the media page

When showing the Media type by Content Views Pro, by default the media link is URL of the media page where shows:
– the image, if the media is an image
– the player, if the media is an audio or a video
– the title (includes link) of PDF file, if the media is a PDF file

If you want to link the media to its file directly, please add this code to file functions.php in the theme’s folder:


// Content Views Pro - Link Media to direct file, instead of media page
add_filter( 'pt_cv_field_href', 'cvp_theme_link_media_file_directly', 100, 2 );
function cvp_theme_link_media_file_directly( $args, $post ) {
	if ( get_post_type( $post->ID ) === 'attachment' ) {
		$url = wp_get_attachment_url( $post->ID );
		if ( $url ) {
			$args = $url;
		}
	}
	return $args;
}

Best regards,

Live Filter – hide all posts at the beginning

By default, posts will be visible under filters list of Live Filter.
To hide these posts at page load, Please add this code to Custom JS field in Content Views >> Settings page:

/* Live Filter – Hide results at beginning */
var view_id="VIEW_ID",$view=$("#pt-cv-view-"+view_id),$pagination=$(".pt-cv-pagination[data-sid="+view_id+"]").parent();new RegExp($(".cvp-live-filter").map(function(){return $(this).data("name")}).get().join("|")).test(window.location.search)||($view.hide(),$pagination.hide());

Please replace VIEW_ID with ID of your View. Also, ensure there is NO space between quotes.

Best regards,

Pagination – modify label: first, last, prev, next in the Normal pagination (no Ajax)

Please add this code to file functions.php in the theme’s folder:

// Content Views - Modify pagination label: first, last, prev, next
add_filter( 'pt_cv_pagination_label', 'cvp_theme_pagination_text', 100, 1 );
add_filter( 'pt_cv_pagination_text', 'cvp_theme_pagination_text', 100, 1 );
function cvp_theme_pagination_text( $args ) {
	$args[ 'first' ] = 'First_text_here';
	$args[ 'last' ]	 = 'Last_text_here';
	$args[ 'prev' ]	 = 'Previous_text_here';
	$args[ 'next' ]	 = 'Next_text_here';

	return $args;
}

Best regards,

Live Filter – show filters vertically or horizontally

Vertically

To show filter vertically, please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

/* Live Filter - show filters vertically */
.cvp-live-filter {display: block!important;}

Horizontally (next to each other)

To show filter horizontally, please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

/* Live Filter - show filters horizontally */
.cvp-live-filter,.cvp-live-button{display:inline-block!important;vertical-align:baseline!important}

Best regards,

Scrollable list – fade effect (instead of slide)

By default, the Scrollable list uses the slide effect when switching slides.
To use the fade effect, please add this code to Custom CSS field in Content Views >> Settings page:

/* Scrollable list – fade effect */
.pt-cv-carousel .item{transition:opacity ease-in-out .5s!important}.pt-cv-carousel .active.left,.pt-cv-carousel .active.right,.pt-cv-carousel .item{opacity:0!important}.pt-cv-carousel .active,.pt-cv-carousel .next.left,.pt-cv-carousel .prev.right{opacity:1!important}.pt-cv-carousel .active.left,.pt-cv-carousel .active.right,.pt-cv-carousel .next,.pt-cv-carousel .prev{transform:translate3d(0,0,0)!important}

Best regards,

Show the structured data (schema markup) of the WordPress posts list

Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.
You can read more about it here.

This document includes solution to display structured data of the WordPress posts list by Content Views (and Content Views Pro) in JSON-LD format.
This data has a short description of each item in the list, and each description points to a separate details page that is focused entirely on one item, for example:

structured-data

To generate that summary structured data, please add this code to file functions.php in the theme’s folder:

// Content Views - show structured data of the posts list
add_action( 'wp_footer', 'cvp_theme_show_structured_data' );
function cvp_theme_show_structured_data() {
	if ( !empty( $GLOBALS[ 'cv_posts' ] ) ) {
		$list = array();
		foreach ( $GLOBALS[ 'cv_posts' ] as $idx => $post ) {
			$list[] = array(
				"@type"		 => "ListItem",
				"position"	 => $idx + 1,
				"url"		 => get_permalink( $post )
			);
		}

		echo '<script type="application/ld+json">{"@context":"http://schema.org", "@type":"ItemList", "itemListElement":' . json_encode( $list, JSON_UNESCAPED_SLASHES ) . '}</script>';
	}
}

Best regards,

Use a third-party lightbox

Content Views Pro helps you to show posts in a lightbox on clicking the post thumbnail easily (click to see sample).

If you want to use a third-party lightbox, please:

  • install a lightbox plugin you want
  • disable the lightbox in the View (not select the lightbox option in Display Settings >> Others >> Open Item In)

Some lightbox plugins will work with images in our grid/list automatically.

Some other lightbox plugins need manual configuration. The most popular configuration is adding HTML attribute to images. If so, please add this code to file functions.php in the theme’s folder:

// Content Views Pro - Use third party lightbox
add_filter( 'pt_cv_field_href_attrs', 'cvp_theme_use_another_lightbox', 100, 3 );
function cvp_theme_use_another_lightbox( $custom_attr, $open_in, $oargs = array() ) {

	/** For example:
	  $custom_attr[] = 'rel="lightbox"';
	  $custom_attr[] = 'data-rel="iLightbox[gallery-1]"';
	 */

	$custom_attr[] = 'LIGHTBOX_HTML_ATTRIBUTE_HERE';

	return $custom_attr;
}

The LIGHTBOX_HTML_ATTRIBUTE_HERE depends on the third-party lightbox you use.

Best regards,

Add custom text, HTML, … before (or after) the Title, Thumbnail, Content, Meta Fields, Custom Fields

Content Views Pro helps you to show the Title, Thumbnail image, Content, Meta Fields, Custom Fields of any WordPress posts easily.
You might want to show dynamic, custom info before (or after) one of these fields. To do that, please add this code to file functions.php in the theme’s folder:

/**
 * Add extra info before/after the field.
 * @TODO: Remove any line below if you don't need
 */
add_filter( 'pt_cv_item_title', 'cvp_theme_custom_content_to_field', 10, 2 );
add_filter( 'pt_cv_item_thumbnail', 'cvp_theme_custom_content_to_field', 10, 2 );
add_filter( 'pt_cv_item_content', 'cvp_theme_custom_content_to_field', 10, 2 );
add_filter( 'pt_cv_item_meta-fields', 'cvp_theme_custom_content_to_field', 10, 2 );
add_filter( 'pt_cv_item_custom-fields', 'cvp_theme_custom_content_to_field', 10, 2 );

/**
 * The function to add extra content to before (or after) above field
 * @param string $html
 * @param object $post
 * @return string
 */
function cvp_theme_custom_content_to_field( $html, $post ) {

	$position = 'after'; // or 'before' the field

	ob_start();
	// @TODO: Add text, HTML, PHP code (access current post ID by $post->ID)

	$extra = ob_get_clean();
	if ( $position === 'after' ) {
		$html .= $extra;
	} else {
		$html = $extra . $html;
	}

	return $html;
}

Notice: This task requires your coding skills about PHP, HTML.

Best regards,

Live Filter – show the filters and result in different places (for example: filters in sidebar, result in page)

Normally, Live filters will show above the result.
Since Content Views Pro 4.9.0 and Content Views 1.9.9.4, you can show the filters and the result in different places.

1. Show filters in one page, show result in another page (or show filters in sidebar, show results in a page)

  • to show the filters in Sidebar, please add this shortcode to a Text widget in Sidebar:

    [pt_view id="VIEW_ID" show="filter" submit_to="URL_OF_RESULT_PAGE"]
    
  • to show the result in a page, please add this shortcode to the page’s content editor:

    [pt_view id="VIEW_ID" show="result" submit_to="URL_OF_RESULT_PAGE"]
    

Please replace VIEW_ID with ID of your View,
replace URL_OF_RESULT_PAGE with URL of the result page.

The VIEW_ID to show filter and result must be the same. It is NOT possible to use 2 different Views there.

Please add shortcode to the “Text” tab to ensure that shortcode is not modified unexpectedly:
CVP - add shortcode to text tab

By using this solution, the page will be reloaded when selecting or changing the filter option.

2. Show filters on left side, show result on right side of a page

There are 2 ways to do it:

A. With Content Views Pro since 5.8.4

In the “Style Settings” tab, please select the checkbox Wrap live filters to a div,
then enter value for 2 fields as below:

To show the filters on the right side, please use this value for the text field below “Live Filter”: col-md-4 col-sm-6 pull-right

The col-sm-6 value helps to show filters and result on 2 sides on mobile devices. To show filters above result on mobile devices, please remove this value.

B. With Content Views Pro before 5.8.4

If your theme has no Sidebar for a page, you can show filters in the left side, show result in the right side of a page with this code:

<div class="pt-cv-wrapper">
	<div class="row">
		<div class="col-md-4 col-sm-6">
			[pt_view id="VIEW_ID" show="filter"]
		</div>
		<div class="col-md-8 col-sm-6">
			[pt_view id="VIEW_ID" show="result"]
		</div>
	</div>
</div>

You can switch positions of shortcodes to show filters in the right side, show result in the left side.
To change the width of each side, please change the col-md-4 and col-md-8, the sum of numbers must equal to 12.

By using this solution, the page will be reloaded when selecting or changing the filter option.

Best regards,