0

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.

2
  • 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. Nov 30 '11 at 18:45
3

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.

0

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

1
  • 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
0

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.

0

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;

 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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