Below, you’ll find a detailed guide on how to add the Carousel Anything 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 Carousel Anything Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Carousel Anything Plugin and the shortcodes it provides:
"Carousel Anything For WPBakery Page Builder – Touch Slider and Carousel is a versatile plugin that allows users to create stunning and responsive carousels and sliders for their WordPress site."
- [vc_carousel_parent]
- [vc_carousel_child]
- [vc_carousel_image_over_image]
- [vc_carousel_video]
- [vc_carousel_post]
- [vc_carousel_testimonial]
Carousel Anything [vc_carousel_parent] Shortcode
The ‘vc_carousel_parent’ shortcode is part of the Carousel Anything plugin and is used to create a customizable carousel. It allows you to define the number of slides on different devices, auto-play, navigation options, animation, and more.
Shortcode: [vc_carousel_parent]
Parameters
Here is a list of all possible vc_carousel_parent shortcode parameters and attributes:
wdo_slides_on_desk– sets the number of slides shown on desktopswdo_slides_on_tabs– sets the number of slides shown on tabletswdo_slides_on_mob– sets the number of slides shown on mobileswdo_slides_scroll– determines the number of slides to scrollwdo_slide_loop– enables or disables looping of slideswdo_slide_margin– sets the margin between each slidewdo_auto_play– controls whether slides play automaticallywdo_nav_dots– enables or disables navigation dotswdo_nav_arrows– enables or disables navigation arrowswdo_arrow_bg_color– sets the background color of arrowswdo_arrow_color– sets the color of arrowswdo_dots_color– sets the color of navigation dotswdo_slidein_animate– sets the animation effect when slide enterswdo_slideout_animate– sets the animation effect when slide exits
Examples and Usage
Basic example – A basic usage of the shortcode might involve setting the number of slides on different devices. For instance, you may want 5 slides on desktop, 3 on tablets, and 2 on mobile devices. You can achieve this with the following shortcode:
[vc_carousel_parent wdo_slides_on_desk=5 wdo_slides_on_tabs=3 wdo_slides_on_mob=2 /]Advanced examples
For a more advanced usage, you might want to control the scrolling behavior, loop, margin between slides, and autoplay feature. In addition, you can also set the navigation dots and arrows. Here’s an example:
[vc_carousel_parent wdo_slides_on_desk=5 wdo_slides_on_tabs=3 wdo_slides_on_mob=2 wdo_slides_scroll=1 wdo_slide_loop=true wdo_slide_margin=10 wdo_auto_play=true wdo_nav_dots=true wdo_nav_arrows=false /]Furthermore, you can customize the appearance of the carousel by specifying the colors of the navigation arrows and dots. You can also define the slide in and slide out animations. Here’s how you can do it:
[vc_carousel_parent wdo_slides_on_desk=5 wdo_slides_on_tabs=3 wdo_slides_on_mob=2 wdo_arrow_bg_color="#000000" wdo_arrow_color="#ffffff" wdo_dots_color="#ff0000" wdo_slidein_animate="fadeIn" wdo_slideout_animate="fadeOut" /]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_carousel_parent] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vc_carousel_parent', array($this, 'wdo_carousel_parent_render'));Shortcode PHP function:
function wdo_carousel_parent_render($atts, $content = null, $tag) {
wp_enqueue_style( 'wdo-carousel-css', plugin_dir_url( __FILE__ ).'assets/css/owl.carousel.min.css' );
wp_enqueue_style( 'wdo-owl-theme', plugin_dir_url( __FILE__ ).'assets/css/owl.theme.green.css' );
wp_enqueue_style( 'wdo-font-awesome', plugin_dir_url( __FILE__ ).'assets/css/font-awesome.min.css' );
wp_enqueue_style( 'wdo-animate-css', plugin_dir_url( __FILE__ ).'assets/css/animate.css' );
wp_enqueue_script( 'wdo-carousel-js', plugins_url( 'assets/js/owl.carousel.min.js' , __FILE__ ), array('jquery'));
$args = array(
'wdo_slides_on_desk' => '5',
'wdo_slides_on_tabs' => '3',
'wdo_slides_on_mob' => '2',
'wdo_slides_scroll' => '1',
'wdo_slide_loop' => 'true',
'wdo_slide_margin' => '10',
'wdo_auto_play' => 'true',
'wdo_nav_dots' => 'true',
'wdo_nav_arrows' => 'false',
'wdo_arrow_bg_color' => '',
'wdo_arrow_color' => '',
'wdo_dots_color' => '',
'wdo_slidein_animate' => '',
'wdo_slideout_animate' => '',
);
$params = shortcode_atts($args, $atts);
extract($params);
$unique_id = rand(5, 500);
ob_start(); ?>
<style>
.unique-carousel-<?php echo $unique_id; ?> .owl-next, .unique-carousel-<?php echo $unique_id; ?> .owl-prev{
background: <?php echo $wdo_arrow_bg_color; ?> !important;
color: <?php echo $wdo_arrow_color; ?> !important;
}
.unique-carousel-<?php echo $unique_id; ?>.owl-theme .owl-dots .owl-dot.active span, .unique-carousel-<?php echo $unique_id; ?>.owl-theme .owl-dots .owl-dot:hover span{
background: <?php echo $wdo_dots_color; ?> !important;
}
.owl-next, .owl-prev{
top: 40%;
}
</style>
<div class="wdo-carosuel-container unique-carousel-<?php echo $unique_id; ?> owl-carousel owl-theme">
<?php do_shortcode( $content ); ?>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.unique-carousel-<?php echo $unique_id; ?>').owlCarousel({
margin:<?php echo $wdo_slide_margin; ?>,
touchDrag:true,
mouseDrag:true,
animateIn: <?php echo ( isset($wdo_slidein_animate) && $wdo_slidein_animate !='' ) ? '"'.$wdo_slidein_animate.'"' : '""' ; ?>,
animateOut: <?php echo ( isset($wdo_slideout_animate) && $wdo_slideout_animate !='' ) ? '"'.$wdo_slideout_animate.'"' : '""' ; ?>,
video:true,
videoWidth:true,
videoHeight:300,
loop:<?php echo $wdo_slide_loop; ?>,
slideBy:<?php echo $wdo_slides_scroll; ?>,
autoplay:<?php echo $wdo_auto_play; ?>,
nav:<?php echo $wdo_nav_arrows; ?>,
dots:<?php echo $wdo_nav_dots; ?>,
navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
responsive:{
0:{
items:<?php echo $wdo_slides_on_mob; ?>
},
600:{
items:<?php echo $wdo_slides_on_tabs; ?>
},
1000:{
items:<?php echo $wdo_slides_on_desk; ?>
}
}
});
});
</script>
<?php return ob_get_clean();
}
Code file location:
carousel-anything/carousel-anything/plugin.class.phpCarousel Anything [vc_carousel_child] Shortcode
The vc_carousel_child shortcode is a part of the Carousel Anything plugin. It renders child elements within a carousel. This shortcode wraps content within a div, marking it as an item of the carousel. The ‘do_shortcode’ function ensures any nested shortcodes are also processed.
Shortcode: [vc_carousel_child]
Examples and Usage
Basic example – The basic usage of the ‘vc_carousel_child’ shortcode.
[vc_carousel_child]Your content here[/vc_carousel_child]Advanced examples
Using the ‘vc_carousel_child’ shortcode to display nested shortcodes. In this example, the content is another shortcode that is executed within the carousel item.
[vc_carousel_child][another_shortcode param1="value1" param2="value2"][/vc_carousel_child]Using the ‘vc_carousel_child’ shortcode to display HTML content. In this example, the content is a simple paragraph that is displayed within the carousel item.
[vc_carousel_child]Your HTML content here
[/vc_carousel_child]Please note that the ‘vc_carousel_child’ shortcode is a container shortcode, which means it can contain other content or shortcodes within its opening and closing tags. The content within the shortcode is then output within a div with the class ‘item’, which is used to style the carousel item.
PHP Function Code
In case you have difficulties debugging what causing issues with [vc_carousel_child] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vc_carousel_child', array($this, 'wdo_carousel_child_render'));Shortcode PHP function:
function wdo_carousel_child_render($atts, $content = null, $tag) {
extract( shortcode_atts( array(
), $atts ) );
?>
<div class="item">
<?php echo do_shortcode( $content ); ?>
</div>
<?php
}
Code file location:
carousel-anything/carousel-anything/plugin.class.phpCarousel Anything [vc_carousel_image_over_image] Shortcode
The ‘vc_carousel_image_over_image’ shortcode from the Carousel Anything plugin allows users to display two images in a carousel format. It supports various image effects and provides customization options.
Shortcode: [vc_carousel_image_over_image]
Parameters
Here is a list of all possible vc_carousel_image_over_image shortcode parameters and attributes:
wdo_front_image– Defines the main image of the carousel itemwdo_back_image– Specifies the secondary image that appears based on the image effectwdo_caption_url– The URL to which the carousel item links when clickedwdo_url_target– Determines whether the link opens in the same or a new browser tabwdo_image_effect– Decides the visual transition between the front and back images
Examples and Usage
Basic Example – A simple usage of the ‘vc_carousel_image_over_image’ shortcode. This example will display a carousel with a single front and back image.
[vc_carousel_image_over_image wdo_front_image="1" wdo_back_image="2" /]Advanced Examples
Using the shortcode to display a carousel with a front and back image, a caption URL, and a target URL. This example also includes an image effect.
[vc_carousel_image_over_image wdo_front_image="1" wdo_back_image="2" wdo_caption_url="http://example.com" wdo_url_target="_blank" wdo_image_effect="style7" /]Another advanced example of the shortcode, this time using a different image effect.
[vc_carousel_image_over_image wdo_front_image="1" wdo_back_image="2" wdo_caption_url="http://example.com" wdo_url_target="_blank" wdo_image_effect="style8" /]Please note that the values for ‘wdo_front_image’ and ‘wdo_back_image’ should be the ID of the images you want to use. The ‘wdo_caption_url’ and ‘wdo_url_target’ parameters are optional and can be used to add a link to the carousel. The ‘wdo_image_effect’ parameter can be used to apply different effects to the carousel.
PHP Function Code
In case you have difficulties debugging what causing issues with [vc_carousel_image_over_image] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vc_carousel_image_over_image', array($this, 'wdo_carousel_image_over_image_render'));Shortcode PHP function:
function wdo_carousel_image_over_image_render($atts, $content = null, $tag) {
extract( shortcode_atts( array(
'wdo_front_image' => "",
"wdo_back_image" => '',
"wdo_caption_url" => '',
"wdo_url_target" => '',
"wdo_image_effect" => '',
), $atts ) );
if (isset($wdo_front_image) && $wdo_front_image != '') {
$front_image_url = wp_get_attachment_url( $wdo_front_image );
}
if (isset($wdo_back_image) && $wdo_back_image != '') {
$back_image_url = wp_get_attachment_url( $wdo_back_image );
}
wp_enqueue_style( 'wdo-styles-css', plugins_url( 'assets/css/ioi.css' , __FILE__ ));
?>
<div class="item">
<div class="ioi-container">
<div class="ioi-<?php echo $wdo_image_effect; ?>">
<a class="he-box" href="<?php echo $wdo_caption_url; ?>" target="<?php echo $wdo_url_target; ?>">
<div class="box-img">
<?php if ($wdo_image_effect == 'style7'): ?>
<span class="he-over-layer">
<img src="<?php echo $back_image_url; ?> " alt="">
</span>
<?php endif ?>
<?php if ( $wdo_image_effect == 'style8' ): ?>
<span class="he-over-layer"></span>
<?php endif ?>
<img src="<?php echo $front_image_url; ?> " alt="">
<?php if ( $wdo_image_effect == 'style9' ): ?>
<span class="he-over-layer"></span>
<?php endif ?>
</div>
<div class="he-content">
<img src="<?php echo $back_image_url; ?> " alt="">
</div>
</a>
</div>
</div>
</div>
<?php
}
Code file location:
carousel-anything/carousel-anything/plugin.class.phpCarousel Anything [vc_carousel_video] Shortcode
The ‘vc_carousel_video’ shortcode from Carousel-Anything plugin is designed to render video content within a carousel. It extracts video URLs and displays them in an elegant, scrolling format.
Shortcode: [vc_carousel_video]
Parameters
Here is a list of all possible vc_carousel_video shortcode parameters and attributes:
wdo_video_url– the URL of the video to be displayed in the carousel
Examples and Usage
Basic example – Utilize the shortcode to display a video carousel by referencing the video URL.
[vc_carousel_video wdo_video_url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" /]Advanced examples
Use the shortcode to display multiple video carousels by referencing their URLs. This example shows how to use the shortcode multiple times with different video URLs.
[vc_carousel_video wdo_video_url="https://www.youtube.com/watch?v=3tmd-ClpJxA" /]
[vc_carousel_video wdo_video_url="https://www.youtube.com/watch?v=V-_O7nl0Ii0" /]Alternatively, you can display multiple video carousels in a single shortcode by separating the video URLs with a comma. This example shows how to use the shortcode with multiple video URLs.
[vc_carousel_video wdo_video_url="https://www.youtube.com/watch?v=3tmd-ClpJxA, https://www.youtube.com/watch?v=V-_O7nl0Ii0" /]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_carousel_video] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vc_carousel_video', array($this, 'wdo_carousel_video_render'));Shortcode PHP function:
function wdo_carousel_video_render($atts, $content = null, $tag) {
extract( shortcode_atts( array(
'wdo_video_url' => '',
), $atts ) );
?>
<div class="item-video">
<a class="owl-video" href="<?php echo $wdo_video_url; ?>"></a>
</div>
<?php
}
Code file location:
carousel-anything/carousel-anything/plugin.class.phpCarousel Anything [vc_carousel_post] Shortcode
The ‘vc_carousel_post’ shortcode from the Carousel-Anything plugin is designed to display posts in a carousel format. It utilizes various attributes like post style, title font size, description font size, and ‘read more’ text. The shortcode uses the ‘wdo_carousel_post_render’ function to generate the carousel. It extracts shortcode attributes, enqueues the necessary CSS, and sets up a query for the posts to be displayed. The output is a carousel of posts, styled according to the specified parameters.
Shortcode: [vc_carousel_post]
Parameters
Here is a list of all possible vc_carousel_post shortcode parameters and attributes:
wdo_posts_query– specifies the parameters for the posts to be displayedwdo_post_style– designates the style of the post, default is ‘style1’wdo_title_font_size– sets the font size of the post title, default is ’17px’wdo_desc_font_size– defines the font size of the post description, default is ’15px’wdo_read_more_text– sets the text for the ‘Read More’ button, default is ‘Read More’
Examples and Usage
Basic example – Displays a carousel of posts with default settings.
[vc_carousel_post /]Advanced examples
Displays a carousel of posts with a custom number of posts and a specific style.
[vc_carousel_post wdo_posts_query="size:5" wdo_post_style="style2" /]Displays a carousel of posts from specific categories, with custom title and description font sizes, and a custom ‘Read More’ text.
[vc_carousel_post wdo_posts_query="categories:1,2,3" wdo_title_font_size="20px" wdo_desc_font_size="18px" wdo_read_more_text="Continue Reading" /]Displays a carousel of posts with a custom query, a specific style, and custom title and description font sizes.
[vc_carousel_post wdo_posts_query="size:10|categories:4,5,6|tag:wordpress" wdo_post_style="style3" wdo_title_font_size="22px" wdo_desc_font_size="20px" /]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_carousel_post] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vc_carousel_post', array($this, 'wdo_carousel_post_render'));Shortcode PHP function:
function wdo_carousel_post_render($atts, $content = null, $tag) {
extract( shortcode_atts( array(
'wdo_posts_query' => '',
'wdo_post_style' => 'style1',
'wdo_title_font_size' => '17px',
'wdo_desc_font_size' => '15px',
'wdo_read_more_text' => 'Read More',
), $atts ) );
wp_enqueue_style( 'wdo-post-css', plugins_url( 'assets/css/wdo-posts.css' , __FILE__ ));
$wdo_post_query_array = explode('|', $wdo_posts_query);
$query_args = array();
foreach ($wdo_post_query_array as $wdo_query_param) {
$query_params = explode(':', $wdo_query_param);
if ($query_params[0] == 'size') {
$query_args['posts_per_page'] = $query_params[1];
} elseif($query_params[0] == 'categories') {
$query_args['category__in'] = explode(',', $query_params[1]);
} else {
$query_args[$query_params[0]] = $query_params[1];
}
}
$selected_style = dirname(__FILE__).'/includes/post-templates/'.$wdo_post_style.'.php';
$new_query = new WP_Query( $query_args );
if ( $new_query->have_posts() ) { ?>
<?php while ( $new_query->have_posts() ) : $new_query->the_post(); ?>
<div class="item">
<?php include $selected_style; ?>
</div>
<?php endwhile; ?>
<?php } ?>
<?php
}
Code file location:
carousel-anything/carousel-anything/plugin.class.phpCarousel Anything [vc_carousel_testimonial] Shortcode
The ‘vc_carousel_testimonial’ shortcode is a part of the Carousel Anything plugin. It renders testimonials in a carousel format on your WordPress site. This shortcode allows customization of author’s avatar, name, testimonial text, and style. It also includes a CSS file for styling. The testimonial’s style is selected from pre-defined templates.
Shortcode: [vc_carousel_testimonial]
Parameters
Here is a list of all possible vc_carousel_testimonial shortcode parameters and attributes:
wdo_author_avatar– The ID of the author’s avatar imagewdo_author_name– The name of the author of the testimonialwdo_test_text– The text content of the testimonialwdo_testimonial_style– The style of the testimonial, default is ‘style1’
Examples and Usage
Basic example – The basic usage of the ‘vc_carousel_testimonial’ shortcode can be applied to display a testimonial carousel with the author’s avatar, name, and testimonial text. In this example, we will use the default style.
[vc_carousel_testimonial wdo_author_avatar="1" wdo_author_name="John Doe" wdo_test_text="This is a testimonial text." /]Advanced examples
In the advanced usage of the ‘vc_carousel_testimonial’ shortcode, we can change the testimonial style by setting the ‘wdo_testimonial_style’ attribute to a different value. The ‘wdo_author_avatar’ attribute requires an ID of the image uploaded to the WordPress media library.
[vc_carousel_testimonial wdo_author_avatar="34" wdo_author_name="Jane Doe" wdo_test_text="This is another testimonial text." wdo_testimonial_style="style2" /]Additionally, you can use the shortcode multiple times on the same page to display different testimonials. Just make sure to use different avatar IDs, author names, and testimonial texts for each shortcode.
[vc_carousel_testimonial wdo_author_avatar="1" wdo_author_name="John Doe" wdo_test_text="This is a testimonial text." /]
[vc_carousel_testimonial wdo_author_avatar="34" wdo_author_name="Jane Doe" wdo_test_text="This is another testimonial text." /]PHP Function Code
In case you have difficulties debugging what causing issues with [vc_carousel_testimonial] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vc_carousel_testimonial', array($this, 'wdo_carousel_testimonial_render'));Shortcode PHP function:
function wdo_carousel_testimonial_render($atts, $content = null, $tag) {
extract( shortcode_atts( array(
'wdo_author_avatar' => '',
'wdo_author_name' => '',
'wdo_test_text' => '',
'wdo_testimonial_style' => 'style1',
), $atts ) );
if (isset($wdo_author_avatar) && $wdo_author_avatar != '') {
$avatar_url = wp_get_attachment_url( $wdo_author_avatar );
}
wp_enqueue_style( 'wdo-testimonial-css', plugins_url( 'assets/css/wdo-testimonial.css' , __FILE__ ));
$selected_style =dirname(__FILE__).'/includes/testimonial-templates/'.$wdo_testimonial_style.'.php';
?>
<div class="item">
<?php include $selected_style; ?>
</div>
<?php
}
Code file location:
carousel-anything/carousel-anything/plugin.class.phpConclusion
Now that you’ve learned how to embed the Carousel Anything 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.
Leave a Reply