I have found out JQuery is loading twice on my Wordpress website and is causing some plugins to break. I have done some research and think I need to remove some JQuery code from the header.php file, and then insert some new JQuery code into the functions.php file. Trouble is I am not exactly sure what code to remove/add. Can anyone help me stop JQuery running twice?
To remove the default WordPress jQuery file you can use the following:
function remove_jquery(){
wp_deregister_script('jquery');
wp_dequeue_script('jquery');
}
add_action('wp_enqueue_scripts','remove_jquery');
That should deregister and dequeue the native jQuery file and keep the one that you have in your header.php file.
function dequeue_script() {
wp_dequeue_script( 'jquery' );
}
add_action( 'wp_print_scripts', 'dequeue_script', 100);
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'm looking for a solution to conditionally load scripts and styles on specific Wordpress pages. I've searched for solutions, but have hit a dead end. I haven't been able to use php selectors, such as is_page(), in the functions.php file to do this. Here is an example of my past attempt:
function blog_style() {
if ( is_page('blog') ) {
wp_enqueue_style( 'blog' );
}
}
add_action( 'wp_print_styles', 'blog_style' );
I have a feeling this is because the functions.php file is loaded before the page has been identified. Any advice is helpful. I have a basic understanding of php and Wordpress codex. Thanks!
I understand your confusion in this matter and must confess that WordPress sometimes has strange ways to handle things.
First of all; you should enqueue scripts and styles in the wp_enqueue_scripts hook:
add_action('wp_enqueue_scripts', 'themeslug_styles');
function themeslug_styles() {
wp_enqueue_style(...);
}
Or in shorthand-/anonymous-function-format, if you prefer:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(...);
});
The basic idea of your is_page('blog') in an if-statement is correct. But also check out this detailed info about conditional tags - maybe there are better ways to target the blog-page of your website (see "The Blog Page" on the linked resource).
You must use the if-statement inside your function, because it is only at the point of wp_enqueue_scripts, where the function is run, that WordPress has information about the actual content ready.
add_action('wp_enqueue_scripts', function () {
if (is_home()) {
wp_enqueue_style('themeslug-stylename', URL-to-your-style);
wp_enqueue_script('themeslug-scriptname', URL-to-your-script);
}
});
Addition: You are right, the functions.php file is mainly used to set everything up and connect functions as actions to WordPress hooks. Therefore, the code is executed quite early in the WordPress execution flow to give you access to as many hooks as possible. The downside is, as you experienced, that many things are not directly accessable at this point.
I think you are using the wrong hook here. Try
add_action( 'wp_enqueue_scripts', 'blog_style' );
You can check this function. I had used this function to dynamically load scripts on different post types and pages. I used the screen_id to specify the current page.
I've created a child theme and am running my site on that so that I can customise a form that I'm including on certain pages using the plugin 'contact-form-7". In my child folder I've placed a style.css, functions.php and js/custom_script.js. the style sheet is being imported fine but I can't seem to get my validation jquery file working on that form. This is the code I've been using:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_register_script( 'custom_script', get_stylesheet_directory_uri() . '/js/custom_script.js' ,array( 'jquery'));
wp_enqueue_script( 'custom_script' );
}
console isn't logging any errors but I can't seem to find it in the web tools side bar UNLESS I remove "js/" when the custom_script is called, in which case a GET error pops up.
I'm guessing I'm incorrectly importing the file and honestly I can't quite get my head around these hooks and importing files just yet- only been using wordpress a short time.
Any help much appreciated.
I believe that you haven't included the JQuery file? You have to download it first https://jquery.com/download/, and then register it as you did with "custom_script", you just have to put it before the "custom_script" in functions.php, inside "custom_script.js" you could also do:
$(document).ready(function(){
});
Go to your console and if you see:
Uncaught ReferenceError: $ is not defined
It's because you haven't included the JQuery file as needed.
Hope this helps!
Leo.
Ok want to make sure I'm doing this right! I think I've got this working but want to make sure. FYI: this is a wordpress site.
I'm enqueuing Font Awesome the new way they are doing it now - they email you a CDN script code to embed. I realize the correct way to add the script into WordPress is to Enqueue it in the functions.php file - so here's what I did... is this correct? (it does work but that doesn't mean I have it completely right...)
//* For importing fontawesome
add_action( 'wp_enqueue_scripts', 'wp_fa' );
function wp_fa() {
wp_enqueue_script( 'font_awesome', 'https://use.fontawesome.com/4b9e255a4a.js' );
}
** I noticed in other tutorials on this there is something else at the end after the .js file like null, all, true or something which I don't have, but it is still working. Can someone confirm if I have this code correctly?
Yes, what you have done is correct.
The other values you speak of are
dependencies (This could be something that requires jquery)
version (Really handy for adding a version number on the end of the script you are enqueuing)
Whether you would like the script loading in the footer or not
So you could have something like this -
wp_enqueue_script( 'font-awesome-custom', 'https://use.fontawesome.com/4b9e255a4a.js', array('jquery'), '1.0.0', true );
I know font-awesome does not have a dependency of jQuery, it is just there as an example of it.
I have this weird problem.
I have a link to js file in my header.php and I want to move them to the functions.php. Problem is that I get this error in the console when I do. (And something don't work)
Uncaught TypeError: Object [object Object] has no method 'sharrre'
So I use this link in the header.php now.
<script src="http://sharrre.com/js/jquery.sharrre-1.3.4.min.js"></script>
And I use this code to move it to the functions.php
// load the theme JS
function theme_scripts() {
wp_enqueue_script( 'sharrre', 'http://sharrre.com/js/jquery.sharrre-1.3.4.min.js' );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
What can the problem be?
There are a few things you can try to get this working.
Be ABSOLUTELY sure your script is being pulled into the page, one way to check is by using the 'sources' tab in the Chrome Debugger and searching for the file.
Be sure that you've included the script after you've included
jQuery, as it is most certainly dependant upon that.
Rename your function name to something more unique. It could be
causing a conflict with another call. Try naming it
sharrre_jquery_script()