I am using owl carousel and slicknav in my WordPress localhost site. I am calling the jquery from my theme folder. I tried using wp_enqueue_script('jquery'); in my functions.php but if I do, then the owl carousel and slicknav don't work. And using that function, I can see jquery loaded in my source code.
Now, I have installed a plugin 'Fancybox for WordPress' and the plugin is not working. If I use wp_enqueue_script('jquery'); function instead of my theme folder's jquery, the plugin works but owl carousel and slicknav doesn't work.
I think the problem is happening because of my jQuery calling. I need a proper way to call jQuery and also I would like to avoid any confliction. That means there must be a way where I can use owl carousel, slicknav and anything else and also I can use plugins that require jQuery. How do I do that?
I have used the plugin in twentyfourteen theme and it works there fine.
Are you sure that you have jQuery loaded before your code? If you get "jQuery is undefined" error in console (F12), probably you need to change the script loading order.
It will be working:
<script src="path-to-jquery/jquery.min.js"></script>
<script>
$('.foo').bar();
</script>
The code below won't be working:
<script>
$('.foo').bar();
</script>
<script src="path-to-jquery/jquery.min.js"></script>
If you want to enqueue file in functions.php, you can't use directly wp_enqueue_script('jquery').
You need to use the action wp_enqueue_scripts then use wp_enqueue_script('jquery') in the callback function.
add_action('wp_enqueue_scripts', 'enqueue_my_js');
function enqueue_my_js(){
wp_enqueue_script('jquery');
wp_enqueue_script( 'owl_caroussel', get_template_directory_uri().'owl_caroussel.js', false ); // adjust the file path & name
}
When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper.
jQuery( document ).ready( function( $ ) {
// $() will work as an alias for jQuery() inside of this function
[ your code goes here ]
} );
Don't forget to enqueue the style files too if need.
Hope it helps.
Related
We are migrating a site from an old version of a CMS to new one. The core code is outside of our control, but we can add custom files/scripts/logic to the system.
We have a page which includes jQuery in the HEAD and then loads several bits of functionality using jQuery.ready()
In the new version of the CMS they have included their own jQuery, but in the footer. The problems are:
we can't now include our own jQuery in the HEAD because it conflicts with their version
removing our jQuery causes all the jQuery code after that to error out, because their jQuery loads in the footer so those functions are unrecognised
we can't edit their code to introduce any scripts after jQuery in the footer
The question is: how can overcome this without being able to edit the core code i.e. the footer?
you can do one thing, Put all your code in init() method. And let it be loaded in head.
At the footer, after loading the Jquery library, Call your init() method using document.ready();
function init(){
alert("hi");
}
//Jquery file loaded hear.
$(document).ready(function() {
init(); //call the init method once Jquery loaded.
});
I'm starting to get into WordPress and looking at developing some plugins.
If I want my plugin to use a specific version of jQuery how do I enable that?
ie. some themes don't use jQuery, some use OLD versions - what if I need a more recent version?
add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
wp_enqueue_script( 'jquery' );
}
I've seen the code above suggested - but will that only load whatever jQuery is in the theme folders already (if at all)?
Is it better to include a jQuery.js file with my plugin, and reference it directly from my plugin code? If, so, how would I change the script above, to load MY version of jQuery?
Thank you for any help,
Mark
The latest WordPress 4.0 comes with jQuery 1.11.1.
But in case you want to remove the WordPress default jQuery library with say either a local new JS or a CDN you can do so by placing the following code in either a plugin or your theme's functions.php
function jquery_cdn() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'jQuery_JS_PATH', false, '1.8.3');
wp_enqueue_script('jquery');
}
}
add_action('init', 'jquery_cdn');
References:
http://core.svn.wordpress.org/tags/4.0/wp-includes/js/jquery/
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
http://agilewp.com/how-to/remove-wordpress-jquery-and-use-googles-cdn-version-instead/
How do you add javascript/jQuery function to work with WordPress plugins.
For example, I want to call a jquery function on submit or button click. Or for client-side form validation.
Well, there are a lot of methods to do that:
Write your plugin, hooking wp_enqueue_scripts action, including external .js file with your jsvascript code
The same, but hooking wp_enqueue_scripts from whithin your theme
Include your external javascript file using < script> tag inside head.php (or other) of your theme
Include your code inline into < script> tag inside any of your theme's file.
I believe this page could help you : http://matthewruddy.com/using-jquery-with-wordpress/
Probably the most common mistake developers make is loading jQuery by
printing the “” tag into the header. Never do this! If you do,
any plugin/theme that requires jQuery will be broken as a result of
your mess. This is because jQuery will be loaded twice, which will
throw errors and break stuff. Instead, use the PHP code below.
add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
wp_enqueue_script( 'jquery' );
}
this is a noobish question but I really tried several options, none of them seemed to work. I have a plugin that is a slideshow with some posts, it works just fine on homepage (index). It uses jquery 1.4.2 and a javascript file. The idea is that when I go inside a post, the javascript file is not loaded, imported (inspecting the sources using chrome's webdev I can see the plugin's style.css but not the javascript file).
I tried several options, apparently the jquery used by wordpress is a bit too old and I need 1.4.2.
I tried registering the 1.4.2 jquery (I will refer as jq), and then enqueuing the script file depending on the new jq, in plugin's php file, also enqueuing the style.css. I also tried including the next code inside functions.php, still not working:
add_action('wp_footer', 'load_slideshow_scripts');
function load_slideshow_scripts() {
wp_register_script('slideshow-jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', array(), '1.4.2', false);
wp_enqueue_script('slideshow-js', plugins_url('contest-slideshow/script.js'), array('slideshow-jquery'), '1.0', false);
wp_enqueue_style('slideshow-css', plugins_url('contest-slideshow/styles.css'));
}
I also tried enqueuing the js files in a function that I hooked to init, still no success. I also tried simply enqueuing these files along with the other scripts loaded by default by the theme in functions.php.
The real problem is that the javascript file is not loaded and the slideshow is not working while in single post, otherwise it works
If it's really a jQuery related problem, you should deregister it first. Try out with this:
function modify_jquery() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', '//code.jquery.com/jquery-1.11.0.min.js', false, '1.11.0');
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');
This piece of code has to be inside the functions.php of your theme. I used the last 1.x jQuery version but edit it if you need/prefer another one.
Good luck!
I am trying to hook up my custom theme created on Bootstrap 3 and installed onto the latest version of WordPress -working fine but there's an issue with it not being able to hook up to the Jquery library or my JS files.
I have usually been able to achieve this by doing:
<script src = "<?php echo get_template_directory_uri(); ?>/js/bootstrap.js"></script>
But it is just failing on me altogether.
So I have WordPress on the root of the Dir with my files sitting in the theme folder as expected. Short of ideas now :/
Side note: I have tried placing these into both header and footer files and also injecting the JavaScript straight into the HTML but nothing...
The recommended way to include both, jQuery and bootstrap.js would be a function in your functions.php.
function load_styles_and_scripts(){
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-scripts', get_template_directory_uri().'/js/bootstrap.min.js');
}
and then calling it at the end of the file
add_action('wp_enqueue_scripts', 'load_styles_and_scripts');
this way, you load the jQuery file which already comes with wordpress. As the call to enqueuing bootstrap.js comes after jQuery, this should work. You can also add dependecies in the add_action-call. This allows you to make sure, that dependencies are loaded in the right order.
For further information, have a look at http://codex.wordpress.org/Function_Reference/wp_enqueue_script