Skip to main content

[WP] Including JavaScript and CSS files

By default, RoyaSlider WordPress plugin includes its files only to post page with [new_royalslider id=""] shortcode in post content area (not wrapped in some widget, or some custom field, and not when [gallery] shortcode is used).

If your slider is only on home page:​

Go to RoyalSlider -> Settings and check "On home (front) page" option in "Preload CSS and JavaScript files" section.

If your slider is on all pages (or on majority of them):​

Go to RoyalSlider -> Settings and check "On every page" option in "Preload CSS and JavaScript files" section.

If your slider is only on some specific pages:​

This step requires PHP and WordPress knowledge.

There is register_new_royalslider_files function that includes all slider files. Function should be called before WordPress starts including files - (before the head is printed, before or in wp_enqueue_scripts).

You may do a conditional check via PHP to include files only on pages that you need. Function requires one parameter, which is ID of RoyalSlider that you wish to include, for example:

register_new_royalslider_files(123); // 123 - is ID of your slider

Including only on single posts:

add_action( 'wp_enqueue_scripts', 'enqueue_royal_sliders' );
function enqueue_royal_sliders() {
    global $posts;

    // can be also is_archive(), is_page() e.t.c.
    if(is_single()) { 
        register_new_royalslider_files(1); 
    }
}

Additional info

When you call register_new_royalslider_files(123) plugin includes files associated with #123-slider. Most often they are:
  • jQuery
  • main royalslider.js
  • main royalslider.css
  • skin css file
  • template css file

All these files are located in wp-content/plugins/new-royalslider/lib/royalslider/. You're free to use plugins that combine CSS or JS files.

Please note that all sliders marked as "Inactive" will not load their styles, no matter what method you use.

If you included files and slider still doesn't work on frontend, please refer to this article.