Below, you’ll find a detailed guide on how to add the Slider Responsive Slideshow 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 Slider Responsive Slideshow Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Slider Responsive Slideshow Plugin and the shortcodes it provides:
"Slider Responsive Slideshow is a dynamic WordPress plugin that enhances your website with interactive image sliders and gallery slideshows. The plugin's user-friendly design ensures easy customization and seamless integration."
- [awl-slider]
Slider Responsive Slideshow [awl-slider] Shortcode
The ‘Slider Responsive Slideshow’ shortcode enhances website aesthetics by creating a responsive slideshow. It enables customization of slideshow settings like speed, navigation, and autoplay.
Shortcode: [awl-slider]
Parameters
Here is a list of all possible awl-slider shortcode parameters and attributes:
id– The unique identifier of the sliderslides– Number of slides to showsrspeed– Speed of the slide transitionautoplay– Whether the slideshow plays automaticallynavigation– Whether to show navigation buttonsnavigation_n– Text for the next navigation buttonnavigation_p– Text for the previous navigation buttonauto_height– Whether to adjust height automatically based on contenttouch_slide– Whether to allow touch swipe navigationshow_title– Whether to show the title of each slideshow_desc– Whether to show the description of each slideshow_link– Whether to show a link on each slidelink_text– Text to display on the link of each slidelink_on– Whether to enable navigation through linkstext_align– Alignment of the text on each slidecustom-css– Custom CSS for the slider
Examples and Usage
Basic example – Display a slider by referencing its ID
[awl-slider id=1 /]Advanced examples
Display a slider by referencing its ID and specifying the number of slides, autoplay and navigation parameters.
[awl-slider id=1 slides=3 autoplay=true navigation=false /]Display a slider by referencing its ID and customizing the navigation text, slide speed, and auto height parameters.
[awl-slider id=1 navigation_n="Next Slide" navigation_p="Previous Slide" srspeed=500 auto_height=true /]Display a slider by referencing its ID and specifying the parameters for showing the title, description, and link of the slides.
[awl-slider id=1 show_title=true show_desc=true show_link=true /]Using the shortcode to display a slider by referencing its ID and customizing the text alignment and custom CSS parameters.
[awl-slider id=1 text_align="center" custom-css=".sr-title {color: red;}" /]PHP Function Code
In case you have difficulties debugging what causing issues with [awl-slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'awl-slider', 'awl_slider_responsive_shortcode' );Shortcode PHP function:
function awl_slider_responsive_shortcode( $post_id ) {
ob_start();
wp_enqueue_script( 'awl-owl-carousel-js' );
wp_enqueue_style( 'awl-owl-carousel-css' );
wp_enqueue_style( 'awl-owl-carousel-theme-css' );
wp_enqueue_style( 'awl-owl-carousel-transitions-css' );
$allslidesetting = unserialize( base64_decode( get_post_meta( $post_id['id'], 'awl_sr_settings_' . $post_id['id'], true ) ) );
if ( isset( $allslidesetting['slides'] ) ) {
$slides = $allslidesetting['slides'];
} else {
$slides = '1';
}
if ( isset( $allslidesetting['srspeed'] ) ) {
$srspeed = $allslidesetting['srspeed'];
} else {
$srspeed = '200';
}
if ( isset( $allslidesetting['autoplay'] ) ) {
$autoplay = $allslidesetting['autoplay'];
} else {
$autoplay = 'true';
}
if ( isset( $allslidesetting['navigation'] ) ) {
$navigation = $allslidesetting['navigation'];
} else {
$navigation = 'false';
}
if ( isset( $allslidesetting['navigation_n'] ) ) {
$navigation_n = $allslidesetting['navigation_n'];
} else {
$navigation_n = 'Next';
}
if ( isset( $allslidesetting['navigation_p'] ) ) {
$navigation_p = $allslidesetting['navigation_p'];
} else {
$navigation_p = 'Prev';
}
if ( isset( $allslidesetting['auto_height'] ) ) {
$auto_height = $allslidesetting['auto_height'];
} else {
$auto_height = 'false';
}
if ( isset( $allslidesetting['touch_slide'] ) ) {
$touch_slide = $allslidesetting['touch_slide'];
} else {
$touch_slide = 'true';
}
if ( isset( $allslidesetting['show_title'] ) ) {
$show_title = $allslidesetting['show_title'];
} else {
$show_title = 'false';
}
if ( isset( $allslidesetting['show_desc'] ) ) {
$show_desc = $allslidesetting['show_desc'];
} else {
$show_desc = 'false';
}
if ( isset( $allslidesetting['show_link'] ) ) {
$show_link = $allslidesetting['show_link'];
} else {
$show_link = 'false';
}
if ( isset( $allslidesetting['link_text'] ) ) {
$link_text = $allslidesetting['link_text'];
} else {
$link_text = 'Visit';
}
if ( isset( $allslidesetting['link_on'] ) ) {
$link_on = $allslidesetting['link_on'];
} else {
$link_on = 'false';
}
if ( isset( $allslidesetting['text_align'] ) ) {
$text_align = $allslidesetting['text_align'];
} else {
$text_align = 'center';
}
if ( isset( $allslidesetting['custom-css'] ) ) {
$custom_css = $allslidesetting['custom-css'];
} else {
$custom_css = '';
}
$slider_id = $post_id['id'];
?>
<style>
#sr-slider-<?php echo esc_attr( $slider_id ); ?> .sr-image {
margin: 5px;
}
#sr-slider-<?php echo esc_attr( $slider_id ); ?> .sr-image img {
display: block;
width: 100%;
height: auto;
}
#sr-slider-<?php echo esc_attr( $slider_id ); ?> .sr-title {
text-align: <?php echo esc_html( $text_align ); ?>;
font-weight: bolder;
}
#sr-slider-<?php echo esc_attr( $slider_id ); ?> .sr-desc {
text-align: <?php echo esc_html( $text_align ); ?>;
}
#sr-slider-<?php echo esc_attr( $slider_id ); ?> .sr-image .sr-link {
text-align: <?php echo esc_html( $text_align ); ?>;
}
<?php echo $custom_css; ?>
</style>
<!-- HTML Script Part Start From Here-->
<script>
jQuery(document).ready(function() {
jQuery("#sr-slider-<?php echo esc_js( $slider_id ); ?>").owlCarousel({
// Most important owl features
items : <?php echo esc_js( $slides ); ?>,
//Basic Speeds
slideSpeed : <?php echo esc_js( $srspeed ); ?>,
paginationSpeed : <?php echo esc_js( $srspeed ); ?>,
rewindSpeed : <?php echo esc_js( $srspeed * 2 ); ?>,
//Autoplay
autoPlay : <?php echo esc_js( $autoplay ); ?>,
// Navigation
navigation : <?php echo esc_js( $navigation ); ?>,
navigationText : ["<?php echo esc_js( $navigation_p ); ?>","<?php echo esc_js( $navigation_n ); ?>"],
rewindNav : true,
// Responsive
responsive: true,
responsiveRefreshRate : 200,
responsiveBaseWidth: window,
// CSS Styles
baseClass : "owl-carousel",
theme : "owl-theme",
//Auto height
autoHeight : <?php echo esc_js( $auto_height ); ?>,
//Mouse Events
dragBeforeAnimFinish : true,
mouseDrag : <?php echo esc_js( $touch_slide ); ?>,
touchDrag : <?php echo esc_js( $touch_slide ); ?>,
//Transitions
transitionStyle : "fade",
});
});
</script>
<?php
$allslides = array(
'p' => $post_id['id'],
'post_type' => 'slider_responsive',
'orderby' => 'ASC',
);
$loop = new WP_Query( $allslides );
while ( $loop->have_posts() ) :
$loop->the_post();
$post_id = get_the_ID();
$allslidesetting = unserialize( base64_decode( get_post_meta( $post_id, 'awl_sr_settings_' . $post_id, true ) ) );
// start the sider contents
?>
<div id="sr-slider-<?php echo esc_attr( $slider_id ); ?>">
<?php
if ( isset( $allslidesetting['slide-ids'] ) && count( $allslidesetting['slide-ids'] ) > 0 ) {
$count = 0;
foreach ( $allslidesetting['slide-ids'] as $attachment_id ) {
$slide_link = $allslidesetting['slide-link'][ $count ];
$thumb = wp_get_attachment_image_src( $attachment_id, 'thumb', true );
$thumbnail = wp_get_attachment_image_src( $attachment_id, 'thumbnail', true );
$medium = wp_get_attachment_image_src( $attachment_id, 'medium', true );
$large = wp_get_attachment_image_src( $attachment_id, 'large', true );
$postthumbnail = wp_get_attachment_image_src( $attachment_id, 'post-thumbnail', true );
$attachment_details = get_post( $attachment_id );
$href = get_permalink( $attachment_details->ID );
$src = $attachment_details->guid;
$title = $attachment_details->post_title;
$description = $attachment_details->post_content;
if ( isset( $slidetext ) == 'true' ) {
if ( $slidetextopt == 'title' ) {
$text = $title;
}
if ( $slidetextopt == 'desc' ) {
$text = $description;
}
} else {
$text = $title;
}
?>
<div class="sr-image">
<?php if ( $link_on == 'true' ) { ?>
<a href="<?php echo esc_url( $slide_link ); ?>" target="_new">
<img class="lazyOwl" src="<?php echo esc_url( $thumb[0] ); ?>" alt="<?php echo esc_html( $text ); ?>">
</a>
<?php } else { ?>
<img class="lazyOwl" src="<?php echo esc_url( $thumb[0] ); ?>" alt="<?php echo esc_html( $text ); ?>">
<?php } ?>
<!--Text Below Slide-->
<?php if ( $show_title == 'true' ) { ?>
<div class="sr-title"><?php echo esc_html_e( $title ); ?></div>
<?php } ?>
<?php if ( $show_desc == 'true' ) { ?>
<div class="sr-desc"><?php echo esc_html_e( $description ); ?></div>
<?php } ?>
<?php if ( $show_link == 'true' && $link_on == 'false' ) { ?>
<a href="<?php echo esc_url( $slide_link ); ?>" target="_new">
<div class="sr-link"><?php echo esc_html( $link_text ); ?></div>
</a>
<?php } ?>
<!--Text Below Slide-->
</div>
<?php
$count++;
}// end of attachment foreach
} else {
esc_html_e( 'Sorry! No slides added to the slider shortcode yet. Please add few slide into shortcode', 'slider-responsive-slideshow' );
} // end of if esle of slides avaialble check into slider
?>
</div>
<?php
endwhile;
wp_reset_query();
return ob_get_clean();
}
Code file location:
slider-responsive-slideshow/slider-responsive-slideshow/shortcode.phpConclusion
Now that you’ve learned how to embed the Slider Responsive Slideshow 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.
Leave a Reply