Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
jQuery is currently on ver 1.7, you should consider using the latest version. –  Wyck Nov 30 '11 at 18:08
    
What Theme are you currently using? Knowing the Theme will help us find the Theme's template/functional files, and will facilitate more accurate answers. –  Chip Bennett Nov 30 '11 at 18:45
add comment

4 Answers

up vote 3 down vote accepted

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.

share|improve this answer
add comment

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

share|improve this answer
    
This answer could be improved. For "unregistered" scripts, you need to register (wp_register_script) and then enqueue the script (wp_enqueue_script). You can do both at the same time with wp_enqueue_script, which is what your example shows, but WordPress already registers jQuery, so you should NOT try to simultaneously register it as you have done. Just use: wp_enqueue_script('jquery'); That way, when WP is upgraded, the theme will automatically use the latest jQuery script included with WP and not the possibly old version you reference. –  Doug Nov 30 '11 at 19:18
    
thanks @Doug - interesting to know.. –  ptriek Nov 30 '11 at 21:51
add comment

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.

share|improve this answer
add comment

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;

 }
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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