I have been developing wordpress plugins for a while now and i always seem to get the following issues with all my plugins Jquery conflicts issues.
I have tried so many different ways to avoid these but i always get users contacting me saying when they have installed one off my plugins it has stopped another plugin from working aahhhhh.
I really want to get this sorted because i understand how frustrating this can be for people.
I always set and option or include wordpresses jquery, below is just an example not working code.
add_action( 'init', array( $this, 'include_jquery' ) );
function include_jquery(){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1');
wp_enqueue_script('jquery');
}
Ok so after issues with this i now have a select option in the plugin admin to toggle yes or no to include jquery or not i know it is automatically installed but some users remove this, this works for some people but not all.
if you include the wordpress jquery i know you have to run your jquery with the following.
jQuery(document).ready(function ($) {
jQuery instead of the dollar sign $
i understand and have used jquery no conflict and tried and tested some if not all off these
http://api.jquery.com/jQuery.noConflict/
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
This as with the others works for some but not all users with conflicts arising still with certain users.
I am hoping that from this post some of us wordpress plugin developers could help out and post a bullet proof way to use wordpress and jquery within our plugins without getting conflict issues.
Thanks
Doesn't it work with a closure?
(function($){
// your plugin code
})(jQuery);
Read these parts of the codex :
Load a default WordPress script from a non-default location
jQuery noConflict wrappers
You should use wp_enqueue_scripts hook instead of init.
And you should use jQuery.noConflict(); instead of $.noConflict();.
Related
Bit is a basic question here but can someone confirm that this statement be confirmed: WordPress Pages (certain templates created within) can pull different CSS and JS?
Or - does WordPress only permit universal CSS + JS to be pulled across the entire site?
Thanks for clearing this up.
Depends on what plugin and themes you use. The WordPress/PHP functions wp_enqueue_style() and wp_enqueue_script() can be used literally by everyone (core, themes, plugins, you) to request WordPress to load styles or JavaSctript. You can combine this with WordPress functions to check whether the current page is something you want to filter for (post type, post, front-page, category archive, template, etc.). Here is an example to load a custom style if on front page :
if (is_front_page()) {
wp_enqueue_style('custom-frontpage', 'my/path/to/frontpage.css');
}
You will have to hook this piece of code to the wp_enqueue_script action so that WordPress executes it at the appropriate time. Here is an example using an anonymous function:
add_action('wp_enqueue_scripts', function() {
if (is_front_page())
wp_enqueue_style('custom-frontpage', 'my/path/to/frontpage.css');
});
You can also register your code as a "normal" function and pass the functions name to add_action() instead.
Edit: Enabling and disabling plugins is a bit more difficult, since you can never know how they implement their features without examining the source code. Here are my thoughts on this:
The plugin likely uses the above method (wp_enqueue_styles, wp_enqueue_scripts) to register it's styles and scripts. The plugin, since it assumes to be needed on all pages and posts, does this on every page without the conditional checking described earlier.
You could do one of the following to stop the plugin from doing this:
Identify the place where the plugin loads the styles and scripts and add the if-statement to only do so if the post-ID matches your desired post-ID. This method is bad since your changes are lost every time the plugin is updated.
Write a "counter plugin" (you could just add it to your theme or find a plugin that allowes you to add PHP to your page) that "dequeues" the style and script added by the plugin with inversed conditional tag
The counter-plugin approach would look as follows:
function custom_unregister_plugin() {
if (not the desired blog post) {
wp_dequeue_style('my-plugin-stylesheet-handle');
wp_dequeue_script('my-plugin-script-handle');
}
}
Make sure this function is executed after the enqueuing-code of your plugin by giving it a low priority in the same hook (999 is just an example, test it yourself):
add_action('wp_enqueue_scripts', 'custom_unregister_plugin', 999);
With wp_enqueue_style() you can add stylesheet (https://developer.wordpress.org/reference/functions/wp_enqueue_style/)
You can use it after detecting which template is used
function enqueue_custom_stylesheet() {
if(get_page_template() == 'contact.php')
wp_enqueue_style( 'contact-style', get_template_directory_uri().'/contact.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_stylesheet' );
You can use wp_enqueue_style for your CSS, wp_enqueue_script for your JS, wp_localize_script to pass variables from PHP to JS.
You can call these with hooks like:
funtion enqueue_my_stuff()
{
// your enqueue function calls
}
add_action('wp_enqueue_scripts','enqueue_my_stuff'); //front end
add_action('admin_enqueue_scripts','enqueue_my_stuff'); //admin panel
add_action('login_enqueue_scripts','enqueue_my_stuff'); //login screen
I am writing a custom widget for my own WordPress theme.
From WordPress 3.5 there is a new Media Uploader instead of the old ThickBox.
My widget used to work fine on WordPress versions older than 3.5, but now the new media uploader prevent the old working behavior.
I added a check in the costructor for the presence of wp_enqueue_media function:
if( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
but when this part of cose is executed javascript throw an error in the console stopping Js engine:
Uncaught TypeError: Cannot read property 'id' of undefined load-scripts.php:69
I removed all the widget code and reduced it to bare bones... the error is caused by wp_enqueue_media() calls, but I cannot get my head around why and how to fix it.
I also read Wordpress 3.5 custom media upload for your theme options, but there is no mention to this issue
Can anyone point me in the right direction? Is there any documentation available for the the WordPress 3.5 Media Uploader?
It's too late for you now, but might be helpful for other people. I managed to make it work using
add_action( 'admin_enqueue_scripts', 'wp_enqueue_media' );
Hope it helps!
The problem you are experiencing is because you probably put your custom jquery in the header and you didn't registered wordpress jquery. If multiple jquery are defined you will get that error.
My sugestion is you should either remove your jquery script or remove the one from wordpress
function remove_jquery() {
wp_deregister_script('jquery');
//wp_register_script('jquery', ("//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"), false);
}
if(!is_admin()){add_action('init', 'remove_jquery');}
I suggest you use the jquery wordpress provides you, if not, the proper way to enqueue it is to deregister the default one an register your jquery. Just remove the comments from the remove_jquery function.
Also, the above code should go in functions.php
Cheers.
From codex [1], the function wp_enqueue_media( $args ) should be called from 'admin_equeue_scripts' action hook. or later.
Example:
function enqueue_media() {
if( function_exists( 'wp_enqueue_media' ) ) {
wp_enqueue_media();
}
}
add_action('admin_enqueue_scripts', 'enqueue_media');
Hope it helped.
[1]. https://codex.wordpress.org/Function_Reference/wp_enqueue_media
To debug, you need to get the non-minified versions of the js sent to the browser. See the docs:
SCRIPT_DEBUG
SCRIPT_DEBUG is a related constant that will force WordPress to use the "dev" versions of core CSS and Javascript files rather than the minified versions that are normally loaded. This is useful when you are testing modifications to any built-in .js or .css files. Default is false.
define('SCRIPT_DEBUG', true);
I can't get any enqueue_script to work, here is my code (which is in my plugin file)
function load_custom_wp_admin_style() {
wp_enqueue_script( 'jquery-ui-datepicker', '', array('jquery'));
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
Where am i going wrong? I can't seem to load my own scripts either
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
I am now getting jquery-ui script loaded, but the datepicker script is not being loaded
jquery-ui-datepicker is bundled with WordPress (recent versions) so you don't need to tell it anything more than the script handle.
wp_enqueue_script('jquery-ui-datepicker');
But: "can't get it to work" means what exactly? Have you looked in the page source and not found the script being loaded? Or it loads, but has no CSS styling it? I suspect your problem is the latter, because you aren't enqueuing any CSS for the datepicker (above, at least).
Now, the problem is that WordPress doesn't actually bundle in any supporting CSS for the datepicker, since WordPress itself doesn't use it. So, you need to either:
add some supporting CSS to your admin stylesheets
enqueue a compatible standard jquery-ui theme, e.g. from a CDN
For the latter, I blogged about that a while ago; here's some code that should handle that for you; add it to your function, above.
global $wp_scripts;
// get registered script object for jquery-ui
$ui = $wp_scripts->query('jquery-ui-core');
// tell WordPress to load the Smoothness theme from Google CDN
$url = "https://ajax.googleapis.com/ajax/libs/jqueryui/{$ui>ver}/themes/smoothness/jquery.ui.all.css";
wp_enqueue_style('jquery-ui-smoothness', $url, false, null);
That loads the whole enchilada, but you might want to pare it back to just the CSS that the datepicker needs.
Edit: to get the datepicker script on an older version of WordPress which doesn't bundle the datepicker script with the other jquery-ui scripts, the easiest solution is to install Use Google Libraries. This plugin will replace the local jquery scripts with Google's CDN hosted versions, and all jquery-ui scripts will be downloaded as a single (well-cached!) script.
I have created custom post type 'portfolio' in my wordpress application.
I am using wp-pagenavi plugin for pagination of custom posts.Can anyone guide me how will I implement ajax pagination i.e load newer posts without reloading the whole page. Any help will be greatly appreciated...
/*******ajax pagination*******/
jQuery(document).on('click', '#pagination a', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#content').html('Loading...'); //the 'main' div is inside the 'content' div
jQuery('#content').load(link+' #main');
});
the .live() function has been depreciated so use .on() instead.
obviously the jQuery library is needed too.
Here's a couple of options you can try:
AJAXify WordPress Tutorial
AJAXify WordPress Plugin
I've used the first option, its a good tutorial. I know it works. You may need to modify it some though. I cannot vouch for the second option as I've never used it. Just a quick Google search turned it up though.
Can you import jquery into wordpress when you're not using <?php wp_head(); ?>
i'm just beginning with wordpress and didnt include that in my theme, when i add it now it meses some things up and since i only have to add 1 more thing with jquery i dont want to do the hassle of fixing those things, so i just need to add jquery without the the tag. Any ideas?
You can manually add jQuery from the Google CDN like this in header.php, above an other calls to jQuery libraries:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
But realize that not using wp_head in your theme means you will need to manually add links to JS and CSS files for most plugins, as they hook into WP via wp_head and sometimes get_footer, too.
If things don't work right, use Firebug with Firefox to determine what JS is loading and if there are conflicts and errors.
Use the wp_enqueue_script() function. It's best to use this and let wordpress worry about including the jquery scripts so that you don't end up having the themes/plugins/whatever each including their own versions.
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
i'm just beginning with wordpress and didnt include that in my theme, when i add it now it meses some things up and since i only have to add 1 more thing with jquery i dont want to do the hassle of fixing those things, so i just need to add jquery without the the tag. Any ideas?
I would highly recommend that you keep <?php wp_head(); ?> not having wp_head will cause more problems down the road. For example, your friend will not be able to use most plugins.
If you want to use Googles jQuery you just need to de register WordPress's jQuery:
if( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false, '1.4.2');
wp_enqueue_script('jquery');
}