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)
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 :)
Utkarsh Kukreti answers:
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
Nick Parsons answers:
Or you can add this to functions.php:
function add_jquery(){
wp_enqueue_script('jquery');
}
add_action('init','add_jquery');
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
Edouard Duplessis comments:
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 ..