Javascript enqueue - Avoid javascript conflicts WordPress

Jepser Bernardino answers:

Hi!
Well, you are right, since non-conflict mode has to be enable to avoid conflicts with javascript; you have to put this in your functions.php:

function my_init() {
if (!is_admin()) {
wp_enqueue_script('jquery');
}
}
add_action('init', 'my_init');

(remember to erase de direct reference in your header.php)


Then you have to put this:

jQuery(function ($) {
/* You can safely use $ in this code block to reference jQuery */
});

In order to keep your code the same until now... to have more reference visit:

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

I hope it helps, let me know any doubt...

Pippin Williamson answers:

To load jquery do:

wp_enqueue_script('jquery');

To load any other javascript file do something like this:


wp_enqueue_script('jquery.min', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js', false, '1.4', 'all');


The syntax for the above line is:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

For further explanation, look at the [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]Wordpress Function reference[[/LINK]]

To include javascript code directly, do it like this:


<script type="text/javascript">
//<![CDATA[
var $j = jQuery.noConflict();
jQuery(document).ready(function()
{
$('#wpap_datepicker').datepicker(); //this is where you put your own javascript
});
//]]>
</script>



This will make everything work everywhere.


Update:

Your final code would look like this:


<?php
wp_enqueue_script('jquery-1.2.6.min', 'path/to/your/file/jquery-1.2.6.min.js', false, '1.2.6', 'all');
wp_enqueue_script('jquery.cycle.all', 'path/to/your/file/jquery.cycle.all.js', false, '1.0', 'all');
wp_enqueue_script('custom', 'path/to/your/file/custom.js', false, '1.0', 'all');
wp_enqueue_script('cufon-yui.js', 'path/to/your/file/cufon-yui.js', false, '1.0', 'all');
wp_enqueue_script('S_700', 'path/to/your/file/S_700.font.js', false, '1.0', 'all');
wp_enqueue_script('swfobject', 'path/to/your/file/swfobject.js', false, '1.0', 'all');
?>


Place all of that before

<?php wp_head(); ?>


File location:

If your js files are stored in a folder called "js" inside your rooter wordpress folder (the same folder with wp-content), you would do:


wp_enqueue_script('swfobject', . get_bloginfo('url') . '/swfobject.js', false, '1.0', 'all');


You may need to remove the beginning / from swfobject.js, just depends on whether get_bloginfo('url') puts a trailing / on the end or not.

The blank screen is caused by a syntax error. If you send me an email at [email protected] and attach your header.php file, I will fix it and email it back.

Using the code I provided is a bullet proof solution. It is the way that all professional theme / plugin developers do it.

The WordPress wp_enqueue script is the <strong>best</strong> way to do it.

If you do a little google research, you will find that <strong>everyone</strong> will tell you the same thing.

WP Answers comments:

Hi Pippin,

thank you for the advice. So just to be sure, I should include the code you've outlined in my header.php file correct?

Will the code you outlined ensure that 2 instances of the same code won't be called twice? (ie if a plugin calls jquery will it only be called the one time that I specified?)

Here are the javascript files I need to include. Can you please help me with the syntax of how these should look based on your logic above?

Thanks a lot for your help.

Javascript files:
- jquery-1.2.6.min.js
- jquery.cycle.all.js
- custom.js
- cufon-yui.js
- S_700.font.js
- swfobject.js

WP Answers comments:

Thank you very much.

One more thing before I test.

My path to my files is: <?php bloginfo('template_url'); ?>/js

Can I just add exact code in place of 'path/to/your/file/' ?

WP Answers comments:

Thank you for that. I have added this code, but now when I view my site it does not load. It is just a blank white screen.


Here is the code. I have tried with and without the "/"

<?php
wp_enqueue_script('jquery-1.2.6.min', . get_bloginfo('url') . 'js/jquery-1.2.6.min.js', false, '1.2.6', 'all');
wp_enqueue_script('jquery.cycle.all', . get_bloginfo('url') . 'js/jquery.cycle.all.js', false, '1.0', 'all');
wp_enqueue_script('sansation_custom', . get_bloginfo('url') . 'js/sansation_custom.js', false, '1.0', 'all');
wp_enqueue_script('cufon-yui.js', . get_bloginfo('url') . 'js/cufon-yui.js', false, '1.0', 'all');
wp_enqueue_script('Sansation_700.font.js', . get_bloginfo('url') . 'js/Sansation_700.font.js', false, '1.0', 'all');
wp_enqueue_script('swfobject', . get_bloginfo('url') . 'js/swfobject.js', false, '1.0', 'all');
?>
<?php wp_head(); ?>


Pippin Williamson comments:

Put this exact code in your functions.php (or your mail plugin file if you're writing a plugin):


<?php

function load_custom_js()
{
if (!is_admin())
{
wp_enqueue_script('jquery-1.2.6.min' . get_bloginfo('url)') . '/js/jquery-1.2.6.min.js', false, '1.2.6', 'all');

wp_enqueue_script('jquery.cycle.all' . get_bloginfo('url)') . '/js/jquery.cycle.all.js', false, '1.0', 'all');

wp_enqueue_script('custom' . get_bloginfo('url)') . '/js/custom.js', false, '1.0', 'all');

wp_enqueue_script('cufon-yui.js' . get_bloginfo('url)') . '/js/cufon-yui.js', false, '1.0', 'all');

wp_enqueue_script('S_700' . get_bloginfo('url)') . '/js/S_700.font.js', false, '1.0', 'all');

wp_enqueue_script('swfobject' . get_bloginfo('url)') . '/js/swfobject.js', false, '1.0', 'all');
}
}

add_action('wp_head', 'load_custom_js');
?>


Edouard Duplessis answers:

the best way is to use:

wp_register_script();
[[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]wp_enqueue_script();[[/LINK]]

and you put it in your functions.php

Ronald Huereca answers:

I know this might not be the ideal answer, but I wrote an in-depth article on JavaScript loading via WordPress on this article:

[[LINK href="http://weblogtoolscollection.com/archives/2010/05/06/adding-scripts-properly-to-wordpress-part-1-wp_enqueue_script/"]]Adding Scripts Properly to WordPress - wp_enqueue_script[[/LINK]]

Jarret Minkler answers:

Here's a novel idea. Don't use jquery. Save yourself the headache.

WP Answers comments:

Thanks for nothing Mate ;)

Oleg Butuzov answers:

http://www.webogroup.com/home/site-speedup-wordpress/

Oleg Butuzov comments:

free alternatives
http://wordpress.org/extend/plugins/wp-minify/
http://wordpress.org/extend/plugins/wp-js/
http://wordpress.org/extend/plugins/wp-css/