To change the opacity of background color of any elements on the Style Settings tab,
please follow steps:
- click the “Background Color” button of the element
- then slide the second vertical bar on the pop up box

Best regards,
To change the opacity of background color of any elements on the Style Settings tab,
please follow steps:
Best regards,
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,
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,
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,
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;}
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:top!important}
Best regards,
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,
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:
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,
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:
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,
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,
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.
[pt_view id="VIEW_ID" show="filter" submit_to="URL_OF_RESULT_PAGE"]
[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.
Please add shortcode to the “Text” tab to ensure that shortcode is not modified unexpectedly:
By using this solution, the page will be reloaded when selecting or changing the filter option.
There are 2 ways to do it:
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 in the text field below the “Wrap live filters to a div” checkbox: 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.
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,