I'm developing a wordpress site and I need to trigger the user scroll in order to fire different events and hide/show some images, so Waypoints.js is perfect for it.
However I've tried different attempts to make it work with no results. I add it as a function on functions.php file, like this:
function waypoints_method() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
wp_enqueue_script('waypoints', get_stylesheet_directory_uri() . '/vendor/waypoints/lib/jquery.waypoints.min.js');
}
add_action( 'wp_enqueue_scripts', 'waypoints_method' );
And then in the javascript:
jQuery(document).ready(function($) {
$('.waypoint').waypoint(function() {
alert('You have scrolled to my waypoint.');
});
}
The only thing I get it is to console.log when resizing the browser. So, what I need to do in order to make it work? Or, there is any alternative to Waypoints.js that I could use?
Thanks!
Waypoints is using $ to access jQuery, but with WordPress you need to refer to jQuery as jQuery.
I found that I had to use the no framework version of Waypoints to get it working with WordPress.
Related
I want to remove jQuery from Google CDN on my WordPress site. See here
I want to remove that, because I already have jquery script on my website. And also the jQuery from Google takes 1.1s too load. See here
I tried to add this script on the function.php
function my_init() {
if (!is_admin()) {
wp_deregister_script('jquery-js');
wp_register_script('jquery-js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false);
}
}
add_action('init', 'my_init');
But it's not working. So do you guys know how to remove the jQuery script from Google in Wordpress?
have you tried deregister without .js ?
like this:
wp_deregister_script('jquery');
I have been having a problem where my contact form 7 plugin has been interfering with my jQuery for slick slider. I think its because the contact form 7 old jQuery is overriding mine. I originally added the query with in the head. I think if I do it through the functions file it might fix this. I found this code which solved my problem but I'm not sure what its doing exactly.
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
Basically, what the snippet is doing is changing the already registered and enqueued jquery with the newer file of your choice (in this case, loading jquery from google cdn).
Lets break it down:
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
If you're not logged in as admin, then you attach the function "my_jquery_enqueue" to the hook "wp_enqueue_scripts" with priority 11.
The function my_jquery_enqueue() then removes the registered jquery script (probably registered by another plugin with the handler jquery), registeres the script you want to have there and finally enqueues it.
All this happens before WP generates the page (that's why you can swap out the file easily). Have a read through the following links to understand it better:
Plugin API, hooks, Actions and Filters
wp_enqueue_scripts
I've got a Wordpress site and have a .js file that I would like linked up so I can call the script. After much research, I've found this must be done with a hook in functions.php. I've tried all sorts of variations but cannot get the official method to work, but I have found a way that does work but just breaks the rest of the site in the process.
What am I doing wrong? I know about the get_stylesheet_directory_uri() & get_template_directory_uri() differences with parent and child themes but neither seem to make any difference.
Here's the 'official' way that doesn't work:
function add_jquery_script() {
wp_enqueue_script(
'my-script', // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . 'http://<site>.com/wp-content/themes/dt-the7/custom-scripts.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
The 'not recommended at all' way that works but breaks the rest of the site:
function add_jquery_script() {
echo '<script type="text/javascript" src="http://<site>/wp-content/themes/dt-the7/custom-scripts.js"></script>' . "\n";
}
add_action('wp_head', 'add_jquery_script');
As always, any help much appreciated. Thanks guys
UPDATE
After echoing out get_stylesheet_directory_uri() I can see that my URL needs to be relative, which should now be as follows, however it still will not work.
function add_jquery_script() {
wp_enqueue_script(
'my-script', // name your script so that you can attach other scripts and de-register, etc.
get_stylesheet_directory_uri() . '/custom-scripts.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
PHP
You need to call the function add_jquery_script(); before it can be expect to output anything - pretty simple, easily forgotten.
JQuery
The script was breaking your code because of a reference error, var price definition should be moved inside the function so it is in the function's scope.
http://learn.jquery.com/javascript-101/scope/
$(document).ready(function () {
refresh();
$('#bittrex-price').load(bittrexPrice);
});
function refresh() {
var price = "[domain hidden]/realtime/bittrex-realtime.php";
setTimeout(function (price) {
$('#bittrex-price').fadeOut('slow').load(price, params).fadeIn('slow');
$('#bittrex-vol').fadeOut('slow').load(price, params2).fadeIn('fast');
refresh();
}, 1000);
}
Just about to launch a WordPress site but have noticed that it's currently loading in two jquery files, one in wp-includes and one from my header.php, is there a way to make wordpress load the wp-include one on the front end? Done quite a bit of search and have the only mention of this seems to include the following code, but I can't find any documentation about it, any ideas?
<?php wp_enqueue_script("jquery"); ?>
As of WordPress 3.3, this is the best way to do it, using the proper hook:
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}
you need to include the following code before <?php wp_head(); ?> in your header.php
<?php wp_enqueue_script("jquery"); ?>
and you can remove other jquery includes from header.php
In addition to what Aram Mkrtchyan said, you can enqueue your scripts also using wp_enqueue_script().
<?php
wp_enqueue_script('jquery');
wp_enqueue_script('your_script', "path/to/your/script.js" , array('jquery'));
?>
The third argument to wp_enqueue_script() tells WordPress that your_script is dependent on jquery, so load it only after jquery has loaded.
Actually, you need to use admin_init hook to make it work in admin section:
function jquery_for_admin() {
wp_enqueue_script('jquery');
return;
}
add_action('admin_init', 'jquery_for_admin');
If I have the following code before </head> the php form sends but the css crashes and doesn't display the dropdown menu.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
If I don't have the code, the submit button refreshes the page if blank and never sends anything but the dropdown menu works. If any of the fields are filled, the submit button returns with 404.
How can I keep both?
Additional details:
Wordpress CMS
The JQuery script was inserted in a field for customized js in WP.
I know JS is default, but try putting the type="text/javascript" in the <script> tag. Also, firebug for firefox has a NET tab that will most likely tell you what is going on. I would suggest if you can't figure it out by yourself, to post a screen shot of what is loading.
Wordpress can get finicky with manually embedded js and style embeds. The correct way to inject them is to add_actions to init, print_scripts and print_sytles. Add the following, or something like it to your Functions.php:
// register scripts
if (! function_exists(register_scripts){
function register_scripts() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
}
}
add_action('init', 'register_scripts');
//print the now registered scripts
if (! function_exists(print_scripts){
function print_scripts() {
wp_enqueue_script( 'jquery' );
}
}
add_action('wp_print_scripts', 'print_scripts');
// do the same for css
if (! function_exists(print_styles){
function print_styles() {
wp_register_style( 'stylesheet', 'path to css'.stylesheet.css ); //bloginfo(url); or something like it to obtain your path
wp_enqueue_style( 'stylesheet' );
}
}
add_action('wp_print_styles', 'print_styles');
Its a little more work, but ensures scripts and styles get inserted correctly, and at the same time wordpress chooses to do so...
I'm not positive if this is causing your issue, but its a great place to start.