Below, you’ll find a detailed guide on how to add the YITH Slider for page builders 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 YITH Slider for page builders Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the YITH Slider for page builders Plugin and the shortcodes it provides:
"YITH Slider for Page Builders is a versatile WordPress plugin that allows users to seamlessly create and customize sliders for their web pages. Excellent for enhancing site visuals."
- [yith-slider]
YITH Slider for page builders [yith-slider] Shortcode
The YITH Slider for Page Builders shortcode is a powerful tool that generates a customizable slider within a page. It fetches attributes for the slider, such as slide order, height, background image, position, repeat, size, and color. It also manages slider options like transition type, autoplay, autoplay timing, infinite sliding, slider layout, arrow navigation, and dots navigation. The shortcode then outputs a styled slider, iterating through each slide, applying individual styles and content. It ends with a conditional script to initiate the slider if there’s more than one slide.
Shortcode: [yith-slider]
Parameters
Here is a list of all possible yith-slider shortcode parameters and attributes:
slider– the ID of the slider to be displayed
Examples and Usage
Basic example – Display a slider by referencing its ID
[yith-slider slider=1 /]Advanced examples
Display a slider by referencing its ID and customize the slide order, post status, and number of posts.
[yith-slider slider=1 post_type="yith_slide" numberposts=-1 post_status="publish" orderby="meta_value_num" order="ASC" meta_key="slide_order" /]Display a slider by referencing its ID and customize the slide’s background image, position, repeat, size, and color.
[yith-slider slider=1 slide_bg="url-to-image" slide_bg_position="center" slide_bg_repeat="no-repeat" slide_bg_size="cover" slide_bg_color="#ffffff" /]Display a slider by referencing its ID and customize the slider’s autoplay, transition type, infinite sliding, layout, arrow navigation, and dot navigation.
[yith-slider slider=1 autoplay="autoplay" transition_type="fade" infinite_sliding="infinite-sliding" slider_layout="alignfull" arrow_nav="true" dots_nav="true" /]PHP Function Code
In case you have difficulties debugging what causing issues with [yith-slider] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'yith-slider', 'yith_slider_for_page_builders_slider_sc' );Shortcode PHP function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 | function yith_slider_for_page_builders_slider_sc( $atts ) { // Attributes. $atts = shortcode_atts( array( 'slider' => '', ), $atts ); $slider_args = array( 'post_parent' => $atts['slider'], 'post_type' => 'yith_slide', 'numberposts' => - 1, 'post_status' => 'publish', 'orderby' => 'meta_value_num', 'order' => 'ASC', 'meta_key' => 'slide_order', // phpcs:ignore ); $slides = get_children( $slider_args ); $slider_style = ''; $slide_container_height = get_post_meta( $atts['slider'], 'yith_slider_control_heigth', true ); if ( '' !== $slide_container_height ) { $slider_style .= 'height: ' . $slide_container_height . 'px; '; } if ( has_post_thumbnail( $atts['slider'] ) ) { $slide_bg = get_the_post_thumbnail_url( $atts['slider'] ); $slider_style .= 'background-image: url(\'' . $slide_bg . '\'); '; $slide_bg_position = get_post_meta( $atts['slider'], 'single_slide_background_position', true ); if ( '' !== $slide_bg_position ) { $slider_style .= 'background-position: ' . $slide_bg_position . '; '; } else { $slider_style .= 'background-position: center; '; } $slide_bg_repeat = get_post_meta( $atts['slider'], 'single_slide_background_repeat', true ); if ( '' !== $slide_bg_repeat ) { $slider_style .= 'background-repeat: ' . $slide_bg_repeat . '; '; } else { $slider_style .= 'background-repeat: no-repeat; '; } $slide_bg_size = get_post_meta( $atts['slider'], 'single_slide_background_size', true ); if ( '' !== $slide_bg_size ) { $slider_style .= 'background-size: ' . $slide_bg_size . '; '; } else { $slider_style .= 'background-size: cover; '; } } $slide_bg_color = get_post_meta( $atts['slider'], 'single_slide_background_color', true ); $slider_style .= 'background-color: ' . $slide_bg_color . '; '; // Slider option. $transition_type = get_post_meta( $atts['slider'], 'yith_slider_control_animation_type', true ) === 'fade'; $autoplay = get_post_meta( $atts['slider'], 'yith_slider_control_autoplay', true ) === 'autoplay'; $autoplay_timing = get_post_meta( $atts['slider'], 'yith_slider_control_autoplay_timing', true ); $infinite_sliding = get_post_meta( $atts['slider'], 'yith_slider_control_infinite_sliding', true ) === 'infinite-sliding'; $slider_layout = get_post_meta( $atts['slider'], 'yith_slider_control_slider_layout', true ); $center_mode = false; if ( '' === $slider_layout ) { $slider_layout = 'alignfull'; } $arrow_nav = get_post_meta( $atts['slider'], 'yith_slider_control_navigation_style', true ); $arrow_nav_style = ''; if ( '' === $arrow_nav || 'none' === $arrow_nav ) { $arrow_nav = false; } elseif ( 'prev_next_slides' === $arrow_nav ) { $arrow_nav = false; $center_mode = true; } else { $arrow_nav_style = $arrow_nav; $arrow_nav = true; } $dots_nav = get_post_meta( $atts['slider'], 'yith_slider_control_dots_navigation_style', true ); $dots_nav_style = ''; if ( '' === $dots_nav || 'none' === $dots_nav ) { $dots_nav = false; } else { $dots_nav_style = $dots_nav; $dots_nav = true; } $data_slick_options = array( 'autoplay' => $autoplay, 'fade' => $transition_type, 'infinite' => $infinite_sliding, 'arrows' => $arrow_nav, 'prevArrow' => '<button type="button" class="yith-slider-nav slide-prev ' . $arrow_nav_style . '">Previous</button>', 'nextArrow' => '<button type="button" class="yith-slider-nav slide-next ' . $arrow_nav_style . '">Next</button>', 'centerMode' => $center_mode, 'dots' => $dots_nav, 'dotsClass' => 'yith-slider-dots ' . $dots_nav_style, 'autoplaySpeed' => $autoplay_timing, 'rtl' => is_rtl(), ); $data_slick_options = wp_json_encode( $data_slick_options ); $data_slick_attr = _wp_specialchars( $data_slick_options, ENT_QUOTES, 'UTF-8', true ); ob_start(); ?> <div data-slick="<?php echo $data_slick_attr; // phpcs:ignore WordPress.Security.EscapeOutput ?>" class="yith-slider <?php echo esc_attr( $slider_layout ); ?> yith-slider-<?php echo esc_attr( $atts['slider'] ); ?>" style="<?php echo esc_attr( $slider_style ); ?>"> <?php foreach ( $slides as $slide ) : $slide_id = $slide->ID; $style = 'style="'; if ( has_post_thumbnail( $slide_id ) ) { $slide_bg = get_the_post_thumbnail_url( $slide_id ); $style .= 'background-image: url(\'' . $slide_bg . '\'); '; $slide_bg_position = get_post_meta( $slide_id, 'single_slide_background_position', true ); if ( '' !== $slide_bg_position ) { $style .= 'background-position: ' . $slide_bg_position . '; '; } else { $style .= 'background-position: center; '; } $slide_bg_repeat = get_post_meta( $slide_id, 'single_slide_background_repeat', true ); if ( '' !== $slide_bg_repeat ) { $style .= 'background-repeat: ' . $slide_bg_repeat . '; '; } else { $style .= 'background-repeat: no-repeat; '; } $slide_bg_size = get_post_meta( $slide_id, 'single_slide_background_size', true ); if ( '' !== $slide_bg_size ) { $style .= 'background-size: ' . $slide_bg_size . '; '; } else { $style .= 'background-size: cover; '; } } $slide_bg_color = get_post_meta( $slide_id, 'single_slide_background_color', true ); $style .= 'background-color: ' . $slide_bg_color . '; '; if ( 1 === count( $slides ) ) { $style .= 'display: block; float: none; '; } $style .= '"'; $slide_container_max_width = get_post_meta( $atts['slider'], 'yith_slider_control_container_max_width', true ); if ( '' !== $slide_container_max_width ) { $slide_container_max_width = '<style type="text/css"> .slide-id-' . esc_attr( $slide_id ) . ' .slide-container { max-width: ' . $slide_container_max_width . 'px;}</style>'; } ?> <div class="yith-slider-slide slide-id-<?php echo esc_attr( $slide_id ); ?> slick-slide" <?php echo $style; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>> <?php echo $slide_container_max_width; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> <div class="slide-container"> <?php echo do_shortcode( do_blocks( $slide->post_content ) ); ?> </div> </div> <?php endforeach; ?> </div> <?php if ( count( $slides ) > 1 ) : ?> <script> jQuery( function( $ ) { $('.yith-slider-<?php echo esc_attr( $atts['slider'] ); ?>').slick(); }); </script> <?php endif; return ob_get_clean();} |
Code file location:
yith-slider-for-page-builders/yith-slider-for-page-builders/templates/shortcodes/yith-slider.phpConclusion
Now that you’ve learned how to embed the YITH Slider for page builders 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