Below, you’ll find a detailed guide on how to add the Webico Slider Flatsome Addons 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 Webico Slider Flatsome Addons Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Webico Slider Flatsome Addons Plugin and the shortcodes it provides:
"Webico Slider Flatsome Addons is a dynamic plugin designed to enhance your website with stunning sliders. It seamlessly integrates with the Flatsome theme, offering visually appealing features."
- [wbc_image]
- [wbc_slider_tgdd]
Webico Slider Flatsome Addons [wbc_image] Shortcode
The ‘wbc_image’ shortcode from the webico-slider-flatsome-addons plugin is designed to display images with a variety of customizable features. It allows you to set the image ID, overlay, hover effects, size, and position. You can also enable animations, lightbox, and parallax effects. If no image ID is provided, it prompts to upload an image. This shortcode also supports link insertion, with target attributes and video linking capabilities.
Shortcode: [wbc_image]
Parameters
Here is a list of all possible wbc_image shortcode parameters and attributes:
_id– Generated unique identifier for the image.id– The ID of the image to be displayed.org_img– The original image source.caption– Image caption, if any.animate– Animation effect for the image.animate_delay– Delay time before the animation starts.lightbox– If set, the image will open in a lightbox on click.height– The height of the image.text– Text to be displayed with the image.image_overlay– Overlay color for the image.image_hover– Hover effect for the image.image_hover_alt– Alternate hover effect for the image.image_size– Size of the image to be displayed.icon– Icon to be displayed with the image.width– Width of the image.margin– Margin around the image.position_x– Horizontal position of the image.position_x__sm– Horizontal position of the image on small screens.position_x__md– Horizontal position of the image on medium screens.position_y– Vertical position of the image.position_y__sm– Vertical position of the image on small screens.position_y__md– Vertical position of the image on medium screens.depth– Box shadow depth around the image.parallax– Parallax effect for the image.depth_hover– Box shadow depth around the image on hover.link– Link to be opened on image click.target– Specifies where to open the linked document.
Examples and Usage
Basic Example – Displaying an image using the ‘wbc_image’ shortcode.
[wbc_image id="123" /]This shortcode will display the image with the ID of 123 on your website. The ‘id’ attribute corresponds to the ID of the image in your WordPress media library.
Advanced Examples
Displaying an image with a caption, and specifying the image size.
[wbc_image id="123" caption="true" image_size="medium" /]This shortcode will display the image with the ID of 123, with its caption, and the image size will be medium.
Displaying an image with a lightbox effect and custom overlay color.
[wbc_image id="123" lightbox="true" image_overlay="rgba(255,0,0,0.5)" /]This shortcode will display the image with the ID of 123 with a lightbox effect. When the image is clicked, it will open in a lightbox. The ‘image_overlay’ attribute specifies the color of the overlay that will appear on the image. In this example, the overlay color is set to a semi-transparent red.
PHP Function Code
In case you have difficulties debugging what causing issues with [wbc_image] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'wbc_image', 'wbc_image' );Shortcode PHP function:
function wbc_image( $atts, $content = null ) {
extract( shortcode_atts( array(
'_id' => 'image_' . rand(),
'id' => '',
'org_img' => '',
'caption' => '',
'animate' => '',
'animate_delay' => '',
'lightbox' => '',
'height' => '',
'text' => '',
'image_overlay' => '',
'image_hover' => '',
'image_hover_alt' => '',
'image_size' => 'large',
'icon' => '',
'width' => '',
'margin' => '',
'position_x' => '',
'position_x__sm' => '',
'position_x__md' => '',
'position_y' => '',
'position_y__sm' => '',
'position_y__md' => '',
'depth' => '',
'parallax' => '',
'depth_hover' => '',
'link' => '',
'target' => '_self',
), $atts ) );
if ( empty( $id ) ) {
return '<div class="uxb-no-content uxb-image">Upload Image...</div>';
}
// Ensure key existence when builder setting is
// not touched, to extract responsive widths.
if ( ! array_key_exists( 'width', $atts ) ) {
$atts['width'] = '100';
}
$classes = array();
$classes_inner = array( 'img-inner' );
$classes_img = array();
$image_meta = wp_prepare_attachment_for_js( $id );
$link_atts = array( 'target' => $target );
if ( is_numeric( $id ) ) {
if ( ! $org_img ) {
$org_img = wp_get_attachment_image_src( $id, 'large' );
$org_img = $org_img[0];
}
if ( $caption && $caption == 'true' ) {
$caption = $image_meta['caption'];
}
} else {
if ( ! $org_img ) {
$org_img = $id;
}
}
// If caption is enabled.
$link_start = '';
$link_end = '';
$link_class = '';
if ( $link ) {
if ( strpos( $link, 'watch?v=' ) !== false ) {
$icon = 'icon-play';
$link_class = 'open-video';
if ( ! $image_overlay ) {
$image_overlay = 'rgba(0,0,0,.2)';
}
}
$link_start = '<a class="' . $link_class . '" href="' . $link . '"' . flatsome_parse_target_rel( $link_atts ) . '>';
$link_end = '</a>';
} elseif ( $lightbox ) {
$link_start = '<a class="image-lightbox lightbox-gallery" href="' . $org_img . '" title="' . $caption . '">';
$link_end = '</a>';
}
// Set positions
if ( function_exists( 'ux_builder_is_active' ) && ux_builder_is_active() ) {
// Do not add positions if builder is active.
// They will be set by the onChange handler.
} else {
$classes[] = flatsome_position_classes( 'x', $position_x, $position_x__sm, $position_x__md );
$classes[] = flatsome_position_classes( 'y', $position_y, $position_y__sm, $position_y__md );
}
if ( $image_hover ) {
$classes_inner[] = 'image-' . $image_hover;
}
if ( $image_hover_alt ) {
$classes_inner[] = 'image-' . $image_hover_alt;
}
if ( $height ) {
$classes_inner[] = 'image-cover';
}
if ( $depth ) {
$classes_inner[] = 'box-shadow-' . $depth;
}
if ( $depth_hover ) {
$classes_inner[] = 'box-shadow-' . $depth_hover . '-hover';
}
// Add Parallax Attribute.
if ( $parallax ) {
$parallax = 'data-parallax-fade="true" data-parallax="' . $parallax . '"';
}
// Set image height.
$css_image_height = array(
array( 'attribute' => 'padding-top', 'value' => $height ),
array( 'attribute' => 'margin', 'value' => $margin ),
);
$classes = implode( " ", $classes );
$classes_inner = implode( " ", $classes_inner );
$classes_img = implode( " ", $classes_img );
ob_start();
?>
<div class="img has-hover <?php echo $classes; ?>" id="<?php echo $_id; ?>">
<?php echo $link_start; ?>
<?php if ( $parallax ) echo '<div ' . $parallax . '>'; ?>
<?php if ( $animate ) echo '<div data-animate="' . $animate . '">'; ?>
<div class="<?php echo $classes_inner; ?> dark" <?php echo get_shortcode_inline_css( $css_image_height ); ?>>
<?php echo flatsome_get_image( $id, $image_size, $caption ); ?>
<?php if ( $image_overlay ) { ?>
<div class="overlay" style="background-color: <?php echo $image_overlay; ?>"></div>
<?php } ?>
<?php if ( $icon ) { ?>
<div class="absolute no-click x50 y50 md-x50 md-y50 lg-x50 lg-y50 text-shadow-2">
<div class="overlay-icon">
<i class="icon-play"></i>
</div>
</div>
<?php } ?>
</div>
<div class="hidden TextCaption"><?php echo $text; ?></div>
<?php if ( $animate ) echo '</div>'; ?>
<?php if ( $parallax ) echo '</div>'; ?>
<?php echo $link_end; ?>
<?php
$args = array(
'width' => array(
'selector' => '',
'property' => 'width',
'unit' => '%',
),
);
echo ux_builder_element_style_tag( $_id, $args, $atts );
?>
</div>
<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
}
Code file location:
webico-slider-flatsome-addons/webico-slider-flatsome-addons/shortcodes/wbc_slider.phpWebico Slider Flatsome Addons [wbc_slider_tgdd] Shortcode
The webico-slider-flatsome-addons shortcode is used to create a customizable slider on your WordPress site. It allows for a wide range of adjustments including slide alignment, navigation style and size, autoplay, and more.
Shortcode: [wbc_slider_tgdd]
Parameters
Here is a list of all possible wbc_slider_tgdd shortcode parameters and attributes:
_id– Unique identifier of the slider.timer– Time in milliseconds between automatic slide transitions.bullets– Toggles the display of navigation bullets.visibility– Controls the visibility of the slider.type– Determines the type of transition between slides.thumbnail– Determines whether to display thumbnails or not.bullet_style– Defines the style of navigation bullets.auto_slide– Enables or disables automatic slide transitions.auto_height– Adjusts the height of the slider automatically.bg_color– Sets the background color of the slider.text_color– Sets the color of the text within the slider.caption_height– Sets the height of the caption area.slide_align– Aligns the slide content to the left, right or center.style– Determines the overall style of the slider.slide_width– Sets the width of the slide.arrows– Toggles the display of navigation arrows.pause_hover– Pauses automatic slide transitions on hover.hide_nav– Hides the navigation of the slider.nav_style– Defines the style of navigation.nav_color– Sets the color of the navigation elements.nav_size– Defines the size of navigation elements.nav_pos– Determines the position of navigation elements.infinitive– Enables or disables infinite looping of slides.freescroll– Enables or disables free scrolling.parallax– Enables or disables the parallax effect.margin– Sets the margin around the slider.columns– Determines the number of columns in the slider.height– Sets the height of the slider.rtl– Enables or disables right-to-left slide transitions.draggable– Enables or disables the ability to drag slides.friction– Determines the amount of friction applied to slide transitions.selectedattraction– Controls the speed of movement towards a selected slide.threshold– Sets the pixel distance needed to initiate a slide drag.mobile– Determines whether the slider is displayed on mobile devices.
Examples and Usage
Basic Example – The shortcode displays a slider with default parameters. This includes a timer of 6000 milliseconds, bullets enabled, auto slide and auto height enabled, background color set to white, text color set to dark grey, and so on.
[wbc_slider_tgdd /]Advanced Examples
Using the shortcode to customize a slider by specifying certain parameters. This includes setting the timer to 5000 milliseconds, disabling bullets, setting auto slide and auto height to false, changing the background color to black, and the text color to white.
[wbc_slider_tgdd timer="5000" bullets="false" auto_slide="false" auto_height="false" bg_color="#000" text_color="#fff" /]Another advanced usage of the shortcode is to create a slider with a unique ID, set the type to fade, disable navigation arrows, enable pause on hover, set the navigation style to square, navigation color to dark, and navigation size to small.
[wbc_slider_tgdd _id="uniqueSlider1" type="fade" arrows="false" pause_hover="true" nav_style="square" nav_color="dark" nav_size="small" /]PHP Function Code
In case you have difficulties debugging what causing issues with [wbc_slider_tgdd] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode("wbc_slider_tgdd", "wbc_shortcode_ux_slider_tgdd");Shortcode PHP function:
function wbc_shortcode_ux_slider_tgdd($atts, $content=null) {
extract( shortcode_atts( array(
'_id' => 'wbcslider-'.rand(),
'timer' => '6000',
'bullets' => 'true',
'visibility' => '',
'type' => 'slide',
'thumbnail' => false,
'bullet_style' => '',
'auto_slide' => 'true',
'auto_height' => 'true',
'bg_color' => '#fff',
'text_color' => '#333',
'caption_height' => '45px',
'slide_align' => 'center',
'style' => 'normal',
'slide_width' => '',
'arrows' => 'true',
'pause_hover' => 'true',
'hide_nav' => '',
'nav_style' => 'circle',
'nav_color' => 'light',
'nav_size' => 'large',
'nav_pos' => '',
'infinitive' => 'true',
'freescroll' => 'false',
'parallax' => '0',
'margin' => '',
'columns' => '1',
'height' => '',
'rtl' => 'false',
'draggable' => 'true',
'friction' => '0.6',
'selectedattraction' => '0.1',
'threshold' => '5',
// Derpicated
'mobile' => 'true',
), $atts ) );
// Stop if visibility is hidden
if($visibility == 'hidden') return;
ob_start();
$classes = array('slider');
if ($type == 'fade') $classes[] = 'slider-type-'.$type;
// Hide if mobile is set to false
if($mobile !== 'true' && !$visibility) {$visibility = 'hide-for-small';}
// Bullet style
if($bullet_style) $classes[] = 'slider-nav-dots-'.$bullet_style;
// Nav style
if($nav_style) $classes[] = 'slider-nav-'.$nav_style;
// Nav size
if($nav_size) $classes[] = 'slider-nav-'.$nav_size;
// Nav Color
if($nav_color) $classes[] = 'slider-nav-'.$nav_color;
// Nav Position
if($nav_pos) $classes[] = 'slider-nav-'.$nav_pos;
// Add timer
if($auto_slide == 'true') $auto_slide = $timer;
// Add Slider style
if($style) $classes[] = 'slider-style-'.$style;
// Always show Nav if set
if($hide_nav == 'true') {$classes[] = 'slider-show-nav';}
// Slider Nav visebility
$is_arrows = 'true';
$is_bullets = 'true';
if($arrows == 'false') $is_arrows = 'false';
if($bullets == 'false') $is_bullets = 'false';
if(is_rtl()) $rtl = 'true';
$classes = implode(" ", $classes);
// Inline CSS
$css_args = array(
'bg_color' => array(
'attribute' => 'background-color',
'value' => $bg_color,
),
'margin' => array(
'attribute' => 'margin-bottom',
'value' => $margin,
)
);
$args = array(
'margin' => array(
'selector' => '',
'property' => 'margin-bottom',
),
);
?>
<div class="wbcslider_tgdd slider-wrapper relative <?php echo $visibility; ?>" id="<?php echo $_id; ?>" <?php echo get_shortcode_inline_css($css_args); ?>>
<div class="wbcslider-main <?php echo $classes; ?>"
data-flickity-options='{
"cellAlign": "<?php echo $slide_align; ?>",
"imagesLoaded": true,
"lazyLoad": 1,
"freeScroll": <?php echo $freescroll; ?>,
"wrapAround": <?php echo $infinitive; ?>,
"autoPlay": <?php echo $auto_slide;?>,
"pauseAutoPlayOnHover" : <?php echo $pause_hover; ?>,
"prevNextButtons": <?php echo $is_arrows; ?>,
"contain" : true,
"adaptiveHeight" : <?php echo $auto_height;?>,
"dragThreshold" : <?php echo $threshold ;?>,
"percentPosition": true,
"pageDots": <?php echo $is_bullets; ?>,
"rightToLeft": <?php echo $rtl; ?>,
"draggable": <?php echo $draggable; ?>,
"selectedAttraction": <?php echo $selectedattraction; ?>,
"parallax" : <?php echo $parallax; ?>,
"friction": <?php echo $friction; ?>
}'
>
<?php echo do_shortcode($content); ?>
</div>
<div class="loading-spin dark large centered"></div>
<div class=" carousel carousel-nav TextCaptions" data-flickity-options='{ "asNavFor": ".wbcslider-main", "contain": true, "pageDots": false }'></div>
<?php echo ux_builder_element_style_tag( $_id, $args, $atts ); ?>
</div>
<style media="screen">
.TextCaptions .flickity-slider{
display: flex;
align-items: center;
justify-content: center;
}
.TextCaptions{
background: #F5F5F5;
position: absolute;
left: 0;
right: 0;
}
.TextCaptions .item{
margin: 0 !important;
padding: 0 !important;
height: <?php echo $caption_height; ?>;
justify-content: center;
align-items: center;
display: flex;
text-align: center;
color: #666;
font-size: 15px;
line-height: 17px;
}
.TextCaptions .item::before {
background-color: #e5e5e5;
content: '';
height: 30px;
position: absolute;
top: calc(50% - 15px);
right: 0;
width: 1px;
}
.TextCaptions .item:last-child:before {
content: "";
background: none;
width: 0
}
.TextCaptions .item.is-nav-selected {
color: #000;
font-weight: 500;
}
.TextCaptions .item.is-nav-selected::after {
background-color: #FF2D38;
content: '';
left: 0;
height: 3px;
position: absolute;
top: 0;
width: 100%;
}
</style>
<!-- .ux-slider-wrapper -->
<?php
$content = ob_get_contents();
ob_end_clean();
return $content;
}
Code file location:
webico-slider-flatsome-addons/webico-slider-flatsome-addons/shortcodes/wbc_slider.phpConclusion
Now that you’ve learned how to embed the Webico Slider Flatsome Addons 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