Dear StackExchange community,

My goal is to add a second horizontal scrollbar on a very wide HTML table.

I have downloaded a JS file recently that I wanted to use it on my website: https://github.com/sniku/jQuery-doubleScroll/

I uploaded it on my child-theme directory under /js/ subfolder.

In my functions.php file, I added the following lines:

// Ajout du script pour la double scrollbar
function dsb_adding_scripts() {
    wp_register_script('doubleScroll', get_stylesheet_directory_uri() . '/js/jquery.doubleScroll.js', array('jquery'),'0.3', true);
add_action( 'wp_enqueue_scripts', 'dsb_adding_scripts' ); 

And also

function my_custom_js() {
    echo '<script type="text/javascript">jQuery(document).ready(function($){jQuery("#double-scroll").doubleScroll();});</script>';
add_action('wp_head', 'my_custom_js');

I had to comment out this function since it makes the whole website go blank.

Here is what my shortcode looks like:

// Shortcode for ARE
function display_ARE( $atts ) {
    // Attributes
    extract( shortcode_atts(
            'id' => '',
        ), $atts )

    // Initialisation de la table de droite
    $echo .= '<div class="table_ARE" id="double-scroll"><table id="very-wide-element">';


    // Conclusion de la table
    $echo .= '</table></div>';  

    // Affichage du résultat
    return $echo;
add_shortcode( 'ARE', 'display_ARE' );

In the console, I end-up with the following error:

Uncaught TypeError: $.widget is not a function
  • Looks like $echo was never initialized before you started adding to it. Can you add '$echo = "";' before you start using 'echo .='
    – jgraup
    Feb 15, 2016 at 22:26
  • Dear Jgraup, thank you for your help. Actually, I have reduced the code so that it is easier to read. Here is the full function : codepad.org/UEKcxchQ Feb 16, 2016 at 11:16

1 Answer 1


You're passing true as the $in_footer argument to wp_register_script(), but my_custom_js() is loading in the header. So doubleScroll is loading after the custom js.

I would put my_custom_js() in a separate javascript file so you can control the dependencies.

Create my_custom_js.js in the same place you have the double scroll script:

jQuery(document).ready(function($) {

Then in your functions.php use:

function dsb_adding_scripts() {

        array('jquery', 'doubleScroll')

add_action('wp_enqueue_scripts', 'dsb_adding_scripts');
  • Dear David, Thank you very much for your help. I am sorry, I am very new to JS. I do not understand the necessity of enqueuing two scripts. If you look at what I downloaded originally and if you do not pay attention to what I have done so far, how would you use the JS file downloaded onto your WP site ? Feb 16, 2016 at 11:18
  • No worries! The my_custom_js PHP function is loading before doubleScroll. It can't use doubleScroll until after it is loaded. The console error you're getting is a javascript error. I haven't looked at your PHP and not sure if it's right, but you'll need to make sure the JS is working correctly first before looking into any PHP problems (if there are any)... I've updated my answer to hopefully make the first step clearer.
    – david_nash
    Feb 16, 2016 at 23:46
  • I am sorry, but I am really confused... I'm new to JS. Actually, the JS code I downloaded only had one JS file, the rest behind HTML and PHP. The original code is not meant to be used in WP (hence the error, in my opinion). If you were to download the code available here : github.com/sniku/jQuery-doubleScroll how would you include it on WP ? From scratch... Feb 17, 2016 at 12:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.