AJAX and Jquery Conflicts

With the increasing popularity of WordPress, many themes are being released daily. Unfortunately many of these themes are poorly coded and some others do not follow the WordPress coding standards.

If you have been experiencing issues with Ajax calls and elements that make use of the jQuery Library after you installed a WordPress Plugin, make sure you go through the list of possible causes below.

Javascript files being inserted into your theme using the wrong method

This is definitely the most common reason why your theme may be not working properly. Whenever a developer wants to add a new Javascript file to a theme or a plugin there is a simple rule that should be followed.

WordPress uses the wp_enqueue_script function to add Javascript files to your website. This method prevents your website from calling multiple instances of the same script and it also makes sure that your website is using the latest available version from that file. By using this simple method, your website is most likely to be free from Javascript errors and conflicts.

It is quite easy to identify a theme or a plugin that doesn`t use the wp_enqueue_script function. You can open your theme`s header.php and footer.php files, if you see something like this:

It means that your theme is manually inserting the files on your website, in this case, if one of your plugins wants to use this same file it will insert a second instance of it, causing some of the features that use the script not to work properly.

The Solution

The easiest way to fix this issue is to remove the script from your theme header.php, by doing this, only the version being used by your plugin would be called on your website.

In case you are more familiar with programming languages you can try to insert the necessary Javascript files to your theme using the wp_enqueue_script function. You can see a complete tutorial on how to do that here

jQuery not using compatibility mode

jQuery is probably the most famous Javascript Library in the moment, as it is not exclusively used by WordPress, most tutorials and guides will use a code like this:

/* How jQuery is taught on most tutorials */
$("#element_id").whatever();

But since WordPress has some other libraries that may be used by different themes and plugins, the use of $ may cause conflicts between these scripts. If you are familiar with Firebug or any other developer tool used to debug your code, you should probably be seeing the following error on your Console: “$ is not a function”

The Solution

In order to fix this issue, you can edit your Javascript files to make use of “jQuery” instead of “$”, so you would get something like this:

/* How jQuery should be used on WordPress */
jQuery("#element_id").whatever();

Theme making modifications in a shortcode output

Some WordPress themes will disable the wpautop function in order to fix and clean your content output. Unfortunately, this method will also change the external outputs, which sometimes, may break the javascript and/or other features that are directly included in the plugin shortcode. This can easily be avoided by putting the plugin shortcode between [raw] tags, so you would have something similar to this:

[raw][shortcode_here][/raw]

The raw tag is usually added by the theme itself in order to solve this kind of issue, but if by any chance your theme doesn`t support it, you must get in contact with the theme creators and ask them about the function that is modifying your content output and how to disable it.

Missing wp_header and/or wp_footer functions on theme

wp_head and wp_footer are vital functions to maintain your website working properly, specially when you have different plugins installed. Basically what these functions do is to indicate the path for the insertion of javascript files on your theme, if the plugin can`t find this path it won`t be able to call the necessary files on your website.

The Solution

Inside your theme header.php you must insert the following code right before the </head> closing tag:

<!-- Here you should see a lot of tags and content -->
...
...
<!--?php wp_head(); ?-->



Inside your theme footer.php you must insert the following code right at the bottom of the file:

<!--?php wp_footer(); ?-->

You can see a detailed guide about both functions here: www.buckleupstudios.com/blog/wordpress-wp_head-wp_footer-functions/

Follow us on twitter Join us on twitter