Below, you’ll find a detailed guide on how to add the Slider Pro 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 Slider Pro Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Slider Pro Plugin and the shortcodes it provides:
"Slider Pro is a dynamic WordPress plugin that allows you to effortlessly create, manage, and customize interactive slideshows for your website. With Slider Pro, your content comes to life!"
- [sliderpro_lightbox]
- [sliderpro]
- [sliderpro_slide]
- [sliderpro_slide_element]
Slider Pro [sliderpro_lightbox] Shortcode
The SliderPro Lightbox shortcode allows you to create dynamic sliders with a lightbox effect. It loads necessary scripts, fetches the slider ID, and manages caching.
Shortcode: [sliderpro_lightbox]
Parameters
Here is a list of all possible sliderpro_lightbox shortcode parameters and attributes:
id– A unique identifier for the specific slider.allow_cache– A value that determines whether the slider data should be cached or not.
Examples and Usage
Basic example – Displaying a slider with a specific ID.
[sliderpro_lightbox id=3 /]Advanced Examples
Displaying a slider with a specific ID and disabling the cache. This will ensure that the slider is always loaded from the database and not from the cache, making it useful when the slider content changes frequently.
[sliderpro_lightbox id=3 allow_cache=false /]Using the shortcode to display a slider by referencing both ID and content. The slider will first try to load by ID, but if not found, it will try to load by content.
[sliderpro_lightbox id=3 content="Your content here" /]PHP Function Code
In case you have difficulties debugging what causing issues with [sliderpro_lightbox] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'sliderpro_lightbox', array( $this, 'sliderpro_lightbox_shortcode' ) );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 | function sliderpro_lightbox_shortcode( $atts, $content = null ) { // load the necessary scripts if they were not loaded yet if ( $this->scripts_loaded === false ) { $this->scripts_loaded = true; $this->load_scripts(); } // get the id specified in the shortcode $id = isset( $atts['id'] ) ? $atts['id'] : -1; // store the values for later use $lightbox_sliders = get_option( 'sliderpro_lightbox_sliders' ); // if the slider is set to not be cached, remove it from the array of stored sliders if it's there if ( isset( $lightbox_sliders[ $id ] ) && isset( $atts['allow_cache'] ) && $atts['allow_cache'] === 'false' ) { unset( $lightbox_sliders[ $id ] ); } // if the slider is not found in the array, add it if ( ! isset( $lightbox_sliders[ $id ] ) ) { $lightbox_sliders[ $id ] = array( 'atts' => $atts, 'content' => $content ); update_option( 'sliderpro_lightbox_sliders', $lightbox_sliders ); } return false; } |
Code file location:
sliderpro/sliderpro/public/class-lightbox-slider.phpSlider Pro [sliderpro] Shortcode
The SliderPro shortcode enables the creation and customization of sliders in WordPress. It checks if CSS files are enqueued, displays a warning message if not, and loads the styles. It fetches the slider ID from the shortcode and checks cache allowance. If caching is allowed, it loads the slider from the cache. If not, it creates the slider from scratch, overriding settings with those specified in the shortcode. Shortcode: [sliderpro]
Shortcode: [sliderpro]
Parameters
Here is a list of all possible sliderpro shortcode parameters and attributes:
id– The unique identification number for the slider.allow_cache– Determines if the slider can be cached for faster loading.name– Name of the slider for easy reference and organization.breakpoints– Sets responsive design breakpoints for the slider.settings– Allows custom configuration of slider settings.
Examples and Usage
Basic example – Displaying a slider by referencing its ID.
[sliderpro id=1 /]Advanced examples
Using the shortcode to display a slider by referencing both ID and cache settings. If the ‘allow_cache’ attribute is set to false, the slider will not load from cache.
[sliderpro id=1 allow_cache=false /]Using the shortcode to display a slider by referencing its ID, cache settings, and a custom name. If the ‘name’ attribute is specified, it will override the slider’s default name.
[sliderpro id=1 allow_cache=false name="Custom Name" /]Using the shortcode to display a slider by referencing its ID and custom settings. The settings attribute can be used to specify custom settings for the slider. The value should be a JSON object.
[sliderpro id=1 settings='{"width": 500, "height": 300}' /]Using the shortcode to display a slider with custom slides. The ‘slides’ attribute can be used to specify custom slides for the slider. The value should be a JSON object.
[sliderpro id=1 slides='[{"image": "img1.jpg", "title": "Slide 1"}, {"image": "img2.jpg", "title": "Slide 2"}]' /]PHP Function Code
In case you have difficulties debugging what causing issues with [sliderpro] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'sliderpro', array( $this, 'sliderpro_shortcode' ) );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 | function sliderpro_shortcode( $atts, $content = null ) { // if the CSS file(s) were not enqueued, display a warning message $styles_warning = '<div class="sp-styles-warning" style="width: 450px; background-color: #FFF; color: #F00; border: 1px solid #F00; padding: 10px; font-size: 14px;"> <span style="font-weight: bold;">Warning: The stylesheets were not loaded!</span> You will need to change the <i>Load stylesheets</i> setting from <i>Automatically</i> to <i>On homepage</i> or <i>On all pages</i>. You can set that <a style="text-decoration: underline; color: #F00;" href="' . admin_url( 'admin.php?page=sliderpro-settings' ) . '">here</a>. </div>'; // If styles were not checked, check them now. // This check is necessary because with some themes the shortcodes are parsed before the // 'wp_enqueue_script' action is called. if ( $this->styles_checked === false ) { $this->load_styles(); } // don't show the warning if the styles are loaded if ( $this->styles_loaded === true || is_admin() === true ) { $styles_warning = ''; } // get the id specified in the shortcode $id = isset( $atts['id'] ) ? intval( $atts['id'] ) : -1; // check whether cache is allowed $allow_cache = ( isset( $atts['allow_cache'] ) && $atts['allow_cache'] === 'false' ) ? false : true; $cache_transient_name = 'sliderpro_cache_' . $id; // load the slider from the cache if ( ( $slider_cache = get_transient( $cache_transient_name ) ) !== false && $allow_cache !== false ) { $css_dependencies = $slider_cache['css_dependencies']; $js_dependencies = $slider_cache['js_dependencies']; foreach ( $css_dependencies as $css_dependency ) { wp_enqueue_style( $this->plugin_slug . '-' . $css_dependency . '-style' ); } foreach ( $js_dependencies as $js_dependency ) { $this->add_script_to_load( $this->plugin_slug . '-' . $js_dependency . '-script' ); } $this->js_output .= $slider_cache['js_output']; return $styles_warning . $slider_cache['html_output']; } // parse the inner content of the shortcode $content = do_shortcode( $content ); // get the slider's database data $slider = $this->get_slider( $id ); // if the specified id doesn't return a result, either the slider doesn't exist, or, if // there is inner content added to the shortcode, try to create the slider from scratch if ( $slider === false ) { if ( empty( $content ) ) { return 'A slider with the ID of ' . $id . ' doesn\'t exist.'; } $slider = array( 'settings' => array() ); $slider['name'] = isset( $atts['name'] ) ? $atts['name'] : ''; } // add the id of the slider to the array of slider data if ( ! isset( $slider['id'] ) ) { $slider['id'] = $id; } // override the slider's settings with those specified in the shortcode foreach ( $atts as $key => $value ) { if ( $key === 'breakpoints' ) { $value = json_decode( stripslashes( $value ), true ); } else if ( $value === 'true' ) { $value = true; } else if ( $value === 'false' ) { $value = false; } $slider['settings'][ $key ] = $value; } // analyze the shortcode's content, if any if ( ! empty( $content ) ) { // create an array that will hold additional extra $slides_extra = array(); // counter for the slides for which an index was not specified and will be added at the end of the other slides $end_counter = 1; // get all the added slides $slides_shortcode = do_shortcode( $content ); $slides_shortcode = str_replace( '<br />', '', $slides_shortcode ); $slides_shortcode = explode( '%sp_sep%', $slides_shortcode ); // loop through all the slides added within the shortcode // and add the slide to the slides_extra array foreach ( $slides_shortcode as $slide_shortcode ) { $slide_shortcode = json_decode( stripslashes( trim( $slide_shortcode ) ), true ); if ( ! empty( $slide_shortcode ) ) { $index = $slide_shortcode['settings']['index']; if ( ! is_numeric( $index ) ) { $index .= '_' . $end_counter; $end_counter++; } $slides_extra[ $index ] = $slide_shortcode; } } // loop through the slides added in the database and override the content with that // specified through shortcodes if ( isset( $slider['slides'] ) ) { foreach ( $slider['slides'] as $index => &$slide ) { if ( isset( $slides_extra[ $index ] ) ) { $slide_extra = $slides_extra[ $index ]; foreach ( $slide_extra as $key => $value ) { if ( $key === 'settings' || $key === 'layers' ) { $slide[ $key ] = array_merge( $slide[ $key ], $slide_extra[ $key ] ); } else { $slide[ $key ] = $value; } } unset( $slides_extra[ $index ] ); } } } // add the remaining slides, added through shortcodes, to the end of the slider if ( ! empty( $slides_extra ) ) { if ( ! isset( $slider['slides'] ) ) { $slider['slides'] = array(); } foreach ( $slides_extra as $slide_end ) { array_push( $slider['slides'], $slide_end ); } } } return $styles_warning . $this->output_slider( $slider ); } |
Code file location:
sliderpro/sliderpro/public/class-sliderpro.phpSlider Pro [sliderpro_slide] Shortcode
The SliderPro Slide shortcode is a dynamic tool that creates customizable slides. It parses attributes passed, allowing for diverse post types and taxonomies. The shortcode also processes content, removing line breaks and splitting it into elements. Each element is then checked, with layers and their settings being handled separately. The final slide is returned as a JSON object, ready for display. This shortcode enables dynamic, adaptable slide creation in WordPress.
Shortcode: [sliderpro_slide]
Parameters
Here is a list of all possible sliderpro_slide shortcode parameters and attributes:
index– determines the position of the slide in the sliderposts_post_types– specifies the type of posts to be displayed in the slideposts_taxonomies– defines the taxonomy of the posts in the slidelayer– holds the text content of the slide layerlayer_settings– controls the settings for the slide layer
Examples and Usage
Basic example – A simple usage of the shortcode to display a slide using SliderPro plugin. This shortcode will create a slide at the end of the slider.
[sliderpro_slide index="end" /]Advanced examples
Creating a slide with specific post types and taxonomies. In this example, we are creating a slide with posts of type ‘blog’ and ‘news’ and taxonomies ‘category’ and ‘tag’.
[sliderpro_slide posts_post_types="blog,news" posts_taxonomies="category,tag" /]Adding a layer to the slide. The layer contains text and settings. The settings include the ‘width’ and ‘height’ of the layer.
[sliderpro_slide layer="This is a layer" layer_settings="width:100px,height:50px" /]Combining multiple parameters. This example creates a slide with specific post types, taxonomies and a layer with settings.
[sliderpro_slide posts_post_types="blog,news" posts_taxonomies="category,tag" layer="This is a layer" layer_settings="width:100px,height:50px" /]PHP Function Code
In case you have difficulties debugging what causing issues with [sliderpro_slide] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'sliderpro_slide', array( $this, 'sliderpro_slide_shortcode' ) );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 | function sliderpro_slide_shortcode( $atts, $content = null ) { // initialize the settings $slide = array( 'settings' => array( 'index' => 'end' ) ); // parse the attributes passed if ( ! empty( $atts ) ) { foreach ( $atts as $key => $value ) { if ( $key === 'posts_post_types' || $key === 'posts_taxonomies' ) { $value = explode( ',', $value ); } $slide['settings'][ $key ] = $value; } } $slide_content = do_shortcode( $content ); $slide_content = str_replace( '<br />', '', $slide_content ); $slide_content_elements = explode( '%sp_sep%', $slide_content ); // get the content of the slide foreach ( $slide_content_elements as $element ) { $element = json_decode( stripslashes( trim( $element ) ), true ); if ( ! empty( $element ) ) { foreach ( $element as $key => $value ) { // check if the element is a layer or a different type if ( $key === 'layer' ) { $layer = array( 'text' => $value ); if ( isset( $element['layer_settings'] ) ) { foreach ( $element['layer_settings'] as $layer_setting => $layer_setting_value ) { $layer[ $layer_setting ] = $layer_setting_value; } } if ( ! isset( $slide['layers'] ) ) { $slide['layers'] = array(); } array_push( $slide['layers'], $layer ); } else if ( $key !== 'layer_settings' ) { $slide[ $key ] = $value; } } } } return json_encode( $slide ) . '%sp_sep%'; } |
Code file location:
sliderpro/sliderpro/public/class-sliderpro.phpSlider Pro [sliderpro_slide_element] Shortcode
The SliderPro Slide Element shortcode is used to add or modify slide elements. It processes attributes like ‘name’ and ‘layer’, and returns a JSON-encoded array.
Shortcode: [sliderpro_slide_element]
Parameters
Here is a list of all possible sliderpro_slide_element shortcode parameters and attributes:
name– Defines the type of slide element.layer– Determines whether the slide element is a layer or not.true– Sets the layer to be active.false– Disables the layer feature.preset_styles– Defines the preset styles for the layer, separated by commas.
Examples and Usage
Basic Example – SliderPro Slide Element shortcode allows you to create customized sliders in your WordPress content. Here is a simple example of how to use this shortcode:
[sliderpro_slide_element name="my_slide" layer="true" /]In this example, we are creating a slide element named “my_slide”. We have also set the layer attribute to “true”, this means the slide will have layer settings enabled.
Advanced Examples
SliderPro Slide Element shortcode can also be used with multiple parameters to further customize your slides. Here is an advanced example:
[sliderpro_slide_element name="my_advance_slide" layer="true" preset_styles="style1,style2,style3" /]In the above example, we are creating a slide element named “my_advance_slide” with layer settings enabled. We have also specified multiple preset styles “style1”, “style2”, and “style3”. These styles will be applied to the slide in the order they are listed.
Another advanced example could be using the shortcode to create a slide without layer settings:
[sliderpro_slide_element name="my_simple_slide" layer="false" /]In this example, we are creating a slide named “my_simple_slide” with layer settings disabled. This will create a simple slide without any layered effects.
PHP Function Code
In case you have difficulties debugging what causing issues with [sliderpro_slide_element] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'sliderpro_slide_element', array( $this, 'sliderpro_slide_element_shortcode' ) );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 | function sliderpro_slide_element_shortcode( $atts, $content = null ) { $content = do_shortcode( $content ); $attributes = array( 'layer_settings' => array() ); foreach ( $atts as $key => $value ) { if ( $key === 'name' ) { $attributes[ $atts['name'] ] = $content; } else if ( isset( $atts['name'] ) && $atts['name'] === 'layer' ) { if ( $value === 'true' ) { $value = true; } else if ( $value === 'false' ) { $value = false; } else if ( $key === 'preset_styles' ) { $value = explode( ',', $value ); } $attributes['layer_settings'][ $key ] = $value; } } return json_encode( $attributes ) . '%sp_sep%'; } |
Code file location:
sliderpro/sliderpro/public/class-sliderpro.phpConclusion
Now that you’ve learned how to embed the Slider Pro 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