How to link external JavaScript files?

5 Views

I am working on a custom WordPress theme. I have everything working perfectly so far except for one thing: the external JavaScript files will not work.

I followed the exact advice from the links here and here, but it still does not work.

Read More

I have searched the codex, checked source code, used firebug. I have no idea why this is not working. Unfortunately, due to an NDA, I am not allowed to give you any of the actual code from the site, or a link to it. So I will have to explain as best as I can.

I have used the wp_enqueue_script() to include the files in the functions.php file. The script tags in the head are as follows: 

<script type='text/javascript' src='http://www.xx.com/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
<script type='text/javascript' src='http://www.xx.com/wp-content/themes/twentyten/scripts/custom.js?ver=3.1'></script>

So the files are loading, but they just are not working. I was wondering if the ?ver=3.1 at the end of my custom.js file might have anything to do with it?

The code from my functions.php file: 

function twentyten_custom_scripts() {
if ( !is_admin() ) // instruction to only load if it is not the admin area
{ 
   // register your script location, dependencies and version
    wp_register_script('custom_script', get_bloginfo('template_directory') . '/scripts/custom.js', array('jquery') );
   // enqueue the script
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script('custom_script');
}
}
add_action('template_redirect', 'twentyten_custom_scripts');

I am really lost at this point. I even changed all my: 

$('#elem').hide();

to 

jQuery('#elem').hide();

In the custom.js file according to the codex wp_enqueue_script() no conflicts wrappers section here, still nothing.

Oh, and I am needing this file to load into all of my Pages, but not on my Blog, as I have multiple static pages set up for the main site. I hope that makes sense.

Post Views: 5

Related posts

Leave a Reply

1 comment

  1. From my point of view, this should be working. Maybe you can post your custom.js file here. It could be possible that this file has a syntax error or something similar. You could also test if the built-in jquery is working out of the box by adding a simple jquery-command in your header.php.

    Some hints:

    1. The action-hook template_redirect is used to include the file only on the front-page (so i can remeber). If you want to load the script after the theme is loaded, you can use the after_setup_theme action-hook.

    2. You don’t have to enqueue your jquery file manually, if you set jquery as a dependancy of your custom.js, like you did. The file will automatically be loaded from WordPress before your custom.js is attached.

    3. Do you have added the jQuery.noConflict(); at the beginning of your custom.js?

    Some working example:

    functions.php

    function twentyten_custom_scripts() {
    if ( !is_admin() ) // instruction to only load if it is not the admin area
    { 
        wp_register_script('custom_script', get_bloginfo('template_directory') . '/scripts/custom.js', array('jquery') );
        wp_enqueue_script('custom_script');
    }
}
add_action('after_setup_theme', 'twentyten_custom_scripts');

    custom.js

    jQuery.noConflict();

jQuery(document).ready(function() {
    // do your stuff e.g.
    jQuery("a[rel^='prettyPhoto']").prettyPhoto();
});