CODEWITHSUNDEEP
javascriptwordpressconflict
LITguy
LITguy

Reputation: 623

Good practice for preventing WordPress javascript conflicts?

I followed a tutorial on creating your own custom WP themes. They are stripped down to the basics and work great until I get deeper into adding scripts. Each time I try to add a new plugin, or something that involves a javascript, the slider stops working, or the new plugin doesn't function.

I'm only asking for advice on good programming technique or practice when adding a plugin, adding scripts manually, etc.

If you manually paste in javascript into the <head> should you put it above or below certain code to prevent conflicts?

Not asking for a handout or the kitchen sink. I simply do not understand the order in which to add scripts or best way to do so. Here is an example of how my basic WP header.php file looks which works perfectly until I begin to add plugins:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> 
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>

<script type="text/javascript" src="click2call.js"></script>
<script type="text/javascript">
    function send_call() {
        document.getElementById("CallBtn").value="Dialing.."; 
        var button_id  = document.getElementById('button_id').value;
        var cid_number = document.getElementById('cid_number').value;
        var cid_name   = document.getElementById('cid_name').value;
        click2call(button_id, cid_number, cid_name);
    }
    jQuery('.sub-menu').parent().find('a:first').removeAttr('href').css('cursor','default');
</script>

Upvotes: 0

Views: 764

Answers (3)

JoshMock
JoshMock

Reputation: 1301

I'd highly recommend reading Addy Osmani's extensive writeup on good namespacing patterns in JavaScript. Using immediately-invoked function expressions to prevent global scope issues and using a unique object name to prefix all your proprietary functions will keep all your code separate.

Also, if your theme has specific JavaScript library dependencies (like jQuery, Underscore, etc.) you should learn how to include things the "WordPress way" to prevent naming conflicts that are common when accidentally including common libraries more than once.

Upvotes: 1

Parris
Parris

Reputation: 18418

There are a few things you can do.

  • You can try to confirm that a plugin is "ADSafe": http://www.adsafe.org/ , but there are many plugins that aren't that I'd still use.
  • Make sure to namespace like such:

var mynamespace = namespace || {}; 

(function() {  
   function myClass() {  
   }  

   mynamespace.myClass = myClass();  
}());

or

(function(){
   mynamspace.something = {
      something : function(){
      }
   }
}());
  • You can try to see if the there is a "noConflict" mode for your libraries or plugins and set that variable.
  • Avoid Globals where possible
  • Hope and pray?

Upvotes: 0

maiorano84
maiorano84

Reputation: 11951

Usually your safest bet to prevent naming conflicts would be to consistently add a unique prefix to your function and variable names.

Let's say you wrote a function called "begin_slide()". This would probably conflict with NUMEROUS other plugins and scripts, so if you want to make sure yours - and ONLY yours - is called, you can name it something like, "LITguy_begin_slide()".

Upvotes: 1

Related Questions