recent-posts-carousel-wpb.php

<?php
/*
 * Plugin Name: Recent Posts WPBakery Page Builder element
 * Description: Provide a Recent Posts WPBakery Page Builder element for Salient theme
 * Plugin URI: https://www.damiencarbery.com/2025/04/recent-posts-carousel-for-wpbakery-page-builder/
 * Author: Damien Carbery
 * Author URI: https://www.damiencarbery.com
 * Version: 0.1.20250418
 */


defined( 'ABSPATH' ) || exit;


// Initial code inspired by https://github.com/sodawebmedia/sodawebmedia-wpbakery/blob/master/class/class-vc-blockquote.php and 
// reading Recents Posts widget code in Salient Core plugin.
// With docs on:
// https://www.sodawebmedia.com/insights/wpbakery-page-builder-formerly-visual-composer-vc_map-field-examples/
// and https://kb.wpbakery.com/docs/inner-api/vc_map/


add_action('vc_after_init', 'dcwd_add_recent_posts_carousel');
function dcwd_add_recent_posts_carousel() {
	if ( ! class_exists( 'VcDCWDRecentPostsCarousel' ) && class_exists( 'WPBakeryShortCode' ) ) {
		class VcDCWDRecentPostsCarousel extends WPBakeryShortCode {
			protected $shortcode;
			private $slider_height;
			private $posts_per_page;

			function __construct() {
				$this->shortcode = 'dcwd_recent_posts_carousel';
				$this->slider_height = '350';
				$this->posts_per_page = '12';

				add_action( 'init', array( $this, 'create_shortcode' ), 999 );            
				add_shortcode( $this->shortcode, array( $this, 'render_shortcode' ) );
			}        


			public function create_shortcode() {
				// Stop all if VC is not enabled (it should be because we are using a VC hook!).
				if ( !defined( 'WPB_VC_VERSION' ) ) {
					return;
				}        

				// Map blockquote with vc_map()
				vc_map( array(
					'name' => 'Recent Posts carousel',
					'base' => $this->shortcode,
					'description' => '',
					'icon' => 'icon-wpb-images-carousel',
					'category' =>  'Content',
					'params' => array(
						array(
							'type'          => 'textfield',
							'holder'        => 'div',
							'heading'       =>  'Carousel height',
							'param_name'    => 'slider_height',
							'value'         =>  $this->slider_height,
							'description'   =>  'Set height of carousel in pixels.',
						),
						array(
							'type'          => 'textfield',
							'holder'        => 'div',
							'heading'       =>  'Posts to show',
							'param_name'    => 'posts_per_page',
							'value'         =>  $this->posts_per_page,
							'description'   =>  'Number of posts to include in the carousel.',
						),
						array(
							'type'          => 'textfield',
							'heading'       =>  'Element ID',
							'param_name'    => 'element_id',
							'value'         =>  '',
							'description'   =>  'Enter element ID (Note: make sure it is unique and valid).',
							'group'         =>  'Extra',
						),
						array(
							'type'          => 'textfield',
							'heading'       =>  'Extra class name',
							'param_name'    => 'extra_class',
							'value'         =>  '',
							'description'   =>  'Style particular content element differently - add a class name and refer to it in custom CSS.',
							'group'         =>  'Extra',
						),
					),
				));
			}


			public function render_shortcode( $atts, $content, $tag ) {
				$atts = ( shortcode_atts(array(
								'slider_height'   => $this->slider_height,
								'posts_per_page'  => $this->posts_per_page,
								'extra_class'     => '',
								'element_id'      => ''
						), $atts));
				$slider_height = intval( $atts['slider_height'] );
				$posts_per_page = intval( $atts['posts_per_page'] );

				$recentBlogPosts = array(
					'showposts' => $posts_per_page,
					//'category_name' => $category,
					'ignore_sticky_posts' => 1,
					//'offset' => $post_offset,
					//'order' => $order,
					//'orderby' => $orderby,
					// Exclude link post formats.
					'tax_query' => array(
						array(
							'taxonomy' => 'post_format',
							'field' => 'slug',
							'terms' => array('post-format-link'),
							'operator' => 'NOT IN'
						)
					)
				);

				$recent_posts_query = new WP_Query( $recentBlogPosts );
				if ( $recent_posts_query->have_posts() ) {
					ob_start();

					wp_enqueue_script('flickity');
					wp_enqueue_style('flickity');
	?>
<div id="<?php echo esc_attr( $atts['element_id'] ); ?>" class="dcwd-recent-posts-slider_multiple_visible <?php echo esc_attr( $atts['extra_class'] ); ?>" data-columns="4" data-flickity='{ "wrapAround": true, "setGallerySize": false, "autoPlay": true, "prevNextButtons": false, "pageDots": false }' data-height="<?php echo esc_attr( $slider_height ); ?>" data-shadow-hover-type="dark" data-animate-in-effect="none" data-remove-post-date="1" data-remove-post-author="1" data-remove-post-comment-number="1" data-remove-post-nectar-love="1">
<div class="dcwd-recent-posts-slider-inner">
<div class="flickity-viewport">
<div class="flickity-slider">
	<?php
					$i = 0;
					while ( $recent_posts_query->have_posts() ) {
						$recent_posts_query->the_post();

						$featured_img = null;

						if( has_post_thumbnail($post->ID) ) {
							$bg_image_id  = get_post_thumbnail_id($post->ID);
							$image_src    = wp_get_attachment_image_src($bg_image_id, 'full'/*'medium_featured'*/);
							$featured_img = 'style="background-image: url(' . esc_url( $image_src[0] ) . ');"';
						}

	?>
<div class="recent-post-slide post-ref-<?php echo $i; ?>" <?php echo $featured_img; ?>>
	<h3 class="post-ref-<?php echo $i; ?>"><a href="<?php echo esc_url(get_permalink()); ?>" class="full-slide-link"><?php echo esc_html( get_the_title() ); ?></a></h3>
	<a class="recent-post-slide-button large regular  accent-color regular-button" href="<?php echo esc_url(get_permalink()); ?>" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff" ><span>View Item </span></a>
</div>
	<?php
						$i++;
					}
	?>
</div>
</div>
</div>
</div>
<?php
					if ( ! is_admin() ) {
?>
<style>
.dcwd-recent-posts-slider_multiple_visible, .dcwd-recent-posts-slider_multiple_visible .flickity-slider, .dcwd-recent-posts-slider_multiple_visible .recent-post-slide { height: <?php echo esc_attr( $slider_height ); ?>px; }
.dcwd-recent-posts-slider_multiple_visible .recent-post-slide { background-position: center center; background-size: cover; margin-right: 1em; display: flex; flex-wrap: wrap; justify-content: flex-end; flex-direction: column; padding: 1em 3em; text-align: center; }
.dcwd-recent-posts-slider_multiple_visible .recent-post-slide h3 a { color: white; cursor: grab; text-decoration: none; }
.dcwd-recent-posts-slider_multiple_visible .recent-post-slide-button { padding: 15px 35px; margin-top: 20px; background-color: #000; color: #fff; font-size: 14px; text-transform: uppercase; text-decoration: none; }
</style>
<?php
					}
					else {
						// Display items on one line in editor so that it does not spill out of container and under other elements.
?>
.dcwd-recent-posts-slider_multiple_visible .flickity-slider { display: flex; }
<?php
					}

					return ob_get_clean();
				}
		
				return null;
			}
		}

		new VcDCWDRecentPostsCarousel();
	}
}

recent-posts-element-filter.php

add_filter( 'vc_shortcode_output', 'do_recent_posts_autoplay', 10, 4 );
function do_recent_posts_autoplay( $output, $vc_class, $prepared_atts, $shortcode ) {
	if ( 'recent_posts' == $shortcode ) {
		return str_replace( 'data-height="600"', 'data-flickity=\'{ "setGallerySize": false, "autoPlay": true }\' data-height="400"', $output );
	}

	return $output;
}

view-item.css

/* Hide the 'Read Article' text. */
.home .recent-post-container .nectar-button span { font-size: 0 !important; }
/* Replace it with 'View Item' text. */
.home .recent-post-container .nectar-button span::after { content: 'View item'; font-size: 11px !important; }