WordPress.org

Ready to get started?Download WordPress

Forums

Getting external javascript to work in my theme header (6 posts)

  1. ltc411
    Member
    Posted 2 years 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

  2. ltc411
    Member
    Posted 2 years 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?

  3. ltc411
    Member
    Posted 2 years 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?

  4. Andrew Bartel
    Member
    Posted 2 years ago #

    Use wp_enqueue_script() in your header.php instead.

  5. ltc411
    Member
    Posted 2 years 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');

  6. Andrew Bartel
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.