[WP] Slider looks correctly in preview, but when I add it to site it doesn't work

This article lists the reasons why RoyalSlider may work incorrectly when embedded to site and solutions about how to fix this.

Reasons why slider may not work (you might have multiple at once):

1. RoyalSlider JavaScript and/or CSS files are not added to page

To check if this is your issue, simply go to RoyalSlider Global Settings page and enable checkbox that will load slider files on all pages. Learn more in including files article. If after enabling checkbox CSS and JS files are still not included, check issue #5 in this list.

2. You have two jQuery.js scripts on one page

This issue is caused when your theme or one of your plugins adds jQuery directly with script tag. jQuery in WordPress should be added only with <?php wp_enqueue_script('jquery'); ?>.

You need to find <script/> tag that adds jQuery, most likely it's in header.php or footer.php of your theme, but can be anywhere. And replace with <?php wp_enqueue_script('jquery'); ?>
Usually inproper script tag looks something like:

<script type='text/javascript' src='http://some_path/jquery.min.js'></script>

3. You have old (or non-default) version of jQuery

This issue is caused when your theme or one of your plugins deregisters default jQuery script using wp_deregister_script('jquery') and adds own. If error like: Object has no method 'on' appears on your JavaScript console then this is definitely your issue.

To fix this find where your theme or one of your plugins deregisters jQuery and leave just wp_enqueue_script part, or simply change path to newer version of jQuery. Deregistering of script usually looks something like this:

wp_deregister_script('jquery');
wp_register_script('jquery', "http://some_path_here/jquery.min.js");
wp_enqueue_script('jquery');
and should be replace just with:
wp_enqueue_script('jquery');

The easiest way to find this part of code is to just download theme or plugins folder that causes the issue and do a bulk search through its files.

Learn more: Why Loading Your Own jQuery is Irresponsible?

4. You have JavaScript error on your site that blocks JavaScript execution

To check if this is your issue open javascript console in your browser and find from which script error appears. Then simply contact the developer of that theme or plugin or fix issue by yourself. The easiest way to find which one causes problem is to deativate all plugins and change theme to default twenty-ten.

If error comes from RoyalSlider script:

  • Error like Object has no method 'on' means that old jQuery script is used. Check section #3 in this aticle.
  • Error like Object has no method 'royalSlider' means that slider script is not included or you have two scripts on one page, check section #1 or #2.
  • If any other error appears, please open support ticket and provide link to page with problem slider.

5. Your theme is missing wp_head() or wp_footer() call

If you use theme from trusted providers or you use default twenty* theme and you haven't modified code - 99% this is not your issue. wp_head() should be added in header, wp_footer() in footer, check WordPress codex for more info.

Easy way to fix 99% of issues

  • Deactivate all plugins
  • Switch to default theme
  • Check if RoyalSlider now works correctly, if it doesn't - open private support ticket and provide admin access.
  • Switch to your theme and start activating your plugins one by one to see which one causes the issue.

Side note

All issues above are caused third party themes and plugins that don't comply WordPress coding standards. If you've found issue, contact the developer of that theme or plugin, so he can improve his work.


If you have problems figuring out this by yourself, please open support ticket and send link to page with broken RoyalSlider and I'll tell you what causes your issue.