WPShortcode

WP Featured Content and Slider Shortcodes

Below, you’ll find a detailed guide on how to add the WP Featured Content and Slider Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WP Featured Content and Slider Plugin shortcodes not to show or not to work correctly.

Before starting, here is an overview of the WP Featured Content and Slider Plugin and the shortcodes it provides:

Plugin Icon
WP Featured Content and Slider

"WP Featured Content and Slider is a dynamic WordPress plugin designed to highlight and smoothly display your best content and images in a captivating slider format."

★★★★★ (8) Active Installs: 3000+ Tested with: 6.3.2 PHP Version: false
Included Shortcodes:
  • [featured-content]
  • [featured-content-slider]

WP Featured Content and Slider [featured-content] Shortcode

The WP-Featured-Content-and-Slider plugin shortcode provides a customizable featured content section. It enables users to display content in a grid layout, control visibility of content, and customize design elements.

Shortcode: [featured-content]

Parameters

Here is a list of all possible featured-content shortcode parameters and attributes:

  • limit – sets the maximum number of posts to display.
  • post_type – defines the type of posts to show.
  • taxonomy – specifies the taxonomy to use.
  • grid – determines the number of columns in the grid.
  • cat_id – filters posts by specific category ID.
  • design – selects the design template for the posts.
  • fa_icon_color – sets the color of the Font Awesome icon.
  • image_style – chooses the style of the featured images.
  • show_content – decides whether to display the post content or not.
  • display_read_more – controls the visibility of the read more link.
  • content_words_limit – sets the maximum number of words for post content.
  • extra_class – adds extra CSS classes to the post wrapper.
  • className – assigns additional CSS classes to the post.
  • align – sets the alignment of the posts.

Examples and Usage

Basic example – Display featured content with default settings

[featured-content]

Advanced examples

Display featured content limited to 5 posts, with a grid layout of 3 columns, and a design style of ‘design-2’

[featured-content limit=5 grid=3 design='design-2']

Display featured content of a specific post type and taxonomy, with a custom icon color and image style

[featured-content post_type='custom_post_type' taxonomy='custom_taxonomy' fa_icon_color='#ff0000' image_style='circle']

Display featured content with a specific category ID, and limit the content words to 30. Also, disable the ‘read more’ button and content display

[featured-content cat_id='10' content_words_limit=30 display_read_more='false' show_content='false']

Display featured content with extra CSS classes for additional customization

[featured-content extra_class='my-custom-class another-custom-class']

PHP Function Code

In case you have difficulties debugging what causing issues with [featured-content] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('featured-content', 'wpfcas_featuredc_shortcode');

Shortcode PHP function:

function wpfcas_featuredc_shortcode( $atts) {

	// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
	if( isset( $_POST['action'] ) && ($_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json') ) {
		return "[featured-content]";
	}

	// Grobal variable
	global $post;

	extract(shortcode_atts(array(
		'limit'					=> -1,
		'post_type'				=> WPFCAS_POST_TYPE,
		'taxonomy'				=> WPFCAS_CAT,
		'grid'					=> 1,
		'cat_id'				=> '',
		'design'				=> 'design-1',
		'fa_icon_color'			=> '#3ab0e2',
		'image_style'			=> 'square',
		'show_content'			=> 'true',
		'display_read_more'		=> 'true',
		'content_words_limit'	=> 50,
		'extra_class'			=> '',
		'className'				=> '',
		'align'					=> '',
	), $atts, 'featured-content'));

	$shortcode_designs		= wpfcas_designs();
	$design					= array_key_exists( trim( $design ), $shortcode_designs ) ? $design	: 'design-1';
	$post_type				= ! empty( $post_type )				? $post_type					: WPFCAS_POST_TYPE;
	$taxonomy				= ! empty( $taxonomy )				? $taxonomy						: WPFCAS_CAT;
	$grid					= ( ! empty( $grid ) && is_numeric($grid) && $grid <= 4 )	? $grid	: 1;
	$image_style			= ! empty( $image_style )			? $image_style					: 'square';
	$limit					= ! empty( $limit )					? $limit						: -1;
	$cat_id					= ! empty( $cat_id )				? explode( ',', $cat_id )		: '';
	$fa_icon_color			= ! empty( $fa_icon_color )			? $fa_icon_color				: '#3ab0e2';
	$content_words_limit	= ! empty( $content_words_limit )	? $content_words_limit			: 50;
	$display_read_more		= ( $display_read_more == 'false' )	? 'false'						: 'true';
	$show_content			= ( $show_content == 'false' )		? 'false'						: 'true';
	$align					= ! empty( $align )					? 'align'.$align				: '';
	$extra_class			= $extra_class .' '. $align .' '. $className;
	$extra_class			= wpfcas_sanitize_html_classes( $extra_class );
	$grid_clmn				= wpfcas_column( $grid );

	// Design file paths
	$design_file 	= WPFCAS_DIR . '/templates/' . $design . '.php';
	$design_file 	= (file_exists($design_file)) ? $design_file : '';

	// Post Type argument
	$args = array ( 
			'post_type'			=> $post_type, 
			'orderby'			=> 'post_date', 
			'order'				=> 'DESC',
			'posts_per_page'	=> $limit,
		);

	if($cat_id != "") {
					$args['tax_query'] = array(
											array(
													'taxonomy'	=> $taxonomy,
													'field'		=> 'term_id',
													'terms'		=> $cat_id
												));
	}

	// Count variable
	$count = 0;

	// WP Query
	$query = new WP_Query($args);

	ob_start(); ?>
	<div class="featured-content-list <?php echo esc_attr($design.' '.$extra_class); ?>">
		<?php while ($query->have_posts()) : $query->the_post();

			$count++;
			$sliderurl	= get_post_meta( $post->ID, 'wpfcas_slide_link', true );
			$wpfcasIcon = get_post_meta( $post->ID, 'wpfcas_slide_icon', true );
			$feat_image	= wp_get_attachment_url( get_post_thumbnail_id() );
			$fcontent	= wpfcas_get_post_excerpt( $post->ID, get_the_content(), $content_words_limit, '...' );

			// CSS Class 
			$css_class = 'featured-content';
			$css_class .= ( $count % $grid  == 1 ) ? ' first' : '';
			$css_class .= ' wp-medium-'.esc_attr($grid_clmn).' wpcolumns';

			// Include shortcode html file
			if( $design_file ) {
				include( $design_file );
			}

		endwhile; ?>
	</div>

	<?php wp_reset_postdata();

	return ob_get_clean();
}

Code file location:

wp-featured-content-and-slider/wp-featured-content-and-slider/includes/shortcode/wpfcas-grid.php

WP Featured Content and Slider [featured-content-slider] Shortcode

The ‘featured-content-slider’ shortcode from the wp-featured-content-and-slider plugin displays a customizable content slider. It allows users to showcase featured posts with various design options. This shortcode supports multiple page builders and provides a plethora of customization options such as post type, taxonomy, design, icon color, image style, content word limit, and more. It also includes slider configurations like dots, arrows, autoplay, speed, and autoplay interval. Shortcode: [featured-content-slider]

Shortcode: [featured-content-slider]

Parameters

Here is a list of all possible featured-content-slider shortcode parameters and attributes:

  • limit – determines the number of posts to show
  • cat_id – allows for filtering posts by category ID
  • post_type – specifies the type of post to display
  • taxonomy – taxonomy to be used for the posts
  • design – sets the design template for the slider
  • fa_icon_color – sets the color of the Font Awesome icon
  • image_style – determines the image style, such as ‘square’
  • display_read_more – toggles the display of a ‘Read More’ link
  • slides_column – sets the number of columns in the slider
  • slides_scroll – sets the number of slides to scroll at a time
  • dots – toggles the display of navigation dots
  • arrows – toggles the display of navigation arrows
  • autoplay – toggles automatic sliding of posts
  • autoplay_interval – sets the interval between auto slides
  • speed – defines the speed of the slide transition
  • content_words_limit – limits the number of words in the post content
  • show_content – toggles the display of post content
  • extra_class – allows addition of extra CSS classes
  • className – sets the class name of the shortcode
  • align – sets the alignment of the slider

Examples and Usage

Basic example – Displaying a slider with featured content using the default settings.

[featured-content-slider]

Advanced examples

Customizing the slider to display only posts from a specific category (category ID 5), limit the number of posts to 10, and use a custom design template (design-2).

[featured-content-slider cat_id=5 limit=10 design="design-2"]

Creating a slider that doesn’t autoplay, displays two slides at a time, and scrolls two slides per navigation click.

[featured-content-slider autoplay="false" slides_column=2 slides_scroll=2]

Displaying a slider with square images, no arrows or dots for navigation, and a custom speed of 500 milliseconds.

[featured-content-slider image_style="square" arrows="false" dots="false" speed=500]

Customizing the slider to display posts from a custom post type (my_custom_post_type), use a custom taxonomy (my_custom_taxonomy), and limit the content to 100 words.

[featured-content-slider post_type="my_custom_post_type" taxonomy="my_custom_taxonomy" content_words_limit=100]

PHP Function Code

In case you have difficulties debugging what causing issues with [featured-content-slider] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('featured-content-slider', 'wpfcas_featuredcslider_shortcode');

Shortcode PHP function:

function wpfcas_featuredcslider_shortcode( $atts) {

	// SiteOrigin Page Builder Gutenberg Block Tweak - Do not Display Preview
	if( isset( $_POST['action'] ) && ($_POST['action'] == 'so_panels_layout_block_preview' || $_POST['action'] == 'so_panels_builder_content_json') ) {
		return "[featured-content-slider]";
	}

	// Divi Frontend Builder - Do not Display Preview
	if( function_exists( 'et_core_is_fb_enabled' ) && isset( $_POST['is_fb_preview'] ) && isset( $_POST['shortcode'] ) ) {
		return '<div class="wpfcas-builder-shrt-prev">
					<div class="wpfcas-builder-shrt-title"><span>'.esc_html__('Featured Slider - Shortcode', 'wp-featured-content-and-slider').'</span></div>
					featured-content-slider
				</div>';
	}

	// Fusion Builder Live Editor - Do not Display Preview
	if( class_exists( 'FusionBuilder' ) && (( isset( $_GET['builder'] ) && $_GET['builder'] == 'true' ) || ( isset( $_POST['action'] ) && $_POST['action'] == 'get_shortcode_render' )) ) {
		return '<div class="wpfcas-builder-shrt-prev">
					<div class="wpfcas-builder-shrt-title"><span>'.esc_html__('Featured Slider - Shortcode', 'wp-featured-content-and-slider').'</span></div>
					featured-content-slider
				</div>';
	}

	// Grobal variable
	global $post;

	extract(shortcode_atts(array(
		'limit'					=> -1,
		'cat_id'				=> '',
		'post_type'				=> WPFCAS_POST_TYPE,
		'taxonomy'				=> WPFCAS_CAT,
		'design'				=> 'design-1',
		'fa_icon_color'			=> '#3ab0e2',
		'image_style'			=> 'square',
		'display_read_more'		=> 'true',
		'slides_column'			=> 3,
		'slides_scroll'			=> 1,
		'dots'					=> 'true',
		'arrows'				=> 'true',
		'autoplay'				=> 'true',
		'autoplay_interval'		=> 3000,
		'speed'					=> 300,
		'content_words_limit'	=> 50,
		'show_content'			=> 'true',
		'extra_class'			=> '',
		'className'				=> '',
		'align'					=> '',
	), $atts, 'featured-content-slider'));
	
	$shortcode_designs		= wpfcas_designs();
	$design					= array_key_exists( trim( $design ), $shortcode_designs ) ? $design	: 'design-1';
	$post_type				= ! empty( $post_type )				? $post_type				: WPFCAS_POST_TYPE;
	$taxonomy				= ! empty( $taxonomy )				? $taxonomy					: WPFCAS_CAT;
	$limit					= ! empty( $limit )					? $limit					: -1;
	$cat_id					= ! empty( $cat_id )				? explode( ',', $cat_id )	: '';
	$fa_icon_color			= ! empty( $fa_icon_color )			? $fa_icon_color			: '#3ab0e2';
	$image_style			= ! empty( $image_style )			? $image_style				: 'square';
	$show_content			= ! empty( $show_content )			? $show_content				: 'true';
	$content_words_limit	= ! empty( $content_words_limit )	? $content_words_limit		: 50;
	$slides_column			= ! empty( $slides_column )			? $slides_column			: 3;
	$slides_scroll			= ! empty( $slides_scroll )			? $slides_scroll			: 1;
	$autoplay_interval		= ! empty( $autoplay_interval )		? $autoplay_interval		: 3000;
	$speed					= ! empty( $speed )					? $speed					: 300;
	$display_read_more		= ( $display_read_more == 'false' )	? 'false'					: 'true';
	$dots					= ( $dots == 'false' )				? 'false'					: 'true';
	$arrows					= ( $arrows == 'false' )			? 'false'					: 'true';
	$autoplay				= ( $autoplay == 'false' )			? 'false'					: 'true';
	$align					= ! empty( $align )					? 'align'.$align			: '';
	$extra_class			= $extra_class .' '. $align .' '. $className;
	$extra_class			= wpfcas_sanitize_html_classes( $extra_class );

	// Slider conf
	$slider_conf = compact( 'dots', 'arrows', 'speed', 'autoplay', 'autoplay_interval', 'slides_column', 'slides_scroll' );

	// Required enqueue_script
	wp_enqueue_script( 'wpos-slick-jquery' );
	wp_enqueue_script( 'wpfcas-public-js' );

	// Design template Paths
	$design_file	= WPFCAS_DIR . '/templates/' . $design . '.php';
	$design_file	= (file_exists($design_file)) ? $design_file : '';

	// Some ariables
	$css_class	= "slider-col-{$slides_column}";
	$unique		= wpfcas_get_unique();

	// Post argument
	$args = array (
		'post_type'			=> $post_type, 
		'orderby'			=> 'post_date', 
		'order'				=> 'DESC',
		'posts_per_page'	=> $limit,
	);

	// Category argument
	if($cat_id != "") {
		$args['tax_query'] = array(
									array(
										'taxonomy'	=> $taxonomy,
										'field'		=> 'term_id',
										'terms'		=> $cat_id
									));
	}

	ob_start();

	//WP Query
	$query = new WP_Query($args); ?>

	<div id="wpfcas-content-slider-<?php echo esc_attr($unique); ?>" class="featured-content-slider <?php echo esc_attr($design.' '.$extra_class); ?>" data-conf="<?php echo htmlspecialchars(json_encode($slider_conf)); ?>">
		 <?php while ($query->have_posts()) : $query->the_post();

			$sliderurl	= get_post_meta( $post->ID, 'wpfcas_slide_link', true );
			$wpfcasIcon = get_post_meta( $post->ID, 'wpfcas_slide_icon', true );
			$feat_image	= wp_get_attachment_url( get_post_thumbnail_id() );
			$fcontent	= wpfcas_get_post_excerpt( $post->ID, get_the_content(), $content_words_limit, '...' );

			// Include shortcode html file
			if( $design_file ) {
				include( $design_file );
			}
		endwhile; ?>

	</div>

	<?php 
	wp_reset_postdata();
	return ob_get_clean();
}

Code file location:

wp-featured-content-and-slider/wp-featured-content-and-slider/includes/shortcode/wpfcas-slider.php

Conclusion

Now that you’ve learned how to embed the WP Featured Content and Slider Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.

Related Shortcodes

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *