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

Javascript enqueue - Avoid javascript conflicts WordPress

  • SOLVED

Hi There,

I have built a custom wordpress theme and it seems that a lot of plugins are not compatible with the theme and I believe it has to do with javascript conflicts. (jquery and possibly others)

I am curious as to what is the absolute best way to include javascript in a custom wordpress theme to ensure that is is compatible with as many plugins as possible. (both the jquery library as well as custom javascript files I;ve included in the theme)

Currently the javascript is being called in header.php and footer.php.

I have red that using the enqueue is the best way to call in javascript, but I don't know a whole lot about this.

If possible, I would like to have all of my javascript references in an external file to keep things organized and keep my page header/footer nice and tidy.

Thanks a lot for your expert help.

Answers (7)

2010-07-13

Buzu B answers:

Well. I have to say that there is more than just using wp functions to load javascript files. It never hurts to go a bit further and leave a really small footprint on the global scope. You can do that by wrapping all your javascript in an anonymous function that will be fired automatically. This way all variables are "trapped" inside the function and not available from outside. This is a common way to simulate namespaces in javascript. Most of the time the conflicts are because you are using the same variable/function names as other scripts. These get overwritten and then the problem begins. If you are looking for a specific solution to this problem, I can provide you with it, but, depending on the complexity, it might be more expensive than 8 bucks.


WP Answers comments:

Hi Buzu,

This sounds very interesting. Would the logic behind your solution be be re-usable on future projects?

I am willing to up the prize money. I just want to be sure that I have a "bullet-proof" solution to ensure that users can use any plugins without any conflicts. Will this method ensure that?

Thanks a lot for your help.


Buzu B comments:

I would say that it would solve more than 90% conflicts, but that's just a blind guess. To really know if the solution I suggest is the one you need I need to look at the actual code that is causing the conflicts, analyze the conflicts, and diagnose the real problem so that it can be addressed properly. It's all about the code.


WP Answers comments:

I understand. I don't necessarily have exact conflicts that I am trying to figure out, just looking for a mostly bullet-proof solution, and I suppose if a specific conflict came up we could cross that bridge when we came to it.

I am interested in your solution. How much prize money would you require for the customization?

(I am getting ready to go to bed, so I can increase the prize money before I go to bed, but won't be able to test the code until the morning)

Thanks a lot for your help.



Buzu B comments:

Like I said, It all depends on your code, but a wild guess would be $20 dollars.


WP Answers comments:

Ok, I will increase the prize money.

What code do you need me to send you?


Buzu B comments:

If it is possible, I'd like to get the whole theme, otherwise, all the javascript files. I want the whole theme so I can see how it interacts with the javascript, but the javascript files alone should suffice.


WP Answers comments:

Sure thing. I have just increased the prize money. I will send you a zip file through email right now.

I am off to bed, but I will test the code in the morning.

Thank you again for your help.


Buzu B comments:

OK. I'll check it out.

2010-07-12

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...

2010-07-12

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');
?>

2010-07-12

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

2010-07-13

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]]

2010-07-13

Jarret Minkler answers:

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


WP Answers comments:

Thanks for nothing Mate ;)

2010-07-13

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/