Responsive Slider Shortcode

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

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

Responsive Slider

"Responsive Slider is a versatile WordPress plugin that allows you to create stunning, fully responsive image sliders. Enhance your website's visual appeal and interactivity in a few clicks."

★★★★✩ (34) Active Installs: 5000+ Tested with: 4.5.30 PHP Version: false

Included Shortcodes:

• [responsive_slider]

Responsive Slider [responsive_slider] Shortcode

The Responsive Slider shortcode is a practical tool for displaying a series of images in a dynamic, easy-to-navigate format. This shortcode fetches ‘slides’ post type in ascending order. It generates a responsive slider with each slide featuring a post thumbnail and title. If a slide link URL is set, the thumbnail and title will link to it. The output is a visually engaging slider that enhances user interaction on your site.

Shortcode: [responsive_slider]

Examples and Usage

Basic example – A simple usage of the responsive slider shortcode without any parameters. This will display all slides in ascending order based on the menu order.

[responsive_slider /]

PHP Function Code

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

Shortcode line:

add_shortcode( 'responsive_slider', 'responsive_slider' );

Shortcode PHP function:

function responsive_slider() {

	$slides = new WP_Query( array( 'post_type' => 'slides', 'order' => 'ASC', 'orderby' => 'menu_order' ) );

	$slider = '';
	
	if ( $slides->have_posts() ) :
		
		$slider = '<div class="responsive-slider flexslider">';
		
			$slider .= '<ul class="slides">';
				
			while ( $slides->have_posts() ) : $slides->the_post();
			
				$slider .= '<li>';
				   
					$slider .= '<div id="slide-' . get_the_ID() . '" class="slide">';
						
						global $post;
						
							if ( has_post_thumbnail() ) {

								if ( get_post_meta( $post->ID, "_slide_link_url", true ) ) 
									$slider .= '<a href="' . get_post_meta( $post->ID, "_slide_link_url", true ) . '" title="' .  the_title_attribute ( array( 'echo' => 0 ) ) . '" >';

									$slider .= get_the_post_thumbnail( $post->ID, 'slide-thumbnail', array( 'class' => 'slide-thumbnail' ) );

								if ( get_post_meta( $post->ID, "_slide_link_url", true ) ) 
									$slider .= '</a>';

							}
						
						$slider .= '<h2 class="slide-title"><a href="' . get_post_meta( $post->ID, "_slide_link_url", true ) . '" title="' . the_title_attribute ( array( 'echo' => 0 ) ) . '" >' . get_the_title() . '</a></h2>';
					
					$slider .= '</div><!-- #slide-x -->';
				
				$slider .= '</li>';
				
			endwhile;
			
			$slider .= '</ul>';
			
		$slider .= '</div><!-- #featured-content -->';
	
	endif;

	wp_reset_query();

	return $slider;
}

Code file location:

responsive-slider/responsive-slider/responsive-slider.php

Conclusion

Now that you’ve learned how to embed the Responsive Slider Plugin shortcode, 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.