Skip to main content

[WP] Adding custom skin without modifying core of slider

Skin is a CSS file with styled slider controls. You can find existing skins by default in:

wp-content/plugins/new-royalslider/lib/royalslider/skins

To add your custom skin, you need to hook in new_royalslider_skins and provide id, name and path to skin.

For example:

function new_royalslider_add_custom_skin($skins) {
      $skins['myCustomSkin'] = array(
           'label' => 'The custom skin',
           'path' => get_stylesheet_directory_uri() . '/some-path/my-custom-skin.css'  // get_stylesheet_directory_uri returns path to your theme folder
      );
      return $skins;
}
add_filter('new_royalslider_skins', 'new_royalslider_add_custom_skin', 10, 2);

Step by step instructions:

  1. Go to wp-content/plugins/new-royalslider/lib/royalslider/skins.
  2. Copy folder of the skin that you wish to clone and paste it to another location. This can be a folder of your child theme, or any other place.
  3. Rename folder that you moved e.g. to "my-custom-skin".
  4. Go inside this folder and rename CSS file into my-custom-skin.css.
  5. Open this CSS file. All CSS styles in it will start from specific CSS class (e.g. .rsDefault, or .rsUni, or rsMinW etc), this is class name and keyword of a skin. You should change all occurrences of it to your skin keyword (e.g. to .myCustomSkin).
  6. Add the PHP code above to your functions.php. myCustomSkin part should match your CSS class, path should point to the CSS file that you created.
  7. Go to edit slider page and select your skin in General Options
  8. That's all. Now slider should have CSS class myCustomSkin on it, and have all slider applied from your custom my-custom-skin.css.

Adding multiple skins:

add_filter('new_royalslider_skins', 'new_royalslider_add_custom_skin', 10, 2);
function new_royalslider_add_custom_skin($skins) {
      $skins['skin1'] = array(
           'label' => 'The custom skin 1',
           'path' => 'http://example.com/full-path-to-your-custom-skin-1.css'
      );
     $skins['skin2'] = array(
           'label' => 'The custom skin 2',
           'path' => 'http://example.com/full-path-to-your-custom-skin-2.css'
      );
      return $skins;
}

I strongly recommend using this method and don't recommend changing core code of slider, as you won't be able to easily update.