How to fix my old theme so it loads jQuery properly

Question

I have an older theme that is loading jQuery 'manually', and this conflicts with all plugins that are trying to use jQuery. The following lines are included in the theme header:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.inputs.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.scrollpane.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/swfobject.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/functions.js"></script>

I understand that I'm supposed to call a native WordPress hook to load these files, but I don't know the exact steps to do this. Can you help? Sorry for my noobiness.

Answer 1

Taking a stab at a general answer, since we don't (yet?) have access to the specific Theme.

Note: all of these edits can - and perhaps should - be implemented via Child Theme.

First, you need to remove ALL of those lines from header.php. Scripts should be enqueued, rather than hard-coded into the template.

Then, you need to add the following to functions.php:

<?php
function wpse35169_enqueue_scripts() {
    // Enqueue WP-core bundled scripts
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'swfobject' );
    // Enqueue custom scripts
    wp_enqueue_script( 'jquery-inputs', get_template_directory_uri() . '/js/jquery.inputs.js', array( 'jquery' ) );
    wp_enqueue_script( 'jquery-scrollpane', get_template_directory_uri() . '/js/jquery.scrollpane.js', array( 'jquery' ) );
    wp_enqueue_script( 'jquery-mousewheel', get_template_directory_uri() . '/js/jquery.mousewheel.js', array( 'jquery' ) );
    wp_enqueue_script( 'jquery-easing', get_template_directory_uri() . '/js/jquery.easing.1.3.js', array( 'jquery' ) );
    wp_enqueue_script( 'jquery-lightbox', get_template_directory_uri() . '/js/jquery.lightbox-0.5.js' );
    wp_enqueue_script( 'wpse35169-functions', get_template_directory_uri() . '/js/functions.js' );
}
// Hook into 'wp_enqueue_scripts'
add_action( 'wp_enqueue_scripts', 'wpse35169_enqueue_scripts' );
?>

If you need a specific dependency/load order for lightbox or functions.js, just add the appropriate $deps array to the wp_enqueue_script() call.

That should resolve your issue - but again, without knowing what Theme you're using, I can't be 100% certain.

Answer 2

Add the following code to your functions.php for each script:

wp_enqueue_script('handle',  get_bloginfo('stylesheet_directory').'/path/to/script.js', array('dependencies'));

for instance:

wp_enqueue_script('jquery',  get_bloginfo('stylesheet_directory').'/js/jquery-1.7.1.min.js');

Dependencies is only for scripts that depend on other script(s) - so you'd fill in 'jquery' for all scripts that need jQuery.

Reference: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Answer 3

I would use Google's copy of jquery instead of the bundled wordpress versions. The primary advantage being that most sites out there use google code so your users wouldn't have to load another copy of jquery since they could just use the cached script.

    // Load jQuery
   if ( !is_admin() ) {
      wp_deregister_script('jquery');
      wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"), false);
      wp_enqueue_script('jquery');

}

From there I would enqueue your custom scripts as suggested by Chip.

Answer 4

Fun new way to register and enqueue your theme scripts. Also makes it a little easier to add and remove new scripts when needed.

/**
 *  Registers javascript using wp_register_script
 *
 * '$handle' => array(
 * 'remote'  => boolean (true|false),   //optional default false 
 * 'src'     => 'file_name.js',         //string required
 * 'deps'    => 'dependencies',         //string optional 
 * 'footer'  => boolean (true|false)    //optional default false
 */

function scripts() {    
$deregister = array(
    'jquery' => array() 
);
$scripts = array(       
    'jquery'    => array(
        'remote'    => true,
        'src'       => 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
        'deps'      => null,        
        ),
     'jquery.cycle' => array(
         'remote'   => false,
         'src'      => 'jquery-cycle/jquery.cycle.min.js',
         'deps'     => 'jquery'
     ),
     'jquery.jcarousel' => array(
         'remote'   => false,
         'src'      => 'jquery.jcarousel.min.js',
         'deps'     =>  'jquery'
     ),     
    'functions' => array(
        'src'       => 'functions.js',
        'deps'      => 'jquery',
        'footer'    => true,
        )
);  
foreach ( $deregister as $key => $handle ) :
    if ( ! is_admin() ) :
        wp_deregister_script( $key );   
    endif;      
endforeach;

foreach ( $scripts as $key => $value ) :

if ( is_admin() ) return;

  if ( is_array( $value ) && array_key_exists( 'src', $value ) ) :

    $src = !empty( $value[ 'remote' ] ) ? $value[ 'src' ] : THEME_JS_URI . $value[ 'src' ];

        if ( ! $value['deps'] == null ) :
            wp_register_script( $key, $src, $value[ 'deps' ], false, !empty( $value[ 'footer' ] ) );

        else : wp_register_script( $key, $src, false, !empty( $value[ 'footer' ] ) );
    endif;     
        else : wp_register_script( $key, THEME_JS_URI . $src, $value, false );

  endif;

    wp_enqueue_script( $key );

endforeach;

 }