ASD RockAndRoll PowerSlider Plugin
Is it just another WordPress slider? Or is it the single most powerful slider in any WordPress builder’s arsenal?
That’s a pretty tall claim to make. So what’s so great about this particular slider?
There are a lot of good WordPress slider plugins to choose from.
What makes this one special?
- SO easy to set up, but highly flexible and powerful.
- Inherently responsive, mobile friendly, but still excellent on the desktop.
- Touch-sensitive for touchscreen devices, plus all the usual arrows and dots.
- Lots of slider options.
- Powered in the browser by the awesome Slick.JS.
- Can use any type of Page/Post/Media as a slide, including WooCommerce products.
- PowerSliders are easily embedded as shortcodes, example shortcodes are listed in the Edit PowerSlider screen.
- Supports custom slide templates, and includes templates for PowerSlides and WooCommerce products.
- All code in the RockAndRoll PowerSlider plugin (and ALL ASD plugins) has been audited through CodeSniffer, and contains proper escaping and sanitizing calls to prevent against hack attempts such as “SQL injection” and “cross site scripting.”
How To Create an ASD RockAndRoll PowerSlider
Create Some Slides
In the Dashboard:
Select the Dashboard PowerSlides item, Add New
Give the PowerSlide a name. (this won’t show up in the slide when the default template is used.)
You can put a little text in the editor.
Click Featured Image to set an image.
In the right column, click “+Add New Powerslidergroups”, and add a new entry, something like “My PowerSlide Group”
Publish the first slide.
Click Add New to create another PowerSlide.
Add text and Featured Image as before, but this time just check the Powerslidegroups entry “My PowerSlide Group”, no need to create it again, and Publish the Slide.
Two slides is enough for a slider to work.
Create A Slider
Select the Dashboard PowerSliders item, Add New
Give the PowerSlider a name.
The default settings work fine, but you can set options as you like.
After the PowerSlider is Updated, the list of Shortcode Examples will grow
Insert the Shortcode.
In the Edit PowerSlider screen, copy the first of the Shortcode Examples to a page in your site.
[insert_powerslider powersliderslug=”my-test-powerslider” powerslidegroups=”my-powerslide-group”]
(You might have to edit the powerslideslug or powerslidegroups fields if you used different names.)
Click Update and you have a working PowerSlider.
Using the insert_powerslider Shortcode
The base shortcode is [insert_powerslider]
Powersliders can be selected using the attributes
- powersliderslug (ex) powersliderslug=”my-powerslider”
- powerslidername (ex) powerslidername=”My PowerSlider”
- powersliderid (ex) powersliderid=”778″
Slides can be inserted using:
- The included “powerslidegrous” taxonomy
- Any other defined taxonomy
- Post ID’s
- Media Library ID’s
- Media Library Category
- WooCommerce Product Category
Custom templates can be selected using the “template” attribute
- (ex) template=”my-slide-template.php”
- (ex) template=”woo-products-template.php”
If no template is specified, the default template powerslides-template.php is used.
A: Copy one of these files to your active theme directory (should be using child theme so that changes are not overwritten when your theme updates.)
You can also rename the template file.
Specify the name of the new template in your shortcode:
[insert_powerslider powersliderslug="my-test-powerslider" powerslidegroups="my-powerslide-group" template="my-slide-template.php" ]
Note that any code placed in the Script fields in a PowerSlider or PowerSlide will automatically be wrapped in <script> tags.
Code that is placed in the Script field of a Powerslider is not automatically executed, for example a place to put a function that you want to share across slides. A jQuery(document).ready() function can be included in this field to automatically execute code.
Code that is placed in a PowerSlide’s Before Script is automatically executed before transition to this slide.
Code that is placed in a PowerSlide’s After Script is automatically executed after transition to this slide.
This automatic execution is hooked to the Slick.JS instance’s built-in callback, not a separate framework.
a < b (becomes) less_than( a, b) a > b (becomes) greaer_than( a, b ) a <= b (becomes) less_or_equal( a, b ) a >= b (becomes) greater_or_equal( a, b )
Applied codesniffer phpcs with WordPress ruleset standard, zero errors