• Home »
  • »
  • WordPress HighSlide Plugin Error: ‘hs’ is undefined

WordPress HighSlide Plugin Error: ‘hs’ is undefined

When integrating Highslide with your WordPress blog there are numerous additions that need to be made outside of actually installing the plugin. First you need to make sure that you have the highslide.css file located in the /wp-content/plugins/highslide/ directory. After that you need to make sure that you add the code listed below to the footer.php file of your blogs theme.

After doing all of this my site was extremelly slow to load. It was taking over a minute to actually load any page that had thumbnails on it. After some debugging I finally noticed a Highslide JavaScript error which is below.


  1. 'hs' is undefined

I finally figured out that I had accidently copied a file from a previous backup that was using a different domain. Anyhow it ended up being that the footer.php file I was using with my theme was pointing to HighSlide CSS definitions on a domain that no longer existed. So if you run into this type of error check the CSS you added to your footer.php file for Highslide to work.

In the code below you would change YOURSITE to the proper domain.


  1. <!– Start Highslide Mod –>
  2. <script type="text/javascript" src="YOURSITE/wp-content/plugins/highslide/highslide.js"></script>
  3. <script type="text/javascript">
  4. hs.registerOverlay(
  5. {
  6. thumbnailId: null,
  7. overlayId: 'controlbar',
  8. position: 'top right',
  9. hideOnMouseOut: true
  10. }
  11. );
  12. hs.graphicsDir = 'YOURSITE/wp-content/plugins/highslide/graphics/';
  13. hs.outlineType = 'rounded-white';
  14. hs.captionEval = 'this.thumb.title';
  15. hs.showCredits = false;
  16. </script>
  18. <div id="controlbar" class="highslide-overlay controlbar">
  19. <a href="#" class="previoushs" onclick="return hs.previous(this)" title="<?php _e('Previous (left arrow key)'); ?>"></a>
  20. <a href="#" class="nexths" onclick="return hs.next(this)" title="<?php _e('Next (right arrow key)'); ?>"></a>
  21. <a href="#" class="highslide-move" onclick="return false" title="<?php _e('Click and drag to move'); ?>"></a>
  22. <a href="#" class="closehs" onclick="return hs.close(this)" title="<?php _e('Close'); ?>"></a>
  23. </div>
  24. <!End Highslide Mod –>

The above code is from the following site where there is also more information about highslide integration with WordPress.