ASD RockAndRoll PowerSlider Plugin

Is it just another WordPress slider? Or is it the single most powerful slider in any WordPress builder’s arsenal?

“RockAndRoll PowerSlider”

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 and Powerslides have the ability to embed JavaScript code, so that an animated slideshow presentation can easily be built. The plugin automatically creates the JavaScript framework so that each slide’s BeforeSlide and AfterSlide scripts are implemented as callbacks to the Slick.JS instance.
  • 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.

Click Update.

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
    (ex) powerslidegroups=”my-powerslide-group”
  • Any other defined taxonomy
    (ex) sometaxonomy=”my-taxonomy”
  • Category
    (ex) category=”my-category”
  • Post ID’s
    (ex) ids=”2345,2367″
  • Media Library ID’s
    (ex) image_ids=”3023,3027″
  • Media Library Category
    (ex) image_category=”my-media-category”
  • WooCommerce Product Category
    (ex) product_cat=”my-woo-product-group”

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.


Q: How can I create and use a custom slide template?

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.)

  • powerslides-template.php
  • woo-products-template.php

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" ]

Q: How can I add JavaScript to PowerSliders and PowerSlides to animate/automate?
A: First you need a basic knowledge of how to write code in JavaScript and/or jQuery.

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.

Q: How can I embed code that is automatically executed with jQuery(document).ready() ?

Q: How can I put a time delay on a function?

Q: Why does my PowerSlider/Powerslide embedded JavaScript code that contains a greater-than (>) or less-than (<) symbol crash?

A: It’s due to a security feature called “escaping” that takes place in WordPress. The “>” and “<” characters are interpreted as HTML <tags> and removed. This could be prevented, but doing so defeats the security that escaping provides. This plugin chooses to keep the security level high, therefore any JavaScript code that uses > or < will not run.
BUT: An easy workaround is provided: Four JavaScript functions are provided in this plugin that work around the greater-than, less-than issue:

   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 )



1.201803181 2018-03-18


1.201803151 2018-03-15

Applied codesniffer phpcs with WordPress ruleset standard, zero errors

Upgrade Notice
1.201803151 2018-03-15

Leave a Reply