Version 4.6
Hi, and thank you for purchasing Slider Pro!
The plugin's admin interface contains inline information, which most of the time should be sufficient for understanding how to use the plugin. However, many details are not covered there, but you can find them covered in this guide.
If you have a question or technical problem that is not covered by this guide, please contact us through the Support Center .
Because an image is worth a thousand words, you might find these video tutorials useful:
The plugin can be installed from the WordPress dashboard, just like any other plugin.
Go to Plugins -> Add New -> Upload -> Browse and select the zip package you downloaded from CodeCanyon, and then click Install Now .
After the plugin is installed and activated, you will see the Slider Pro menu in the admin sidebar.
The plugin provides automatic updates, but in order to benefit from them you need to provide the purchase code you received from CodeCanyon.
In order to find your purchase code, go to http://codecanyon.net/downloads/ and find Slider Pro in your list of purchases. Then, click on the Download button and select License certificate & purchase code .
After you have the purchase code, enter it in the Slider Pro -> Plugin Settings page, in the Purchase Code field and click the Verify Purchase Code button.
Creating sliders is simple and intuitive. Also, the admin area contains inline information that describe the settings and possibilities that the Slider Pro plugin offers. In this chapter we'll take a quick look at the various content types that the slider supports and then we'll take a look at how to publish the slider in your posts and pages.
You can manually specify the images and text in a slider, or you can let the slider to automatically load content (e.g., featured image, post title, excerpt, etc.) from any post type. Two other possibilities provided by the slider is to load photos from Flickr or to load images from a post's [gallery] shortcode.
Also, you can have slides with different content types in the same slider. The content type can be set in the slide's Settings window, or you can directly create a slide with a specific content type from the Add Slide button. More about each slide type, later in this chapter.
You can see six buttons on each slide. These are for: adding an image, thumbnail, layers, caption, HTML content or changing the slide's content type.
If you click on each of these buttons, a certain modal window will be opened, that allow you to make the respective edits.
It consists of 2 sections: the Image section, which allows you to set the slide's main image, and the Link section, which allows you to set a link for the slide's image.
Note: When you select an image from the WordPress Media Library, also select the most appropriate size for it in the Media Library's right sidebar, under ATTACHMENT DISPLAY SETTINGS . You will want to select an image size that is similar to the slide size.
It's similar to the 'Image' editor but it consists of 3 sections: the Thumbnail Image section, which allows you to set and image for the thumbnail, the Thumbnail Link section, which allows you to set a link for the thumbnail image and the Thumbnail Content section, which allows you to add text or any HTML content inside the thumbnails.
If you want to add both text and an image, you can use the [sp_thumbnail_image] shortcode to insert the thumbnail image loaded in the Thumbnail Image field inside the thumbnail content. You could also manually create the image by using HTML.
Thumbnail images can also be created automatically by checking the Auto Thumbnail Images option from the Thumbnails sidebar panel. The Thumbnail Image Size option from the same sidebar panel allows you to select what image version will be loaded as a thumbnail. If you would like to use a different size than those that are available, you can use a plugin, like Simple Image Sizes, that will allow you to create additional size versions for the images.
It allows you to add static or animated layers. You can select from several layer types: paragraph layers, which allow you to add simple text paragraphs, heading layers, which allow you to add headings (e.g., H1, H2, H5, etc.), image layers, for adding images, video layers for adding several supported video types, and DIV layers, for any other HTML content.
After you add a layer, a group of settings will appear for that layer, allowing you to set the layer's position, size, animation effects and more. The name of the settings are intuitive and there's also inline information for those settings that have more complex roles.
It's possible to set the depth of the layers by sorting them in the list of layers from the left side.
It allows you to add a caption for the slide. Captions will be visible one at a time and will be displayed below the slides.
It allows you to add any HTML content. Please note that HTML content added in this section will not be responsive by default. You will need to use custom CSS to make it responsive. If you want your content to be responsive automatically, you can add it in the Layers section, as layers are set to be responsive automatically.
It allows you to change the slide's content type. By default, the Content Type setting is set to Custom Content , which allows you to manually set the slide's background image and all the other content. The Content from Posts option will enable the slide to load featured images and other content from posts, the Images from Post's gallery option will fetch images added through a [gallery] shortcode, and Flickr images will load images from Flickr.
The plugin tries to make it as easy as possible for you to add content, so it offers a direct way to create a certain slide type, populating it with some specific data from the start. All you have to do is hover the Add Slide button and click on the slide type that you want to create.
This will create an empty slide, with no preset content or settings. After the slide was added, you can set a background image for it, html content, add layers, or even change its content type to something else.
To add image slides, hover the Add Slides button and select Image slides . The WordPress Media Loader will be opened, where you can select a single image or multiple images (by holding the CTRL key on PC and Cmd key on Mac).
Note: When you select an image, also select the most appropriate size for it in the Media Library's right sidebar, under ATTACHMENT DISPLAY SETTINGS . You will want to select an image size that is similar to the slide size.
After you select the images, click on the Insert into post button, and one slide for each selected image will be added in the slider.
This will add a single slide in the admin interface, but this single slide will dynamically generate multiple slides in the published slider, based on the set parameters.
When you select this slide type the Content Type setting in the slide's Settings window will automatically be set to Content from posts . Also, in the Image editor, some fields will be automatically populated with data. For example, the [sp_image_src] will be added in the image's Source field and [sp_link_url] in the link's URL field.
[sp_image_src] and [sp_link_url] are dynamic tags and are used for fetching a specific data from the posts that were loaded. You can also use these tags in the Layers and HTML editors. Each of these editors have, in their inline info, a list of the dynamic tags that can be used inside that specific editor.
This is the complete list of dynamic tags for Posts slides:
| Tag | Description |
|---|---|
| [sp_image] | The post's featured image, as an img HTML element. It accepts an optional parameter to specify the size of the image: [sp_image.thumbnail]. Accepted sizes are: full, large, medium, thumbnail. The default value is full. |
| [sp_image_src] | The URL of the post's featured image. It accepts an optional parameter to specify the size of the image: [sp_image_src.thumbnail]. Accepted sizes are: full, large, medium, thumbnail. The default value is full. |
| [sp_image_alt] | The alt text of the post's featured image. |
| [sp_image_title] | The title of the post's featured image. |
| [sp_image_description] | The description of the post's featured image. |
| [sp_image_caption] | The caption of the post's featured image. |
| [sp_title] | The post's title. |
| [sp_link] | The post's link, as an anchor HTML element, with the post's title as the text of the link. |
| [sp_link_url] | The post's link. |
| [sp_date] | The post's date. |
| [sp_excerpt] | The post's excerpt. |
| [sp_content] | The post's content. |
| [sp_category] | The first category that the post is assigned to. |
| [sp_custom.name] | Returns the value from a custom field. The name parameter indicates the name of the custom field. |
This will add a single slide in the admin interface, but this single slide will dynamically generate multiple slides in the published slider, one slide for each image from the [gallery] shortcode.
You just need to drop the slider shortcode in a post that contains a [gallery] shortcode, and the images from the [gallery] will automatically be loaded in the slider. Then, if you want to hide the original gallery, you can add the hide attribute to the [gallery] shortcode: [gallery ids="1,2,3" hide="true"] .
This is the complete list of dynamic tags for Gallery slides:
| Tag | Description |
|---|---|
| [sp_image] | The gallery image, as an img HTML element. It accepts an optional parameter to specify the size of the image: [sp_image.thumbnail]. Accepted sizes are: full, large, medium, thumbnail. The default value is full. |
| [sp_image_src] | The URL of the gallery image. It accepts an optional parameter to specify the size of the image: [sp_image_src.thumbnail]. Accepted sizes are: full, large, medium, thumbnail. The default value is full. |
| [sp_image_alt] | The alt text of the gallery image. |
| [sp_image_title] | The title of the gallery image |
| [sp_image_description] | The description of the gallery image. |
This will add a single slide in the admin interface, but this single slide will dynamically generate multiple slides in the published slider, one slide for each image loaded from Flickr.
First, you need to request an API key from Flickr and then specify it in the API Key field, in the Settings modal window.
This is the complete list of dynamic tags for Flickr slides:
| Tag | Description |
|---|---|
| [sp_image] | The Flickr image, as an img HTML element. It accepts an optional parameter to specify the size of the image: [sp_image.thumbnail]. Accepted sizes are: full, large, medium, thumbnail. The default value is full. |
| [sp_image_src] | The URL of the Flickr image. It accepts an optional parameter to specify the size of the image: [sp_image_src.thumbnail]. Accepted sizes are: square, thumbnail, small, medium, medium_640, large. The default value is medium. |
| [sp_image_description] | The description of the Flickr image. |
| [sp_image_link] | The link of the Flickr image. |
| [sp_date] | The date of the Flickr image. |
| [sp_username] | The username of the image's owner. |
| [sp_user_link] | The link to the profile of the image's owner. |
The slider's general settings can be found in the sidebar of the slider's admin interface. The description of each setting can be seen if you hover the setting's label.
Inside the 'Presets' panel, you can save setting configuration in order to easily reuse them for other sliders. After you decided on a certain configuration you just need to click on the 'Save New' button and then you will be prompted to specify a name for the saved preset. The preset will then be saved and added to the list of saved presets. You can later update the configuration of a certain preset or delete it if you want.
The last panel in the sidebar is for breakpoints. Breakpoints allow you to modify the look of the slider for different window sizes. Each breakpoint allows you to set the width of the window for which the breakpoint will apply, and then add several settings which will override the general settings.
The slider can be published in posts and pages, in widgets, and also in PHP code.
In posts and pages you need to use the shortcode provided in the Slider Pro -> All Sliders page, like this:
[sliderpro id="3"]
In PHP code, you need to use the
do_shortcode()
call and provide the actual shortcode as an argument, like this:
<?php echo do_shortcode( '[sliderpro id="3"]' ); ?>
Note: When you add the slider in PHP code, the plugin won't be able to detect the presence of the slider there so it won't be able to automatically load the necessary CSS files. Because of this, you need to go to the Slider Pro -> Plugin Settings page and set the Load stylesheets setting to On homepage if you load the slider on the homepage or to On all pages if you load the slider in other pages.
The sliders can be previewed directly in the admin area, and you don't have to create or update the slider before previewing the edits you make to the slides or to the general settings.
The plugin offers you the possibility to open any slider inside a lightbox window, as the one in which sliders are previewed in the admin area. To create a lightbox slider, you will use the [sliderpro_lightbox] shortcode instead of [sliderpro]:
[sliderpro_lightbox id="3"]The location in which you insert this shortcode in the page is not important, because the slider will not be rendered in that location; it's only an indication for the plugin that a slider will be opened in that page. In order to indicate the actual location, the element (link, image etc.) that will open the lightbox slider, you need to add the
sliderpro-lightbox-ID class to that element, replacing "ID" with the ID of the slider:
<p>The following <a href="#" class="sliderpro-lightbox-3">link</a> will open the lightbox.</p>
All sliders are automatically cached the first time when they're viewed by a visitor, so next time when someone visits the page, the slider will be served from the cache. This mechanism saves processing time and is especially useful when loading content from posts or external services.
When a slider is updated in the admin area, the cached version of the slider will be deleted. Also, you can deleted all cached sliders from within the Slider Pro -> Plugin Settings page, by clicking on the Clear all cache now button.
If you want to not cache a slider, you can set the allow_cache attribute to false , in the shortcode:
[sliderpro id="3" allow_cache="false"]
Sometimes you want to change the look of the slider or add new functionality, and for this you can use custom CSS and/or custom JavaScript. All your custom code needs to be added in the Slider Pro -> Custom CSS & JS page.
Before adding any custom CSS, it's recommended to give the slider that you want to target a custom class. This can be set in the Custom Class field, in the slider's Appearance sidebar slide.
Note: The custom class name you specify in the Custom Class field doesn't need to include the dot, only the name of the class. For example, you need to enter my-slider , not .my-slider .
After you assigned a custom class to the slider, you can use it in the Custom CSS field, to target that specific slider.
You could use a general selector, like .slider-pro if you want to target all your slider instances.
Just like with custom CSS, you need to assign a custom class to the slider and then use it in your custom code to target that specific slider.
The next chapter offers a presentation of the slider's JavaScript API, which allows you to programatically control the slider. Using this API requires some programming knowledge and familiarity with jQuery.
The public methods below allow you to manipulate the slider using external controls. There are two ways of calling a public method.
The first way is by calling the
sliderPro
plugin and passing the name of the method and additional arguments:
$( '.my-slider' ).sliderPro( 'openSlide', 3 );The first argument represents the name of the method and the second argument represents the value which will be applied. Please note that some methods don't have a second argument. For example:
$( '.my-slider' ).sliderPro( 'nextSlide' );The second way is by getting a reference to the SliderPro instance and calling the method on the instance:
// get a reference to the SliderPro instance
var slider = $( '.my-slider' ).data( 'sliderPro' );
console.log( slider.getTotalSlides() );
slider.gotoPage( 2 );
Here is the list of available methods:
| Method | Description |
|---|---|
| gotoSlide( index ) | Scrolls to the slide at the specified index. |
| nextSlide() | Scrolls the next slide. |
| previousSlide() | Scrolls the previous slide. |
| getSlideAt( index ) | Gets all the data of the slide at the specified index. Returns an object that contains all the data specified for that slide. |
| getSelectedSlide() | Gets the index of the current slide. |
| update() | This is called by the plugin automatically when a property is changed. You can call this manually in order to refresh the slider after changing its HTML, like removing or adding slides. |
| resize() | This is called by the plugin automatically, when the browser window is resized. You can also call it manually if you find it necessary to have the slider resize itself. |
| getTotalSlides() | Gets the total number of slides. |
| on( eventType, callback ) | Adds an event listener to the slider. More details about the use of this method will be presented in the 'Callbacks' chapter. |
| off( eventType ) | Removes an event listener from the slider. |
| destroy() | Destroys a slider by removing all the visual elements and functionality added by the plugin. Basically, it leaves the slider in the state it was before the plugin was instantiated. |
Callbacks (or events) are used to detect when certain actions take place. The callbacks can be added when the slider is instantiated, or at a later time.
Examples:
$( '.my-slider' ).on( 'gotoSlide', function( event ) {
console.log( event.index );
})
As you can notice, the callback functions have an event parameter which contains some information about that event.
The list of available events:
| Callback | Description |
|---|---|
| init | Triggered after the slider was created. |
| update | Triggered when the 'update' method is called, either automatically or manually. |
| gotoSlide |
Triggered when a slide is selected. Returned data:
|
| gotoSlideComplete |
Triggered after the slider has scrolled to the new slide. Returned data:
|
| breakpointReach |
Triggered when a breakpoint is reached. Returned data:
|
| videoPlay | Triggered when a video starts playing. |
| videoPause | Triggered when a video is paused. |
| videoEnd | Triggered when a video ends. |
| showLayersComplete | Triggered when all animated layers become visible. |
| hideLayersComplete | Triggered when all animated layers become invisible. |
| thumbnailsUpdate | Triggered when the thumbnails are updated. |
| gotoThumbnail | Triggered when a new thumbnail is selected. |
| thumbnailsMoveComplete | Triggered when the thumbnail scroller has moved. |
By default, the code will be loaded inline, not in a .css or .js file, because it's simpler from a technical perspective and it's also more appropriate for small snippets of code. However, if you want to add large amounts of custom CSS or JavaScript, it's better to have the code loaded in files, rather than inline.
You can set how custom code is loaded in the Slider Pro -> Plugin Settings page. Then, you need to re-save the custom CSS and/or JavaScript and the plugin will automatically create the sliderpro-custom folder inside wp-plugins and then custom.css and custom.js inside sliderpro-custom . You might also be prompted to provide FTP credentials if the files can't be created due to folder permission issues (this is one of the reasons why it's simpler to load the code inline).
The files for the custom code are saved outside the main sliderpro folder in order to avoid the removal of the code when the plugin is updated.
You can move sliders between Slider Pro installations by exporting and then importing them. Sliders can be exported by clicking on the Export link in the Slider Pro -> All Sliders page. The exported text is a JSON-encoded representation of the slider's data.
To import a slider, you need to click on the Import Slider button in the Slider Pro -> All Sliders page and, inside the modal window, copy the exported text.
The examples showcased on the slider's presentation page can be found in the examples folder included in the package downloaded from CodeCanyon, and I recommend importing them into your own Slider Pro installation to see how certain featured are used.
Not only you can insert sliders into pages using shortcodes, but you can also override settings, add or modify slides. It's even possible to create a slider using only shortcodes, without setting it up in the admin area.
You can override the slider's settings like this:
[sliderpro id="1" width="700" aspect_ratio="2" visible_size="70%"]
As you can notice, the name of the settings are the same as those in the admin area, but they are lower case and with an underscore between words. This applies for all settings.
If you want to add breakpoint settings in the shortcode, you need to add them in a JSON-encoded string, since the breakpoints setting accepts an associated array-like value. You can create some breakpoints in the admin area and then see how the JavaScript code generated looks like.
As mentioned before, you can add new slides or change the data of existing ones:
[sliderpro id="1" width="700" aspect_ratio="2" visible_size="70%"]
[sliderpro_slide index="1"]
[sliderpro_slide_element name="main_image_source"] path/to/new_image.jpg [/sliderpro_slide_element]
[/sliderpro_slide]
[sliderpro_slide]
[sliderpro_slide_element name="main_image_source"] path/to/image.jpg [/sliderpro_slide_element]
[sliderpro_slide_element name="main_image_link"] http://bqworks.com/sliderpro/ [/sliderpro_slide_element]
[sliderpro_slide_element name="layer" position="center" show_transition="right"] some layer content [/sliderpro_slide_element]
[/sliderpro_slide]
[/sliderpro]
The first sliderpro_slide shortcode will override the first slide in the slider As you can notice that it has the index attribute specified and set to 1.
The second sliderpro_slide shortcode doesn't have an index, so this will be a new slide element added after the slides created in the slider's admin area.
This is the list of available types for sliderpro_slide_element shortcodes:
When you create a slider from scratch using only shortcodes, you need to assign it a unique id attribute that doesn't already exist in the admin area.
[sliderpro id="99" width="960" height="400" visible_size="70%"]
[sliderpro_slide content_type="posts" posts_post_types="post,page" posts_taxonomies="tag|design;tag|development;tag|planning"]
[sliderpro_slide_element name="main_image_source"] [sp_image_src] [/sliderpro_slide_element]
[sliderpro_slide_element name="main_image_alt"] [sp_image_alt] [/sliderpro_slide_element]
[sliderpro_slide_element name="main_image_link"] [sp_link_url] [/sliderpro_slide_element]
[/sliderpro_slide]
[/sliderpro]
The slider above contains a slide that will load data from posts. The dynamic tags, like [sp_image_src] were discussed in previous chapter. As for the attributes added to the slide shortcode, those are the equivalent of the settings from the slide's Settings modal window in the admin area.
Below is a list of all the available slide settings:
| Shortcode attribute | Accepted values |
|---|---|
| content_type | custom_content, posts, gallery or flickr |
Posts slides |
|
| posts_post_types | post, page or any custom post type |
| posts_taxonomies | must be composed of the taxonomy name and the term, separated by a vertical bar: category|uncategorized |
| posts_relation | OR or AND |
| posts_operator | IN or NOT IN |
| posts_orderby | date , comments , title or random |
| posts_order | ASC or DESC |
| posts_maximum | any number |
Flickr slides |
|
| flickr_api_key | the API key provided by Flickr |
| flickr_load_by | set_id or username_id |
| flickr_id | the ID of the data |
| flickr_maximum | any number |
Actions allow you to detect when certain actions are performed, while hooks allow to modify the output of the slider.
The information in this chapter is for developers that are familiar with PHP and the WordPress API.
Called when the slider's JavaScript files are enqueued. You can use this action to enqueue your own JavaScript files.
add_action( 'sliderpro_enqueue_scripts', 'add_my_scripts' );
function add_my_scripts() {
wp_enqueue_script( 'my-script', 'path/to/script.js' );
}
Called when the slider's CSS files are enqueued. You can use this action to enqueue your own CSS files.
add_action( 'sliderpro_enqueue_styles', 'add_my_styles' );
function add_my_styles() {
wp_enqueue_script( 'my-style', 'path/to/style.css' );
}
Note: The sliders are cached by default, so applying filters will not have an immediate effect, until the cache is cleared. However, you can disable the caching while testing in order to see your changes immediately. To do this, you need to add the allow_cache="false" attribute to the shortcode: [sliderpro id="3" allow_cache="false"].
It allows you to modify the default slider settings.
add_filter( 'sliderpro_default_settings', 'change_default_settings' );
function change_default_settings( $settings ) {
$settings['visible_size']['default_value'] = '70%';
return $settings;
}
It allows you to modify the default slide settings.
add_filter( 'sliderpro_default_slide_settings', 'change_default_slide_settings' );
function change_default_slide_settings( $settings ) {
$settings['posts_operator']['default_value'] = 'NOT IN';
return $settings;
}
It allows you to modify the default layer settings.
add_filter( 'sliderpro_default_layer_settings', 'change_default_layer_settings' );
function change_default_layer_settings( $settings ) {
$settings['preset_styles']['default_value'] = array( 'sp-white', 'sp-padding', 'sp-rounded' );
return $settings;
}
It allows you to add/remove settings for the Breakpoints.
add_filter( 'sliderpro_breakpoint_settings', 'add_breakpoint_settings' );
function add_breakpoint_settings( $settings ) {
$settings[] = 'auto_slide_size';
return $settings;
}
It allows you to modify the parameters passed to the WP_Query call when Posts slides are created.
add_filter( 'sliderpro_posts_query_args', 'custom_query', 10, 3 );
function custom_query( $query_args, $slider_id, $slide_index ) {
if ( $slider_id === 3 && $slide_index === 1 ) {
$query_args['order'] = 'DESC';
}
return $query_args;
}
It allows you to add custom tags to Posts slides.
add_filter( 'sliderpro_posts_tags', 'add_author_tag' );
// add the 'author' tag to the list of supported tags
function add_author_tag( $tags ) {
// associate the 'author' tag with the function that will render the tag
$tags['author'] = 'render_author_tag';
return $tags;
}
// return the actual post author for the 'author' tag
function render_author_tag( $tag_arg, $post ) {
return $post->post_author;
}
Please note that when you use a tag in the slider, you need to append the sp_ term, like this: [sp_author] .
You can also add an argument to the tag, like [sp_author.first] , and use that argument in the rendering function:
function render_author_tag( $tag_arg, $post ) {
$result = $post->post_author;
// if the 'first' argument is present, return only the first name
if ( $tag_arg !== false && $tag_arg === 'first' ) {
$name = explode( $result, ' ' );
$result = $name[0];
}
return $result;
}
It allows you to add custom tags to Gallery slides.
add_filter( 'sliderpro_gallery_tags', 'add_image_id_tag' );
// add the 'image_id' tag to the list of supported tags
function add_image_id_tag( $tags ) {
// associate the 'image_id' tag with the function that will render the tag
$tags['image_id'] = 'render_image_id';
return $tags;
}
// return the actual image ID for the 'image_id' tag
function render_image_id( $tag_arg, $image ) {
return $image->ID;
}
Please note that when you use a tag in the slider, you need to append the sp_ term, like this: [sp_image_id] .
You can also add an argument to the tag, like [sp_image_id.my_arg] , and use that argument in the rendering function:
function render_image_id( $tag_arg, $image ) {
$result = $image->ID;
// if the 'my_arg' argument is present, do something
if ( $tag_arg !== false && $tag_arg === 'my_arg' ) {
// do something
}
return $result;
}
It allows you to add custom tags to Flickr slides.
add_filter( 'sliderpro_flickr_tags', 'add_photo_id_tag' );
// add the 'photo_id' tag to the list of supported tags
function add_photo_id_tag( $tags ) {
// associate the 'photo_id' tag with the function that will render the tag
$tags['photo_id'] = 'render_photo_id';
return $tags;
}
// return the actual photo ID for the 'photo_id' tag
function render_photo_id( $tag_arg, $photo ) {
return $photo['id'];
}
Please note that when you use a tag in the slider, you need to append the as_ term, like this: [sp_photo_id] .
You can also add an argument to the tag, like [sp_photo_id.my_arg] , and use that argument in the rendering function:
function render_photo_id( $tag_arg, $photo ) {
$result = $photo['id'];
// if the 'my_arg' argument is present, do something
if ( $tag_arg !== false && $tag_arg === 'my_arg' ) {
// do something
}
return $result;
}
It allows you to modify the slider's set data, before the slider's output is generated based on that data.
add_filter( 'sliderpro_data', 'change_slide_content_type', 10, 2 );
function change_slide_content_type( $data, $slider_id ) {
if ( $slider_id === 2 ) {
$data['slides'][0]['settings']['content_type'] = 'posts';
}
return $data;
}
It allows you to append or prepend inline JavaScript code.
add_filter( 'sliderpro_javascript', 'add_javascript' );
function add_javascript( $js_code ) {
$js_code .= '<script>alert('Hello World!');</script>';
return $js_code;
}
It allows you to add custom classes to the slider.
add_filter( 'sliderpro_classes', 'add_custom_slider_class', 10, 2 );
function add_custom_class( $classes, $slider_id ) {
if ( $slider_id === 2 ) {
$classes .= ' ' . 'my-custom-class';
}
return $classes;
}
It allows you to add custom classes to the slides.
add_filter( 'sliderpro_slide_classes', 'add_custom_slide_class', 10, 3 );
function add_custom_slide_class( $classes, $slider_id, $slide_index ) {
if ( $slider_id === 1 && $slide_index === 2 ) {
$classes .= ' ' . 'my-custom-class';
}
return $classes;
}
It allows you to add custom classes to the background image.
add_filter( 'sliderpro_main_image_classes', 'add_main_image_class', 10, 3 );
function add_main_image_class( $classes, $slider_id, $slide_index ) {
$classes .= ' sp-custom-bg-class';
return $classes;
}
It allows you to add custom classes to the layers.
add_filter( 'sliderpro_layer_classes', 'add_custom_layer_class', 10, 3 );
function add_custom_layer_class( $classes, $slider_id, $slide_index ) {
if ( $slider_id === 1 && $slide_index === 2 ) {
$classes .= ' ' . 'my-custom-class';
}
return $classes;
}
It allows you to add custom classes to the thumbnails.
add_filter( 'sliderpro_thumbnail_classes', 'add_custom_thumbnail_class', 10, 3 );
function add_custom_thumbnail_class( $classes, $slider_id, $slide_index ) {
if ( $slider_id === 1 && $slide_index === 2 ) {
$classes .= ' ' . 'my-custom-class';
}
return $classes;
}
It allows you to add custom classes to the caption.
add_filter( 'sliderpro_caption_classes', 'add_custom_caption_class', 10, 3 );
function add_custom_caption_class( $classes, $slider_id, $slide_index ) {
if ( $slider_id === 1 && $slide_index === 2 ) {
$classes .= ' ' . 'my-custom-class';
}
return $classes;
}
It allows you to modify the slider's HTML markup before it's printed.
add_filter( 'sliderpro_markup', 'slider_markup', 10, 2 );
function slider_markup( $html_markup, $slider_id ) {
if ( $slider_id === 3 ) {
$html_markup .= '<div class="extra-element">some content</div>';
}
return $html_markup;
}
It allows you to modify the slide's HTML markup before it's printed.
add_filter( 'sliderpro_slide_markup', 'slider_slide_markup', 10, 3 );
function slider_slide_markup( $html_markup, $slider_id, $slide_index ) {
$html_markup .= '<div class="extra-element">some content</div>';
return $html_markup;
}
It allows you to modify the layer's HTML markup before it's printed.
add_filter( 'sliderpro_layer_markup', 'slider_layer_markup', 10, 3 );
function slider_layer_markup( $html_markup, $slider_id, $slide_index ) {
$html_markup .= '<div class="extra-element">some content</div>';
return $html_markup;
}
It allows you to add custom classes to the slide's link.
add_filter( 'sliderpro_slide_link_classes', 'add_slide_link_class', 10, 3 );
function add_slide_link_class( $classes, $slider_id, $slide_index ) {
$classes .= ' sp-custom-link-class';
return $classes;
}
It allows you to modify the URL of the slide's link.
add_filter( 'sliderpro_slide_link_url', 'change_url', 10, 3 );
function change_url( $link_url, $slider_id, $slide_index ) {
$link_url = str_replace( '/en/', '/de/', $link_url );
return $link_url;
}
It allows you to add custom classes to the thumbnail's link.
add_filter( 'sliderpro_thumbnail_link_classes', 'add_thumbnail_link_class', 10, 3 );
function add_slide_link_class( $classes, $slider_id, $slide_index ) {
$classes .= ' sp-custom-link-class';
return $classes;
}
It allows you to modify the URL of the thumbnail's link.
add_filter( 'sliderpro_thumbnail_link_url', 'change_url', 10, 3 );
function change_url( $link_url, $slider_id, $slide_index ) {
$link_url = str_replace( '/en/', '/de/', $link_url );
return $link_url;
}
Called when the layer's inner text (in the case of paragraph or heading layers) or inner HTML (in the case of DIV or video layers) is printed. It allows you to modify the content of the layer.
add_filter( 'sliderpro_layer_content', 'change_layer_content', 10, 3 );
function change_layer_content( $content, $slider_id, $slide_index ) {
$content = '<strong>' . $content . '</strong>';
return $content;
}
It allows you to modify the URL of the link specified for an image layer.
add_filter( 'sliderpro_layer_image_link_url', 'change_image_url', 10, 3 );
function change_image_url( $link_url, $slider_id, $slide_index ) {
$link_url = str_replace( '/en/', '/de/', $link_url );
return $link_url;
}
It allows you to modify the slide's inline HTML content before it's printed. Please note that this is different from sliderpro_slide_markup , which returns the entire HTML markup of the slide, not only the inline HTML content.
add_filter( 'sliderpro_slide_html', 'slide_html', 10, 3 );
function slide_html( $inline_html, $slider_id, $slide_index ) {
$inline_html = '<div class="wrapper">' . $inline_html . '</div>';
return $inline_html;
}
It allows you to modify the slide's caption content before it's printed.
add_filter( 'sliderpro_slide_caption', 'slide_caption', 10, 3 );
function slide_caption( $caption, $slider_id, $slide_index ) {
$caption = '<div class="wrapper">' . $caption . '</div>';
return $caption;
}
It allows you to add options for the bundled lightbox script (FancyBox).
add_filter( 'sliderpro_lightbox_options', 'lightbox_options' );
function lightbox_options( $options ) {
$options[ 'autoPlay' ] = true;
$options[ 'arrows' ] = false;
return $options;
}
It allows you to hide the plugin's admin pages. For example, you could hide the 'Plugins Settings' page from 'Editors'.
add_filter( 'sliderpro_restricted_pages', 'restricted_pages' );
function restricted_pages( $restricted_pages ) {
$restricted_pages[] = 'sliderpro-settings';
$restricted_pages[] = 'sliderpro-custom';
return $restricted_pages;
}
Deep linking provides the possibility to link to a specific slide in the slider. For this, you need to append a hashtag to the original URL of the page. The hashtag will contain the id attribute of the slider and the index of the slide, separated by a slash (/) character.
Example:http://domain.com/page#slider-pro-3/0
The link above will open the first slide (because slide indexes start with 0) in the slider that has the id set to slider-pro-3 .
The id attributes of the sliders are assigned automatically by the plugin, and they are formed by appending the ID that the slider has in the admin area to slider-pro- .
There are several tools for translating the plugin's admin text, but I will show you how to do this using Poedit .
First, download and install the software. Open Poedit and go to File -> Open and and select the sliderpro.po file, which you can find in sliderpro/languages/ . Then go to File -> Save As and save the file using a name that corresponds to the language in which you're translating the plugin. For example, if you translate the plugin to German, save the file as "sliderpro-de_DE"; if you're translating it to French, save the file as "sliderpro-fr_FR".
After you saved the file, you're ready to begin translating the plugin. All you have to do is click on the string that you want to translate, and write the translation for it in the second box, below the English version.
The slider has built-in support for YouTube and Vimeo videos. Other formats, like HTML5 video, VideoJS and SublimeVideo are also supported by adding the correct HTML markup inside a DIV layer. However, for YouTube and Vimeo videos there is a UI that allows you to easily publish such videos.
The support consists in the slider's ability to control the videos automatically (i.e., pause the video when the slide is closed, play the video when the slide is opened, etc.).
Videos can be added in the Layers editor, as Video Layers.
Example:
In the admin area, in slider's Video sidebar panel, you can set how the video will react to the opening or closing of slides.
If something doesn't work as expected, the first thing you need is a little patience and the assurance that you have my free assistance for resolving the problem. Please see if the indications below help, and if they don't please kindly email me and I'll gladly help you. You can reach me at the support center: support.bqworks.com .
First, it's important to check if you have any JavaScript errors on the page that contains the slider. JavaScript errors thrown by other scripts can break all the JavaScript functionality that follows on that page, including the slider. I would like to note that Slider Pro follows WordPress development best practices and is actively maintained to make sure it's bug free and works seamlessly. However, when something else (another plugin or theme) breaks in the site, it can affect the slider as well, as mentioned before. Most of the times it's possible to check where the problem comes from, and I will show you 2 methods. If you find the instructions below too complicated, please contact me instead.
Please open Chrome or Safari, and navigate to the page that should contain the slider. Then, press the F12 key if you're on Windows, and Option + Command + I if you're on Mac. Alternatively, you can right-click and select "Inspect element" on both systems. After the "Developer Tools" is opened please click on the "Console" tab. You will be able to see there all the errors and warnings that occur on the page. Some of them can be ignored but others need to be addressed, especially if they are JavaScript errors.
On the left side you will see the error message and on the right side you will see the name/path of the script that contains the error (if the full path of the script is not displayed please hover the text, and the full path should appear). By looking at the path of the script you can identify the theme or plugin that causes the error. If the error comes from another theme or plugin, and not Slider Pro , it's best to contact the developer of that theme/plugin, so he can fix the error. If you have difficulties interpreting the data from Console, please try the second method or contact me via the support center and I will be happy to assist you.
This method is very simple but normally you would use it only if you can't find the problem using the first method.
What you need to do is temporarily deactivate the current theme and then the plugins one by one and test each time if the problem has disappeared. This way you can find which theme/plugin causes the problem.
If you identify the problem as being caused by a theme or another plugin, it's best to contact the developer of that theme/plugin, so he can fix the problem. It's in the best interests of both the developer of the theme/plugin and its user that the theme/plugin doesn't cause errors because a buggy theme/plugin could cause even more problems in the future.
If you don't see any errors in the Console, it's possible that the theme is missing some elements: the wp_head() and wp_footer() calls. These calls are used by many plugins, including this slider, to insert the necessary scrips in the page.
The wp_head() call should be in the theme's header.php call just above </head> :
<?php wp_head(); ?> </head>
The wp_footer() call should be in the theme's footer.php call just above </body> :
<?php wp_footer(); ?> </body>
If that wasn't the problem either, please contact me via the support center at support.bqworks.com , and I will gladly help you.
This is most likely caused by JavaScript errors. Please try the debugging methods suggested above for point a) or submit a support request at support.bqworks.com .
The theme might include CSS code that gets applied to the slider's elements. For example, if you add a paragraph layer, the style added to paragraphs by the theme, will also get applied to the paragraph layers inside the slider. The same can happen for heading or image layers.
The slider includes some CSS code that minimizes the influence of external CSS, but it's not always possible to eliminate this influence completely. So, when you see unexpected styles in a published slider, you will need to add some custom CSS to override the style added by the theme's CSS.
Regarding layers, another solution for preventing CSS influences from the theme would be to use DIV layers instead of Paragraph or Heading layers, since DIV elements are usually not styled by themes. However, my recommendation is to use Paragraph or Heading layers every time it's appropriate and simply use custom CSS to prevent theme influences.
v. 4.6.0 (24 October 18)
v. 4.5.0 (20 February 18)
v. 4.4.0 (11 July 16)
v. 4.3.0 (14 November 15)
v. 4.2.1 (29 October 15)
v. 4.2.0 (3 October 15)
v. 4.1.1 (18 March 15)
v. 4.1.0 (31 January 15)
v. 4.0.4 (14 December 14)
v. 4.0.3 (7 December 14)
v. 4.0.2 (3 December 14)
v. 4.0.1 (2 December 14)
v. 4.0.0 (27 November 14)