Getting external javascript to work in my theme header

  • ltc411

    (@ltc411)


    11 years, 8 months ago

    I have added a “slider” javascript to the header of my website conversion that works correctly in a straight HTML version (non WordPress). Now I’m adding this JS slider to the WP site.

    Per the codex (http://codex.wordpress.org/Using_Javascript), I set the call for the JavaScript, or the script itself, in the head of the header.php template file “between the meta tags and the style sheet link, no differently than you would if you were using JavaScript in any HTML page.” SIMPLE. DONE.

    Unfortunately, this did not work, so then I recoded the script per the codex recommendation as follows:

    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/pathto/yourscript.js”></script>

    SIMPLE. DONE.

    Unfortunately, the script still does not work. Just to be sure, I double-checked that the scripts have been uploaded to the corresponding directories and, yes, they are there.

    This is my first time adding in an external JS to a customized WP theme, so any help in resolving this is appreciated. Here’s the work in question:
    __________

    1) my temp URL: http://184.173.196.198/~kwj1966/wp/

    (the initial slider screen resides in the correct container while the additional slides are displaying down the page since the JS is not working)
    __________

    2) my script reference within <head> tags as follows:

    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/libs/jquery-1.6.2.min.js”></script>

    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/libs/jquery.easing.1.3.min.js”></script>

    <script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/royalslider/royal-slider-6.0.min.js”></script>

    NOTE: These three JS files are in the referenced directories.
    __________

    3) my script reference in the html as follows:

    <script>
    $(document).ready(function() {
    $(‘#myContentSlider’).royalSlider({
    directionNavEnabled: true,
    directionNavAutoHide:true,
    welcomeScreenEnabled:false,
    imageAlignCenter:true
    });
    });
    </script>
    __________

    I don’t know what else to modify or edit. What am I missing? Any help is appreciated. Best, Kevin

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter ltc411

    (@ltc411)

    11 years, 8 months ago

    OK, I tried adding the scripts to the header.php by including them in the functions.php file. The JS scripts were added correctly because I can view the page source and follow the links to the corresponding scripts. So that’s good, but the slider is still not working. Any help out there?

    Thread Starter ltc411

    (@ltc411)

    11 years, 8 months ago

    OK, in my script reference in the html, I updated the script tag from:
    <script> to <script type=”text/javascript”>

    Probably better, but still doesn’t work. Next?

    Andrew Bartel

    (@andrew-bartel)

    11 years, 8 months ago

    Use wp_enqueue_script() in your header.php instead.

    Thread Starter ltc411

    (@ltc411)

    11 years, 8 months ago

    Andrew, I believe your comment was accomplished when I added the following to functions.php. Yes? No?

    When I try to debug, the scripts seem to be loading correctly, so it has to be something else. Any ideas?
    __________

    /**
    * Register javascripts.
    */

    function add_my_javascripts()
    {
    wp_register_script( ‘jquery.min’, get_template_directory_uri() . ‘/js/libs/jquery-1.6.2.min.js’ );
    wp_register_script( ‘jquery.easing’, get_template_directory_uri() . ‘/js/libs/jquery.easing.1.3.min.js’ );
    wp_register_script( ‘royal-slider’, get_template_directory_uri() . ‘/js/royalslider/royal-slider-6.0.min.js’ );
    wp_enqueue_script( ‘jquery.min’ );
    wp_enqueue_script( ‘jquery.easing’ );
    wp_enqueue_script( ‘royal-slider’ );
    }
    add_action(‘wp_enqueue_scripts’, ‘add_my_javascripts’);

    Andrew Bartel

    (@andrew-bartel)

    11 years, 8 months ago

    You’ve got some markup errors. I’d start there. For example the <div id=”free listing”> is missing the opening quotation mark.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Getting external javascript to work in my theme header’ is closed to new replies.