Ask your WordPress questions! Pay money and get answers fast! (more info)

How to enqueue jquery? WordPress

  • SOLVED

Hello, working on a site … just finished the HTML / CSS and now I am in the process of converting to Wordpress.

I’ve been told there are better ways of including jquery scripts so that they won’t interfere with other plugins …

Do you have any suggestions?

<strong>Dev:</strong> [[LINK href="http://wcdco.info/cV"]]http://wcdco.info/cV
[[/LINK]]

Answers (5)

2010-11-10

Pippin Williamson answers:

Put this above <?php wp_head(); ?>


<?php wp_enqueue_script('jquery');?>


Then put your code after wp_head like this:


<script type="text/javascript">
//<![CDATA[
var $j = jQuery.noConflict();
$j(window).load(function(){

// use $j for jquery functions

});
//]]>
</script>


West Coast Design Co. comments:

I assumed I needed to add some code to each individual .JS file including my version of jQuery… I guess that’s not the case?


Pippin Williamson comments:

No, you don't.

Also, to include a file, such as a jquery plugin, you can do it like this (above wp_head):



<?php wp_enqueue_script('plugin-name', 'path/to/your/file.js');?>


Pippin Williamson comments:

Wordpress also comes bundled with a version of jquery, so you don't even need to include it in your theme.


West Coast Design Co. comments:

Interesting, as soon as I remove ‘jquery.js’ v1.4.3 my scripts fail, thus wondering how jQuery would be included automatically?

Also … currently I am using this method to include my scripts;


<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>


Any way I can include the template directory automatically?

<?php wp_enqueue_script('plugin-name', 'path/to/your/file.js');?>

Pippin,

I don’t want to waste too much of your time for $4 … I don’t mind tipping if that’s a possibility with WP Questions :) I just want to finally learn the correct way of including jQuery ... save some future headaches!


Pippin Williamson comments:

For loading jquery, just use the one that comes bundled with WordPress. For loading your own scripts, you can the template_directory function. So your whole thing should look like this:


<?php wp_enqueue_script('jquery'); // don't include .js ?>
<?php wp_enqueue_script('your-script', get_bloginfo('template_directory') . '/js/your-script.js'); ?>


$10 would be perfect :) You can raise question prize amounts.


West Coast Design Co. comments:

I think I am failing … maybe I should just become a lumber jack, any ways it doesn’t seem to be working …

<strong>Dev:</strong> [[LINK href="http://wcdco.info/cV"]]http://wcdco.info/cV[[/LINK]]

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title('');?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<?php wp_enqueue_script('jquery'); ?>

<script type="text/javascript">

//<![CDATA[

var $j = jQuery.noConflict();

$j(window).load(function(){

// use $j for jquery functions

});

//]]>

</script>

<?php wp_enqueue_script('coda-slider', get_bloginfo('template_directory') .'/js/coda-slider.js'); ?>

<?php wp_enqueue_script('main-script', get_bloginfo('template_directory') .'/js/main.js'); ?>

<?php wp_enqueue_script('select-box', get_bloginfo('template_directory') .'/js/jquery.selectbox.js'); ?>

<?php wp_enqueue_script('select-box', get_bloginfo('template_directory') .'/js/jquery.easing.js'); ?>

<!--<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
-->

<?php wp_head();?>

<style type="text/css" media="screen">
@import url("<?php bloginfo('template_directory'); ?>/css/main.css");
@import url("<?php bloginfo('template_directory'); ?>/css/selectbox.css");
</style>

<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/ie6.css" /><![endif]-->

</head>


Pippin Williamson comments:

This part


<script type="text/javascript">

//<![CDATA[

var $j = jQuery.noConflict();



$j(window).load(function(){

// use $j for jquery functions

});

//]]>

</script>


needs to go after <?php wp_head();?>

Also, check the source and make sure that the paths to the js files are correct.


West Coast Design Co. comments:

Well I am finely seeing the scripts loading … but there not actually working … wondering when I specify ‘jquery’ and it loads 1.4.2 … and my site was coded for jQuery 1.4.3 would this make a difference?
I tested this by updating Wordpress’s version of jQuery and well that didn’t work either …

This might have been a bad idea … lol


West Coast Design Co. comments:

Code from browser, whats up with the '3.0.1'?

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://dev.smartessay.co/wp-content/themes/smart/style.css" />
<link rel="pingback" href="http://dev.smartessay.co/xmlrpc.php" />






<meta name='robots' content='noindex,nofollow' />
<script type='text/javascript' src='http://dev.smartessay.co/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>

<script type='text/javascript' src='http://dev.smartessay.co/wp-content/themes/smart/js/main.js?ver=3.0.1'></script>
<script type='text/javascript' src='http://dev.smartessay.co/wp-content/themes/smart/js/coda-slider.js?ver=3.0.1'></script>
<script type='text/javascript' src='http://dev.smartessay.co/wp-content/themes/smart/js/jquery.selectbox.js?ver=3.0.1'></script>
<script type='text/javascript' src='http://dev.smartessay.co/wp-content/themes/smart/js/jquery.easing.js?ver=3.0.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://dev.smartessay.co/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://dev.smartessay.co/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Smart Essay Co.' href='http://dev.smartessay.co' />
<meta name="generator" content="WordPress 3.0.1" />

<script type="text/javascript">

//<![CDATA[

var $j = jQuery.noConflict();

$j(window).load(function(){

// use $j for jquery functions

});

//]]>

</script>

<style type="text/css" media="screen">
@import url("http://dev.smartessay.co/wp-content/themes/smart/css/main.css");
@import url("http://dev.smartessay.co/wp-content/themes/smart/css/selectbox.css");

</style>

<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="http://dev.smartessay.co/wp-content/themes/smart/css/ie6.css" /><![endif]-->

</head>


Pippin Williamson comments:

Since you're using 1.4.3, replace this:


<?php wp_enqueue_script('jquery'); ?>


with


wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'path-to-your-jquery');


Most likely, that isn't the reason though. If this doesn't work, then I will be more than happy to take a look at if you can give me access, though the price money will have to be increased to around $20.


Pippin Williamson comments:

For the 3.0.1--that is the version number that's getting outputted. You can manually pass a version number.

Look at this page: [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]http://codex.wordpress.org/Function_Reference/wp_enqueue_script[[/LINK]]


West Coast Design Co. comments:

Pippin, just direct messaged you :)

2010-11-10

Utkarsh Kukreti answers:

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

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

2010-11-10

Nick Parsons answers:

Or you can add this to functions.php:

function add_jquery(){
wp_enqueue_script('jquery');
}
add_action('init','add_jquery');

2010-11-10

Edouard Duplessis answers:

best answer #Utkarsh Kukreti


West Coast Design Co. comments:

Considering your probably Utkarsh Kukreti, I recommend taking 1.5 seconds and turning your links in actual hyperlinks.


Edouard Duplessis comments:

hehehe ... i'm not #Utkarsh Kukreti

but and can make the link for you

[[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]http://codex.wordpress.org/Function_Reference/wp_enqueue_script[[/LINK]]

[[LINK href="http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/"]]http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/[[/LINK]]


Edouard Duplessis comments:

hum have been reading the second link...

its not a good way

the proper way is to call it in your functions.php...

because wp_enqueue_script(); load the script in the wp_head()

so if you have a script that need jquery...

you just have to make a wp_enqueue_script('myCustomScript', 'link_to_my_custom_script.js','array('jquery'));

the third element is for the dependancies


2010-11-10

Jarret Minkler answers:

I think these are all bad answers .. this will send the browser into a blocking tizzy, you want to COMBINE all your jquery plugins, core, and any custom js into a SINGLE .js file ..

Look into combining plugins ..