The jQuery, as well as several other scripts, is already included in core Wordpress, and they work on-demand, that is, only when necessary.
What happens is that, within the logic of WP, you can create scripts dependent on others scripts without worrying about the inclusion order. You just make clear the dependency that a script have of the other, and let the WP make the inclusion in the correct order.
Imagine you have one script animacoes.js
(which is jQuery dependent), and you want to include it on your page. Since jQuery already exists in WP, you don’t have to worry about it (which is the case of the first line of your condition !is_admin()
. What you need to do is tell WP that this dependency exists, and that it does the inclusion, as follows:
wp_register_script('animacoes', get_template_directory_uri() . '/js/animacoes.min.js', array('jquery'), '1.0', true);
See that here I am only registering the script. I am not making the inclusion of the script itself. The method wp_register_script()
receives some parameters, which are:
- The name of Handler of your script. (From that point on, that’s the name you’ll reference in your code);
- The path of script;
- A array containing the handlers dependencies. Note that the Handler jQuery’s
jquery
, with the letter q
lower case. If you have more than one dependency, just include it in this array;
- The version of his script
- A bool to place it or not at the bottom of the page.
Once registered, it is enough line it up, using the method wp_enqueue_script()
, as follows:
wp_enqueue_script('animacoes');
Where the parameter is the Handler of script previously registered.
Wordpress takes care to work with jQuery in mode noConflict, by virtue of other libraries that may use the $
and a number of other reasons that are not the case. You may have tried to open the console on your website and run $('html').addClass('classe')
(or basically anything else using the method $()
), and have ended up receiving a $ is not defined
. This occurs precisely on account of this way. If you run jQuery('html').addClass('classe')
, you’ll see that everything works out fine.
To get around that suit, and wear $
no problem at your script animacoes
, you can do something like this:
//animacoes.js
(function($){
$('html').addClass('class');
// code...
}) (jQuery);
Basically, inside that script, you are saying that $
should be solved by jQuery.
This is the most common way to work with scripts inside WP. It may seem a little strange at first, but you get the hang of it right away. Remember to always use what the tool already provides. Work logging and "de-logging" scripts can end up being highly unproductive.
What do you need to do that depends on jQuery? When it comes to Tyles, I believe Handle is incorrect because it contains the file extension (but I don’t know, I didn’t test). Still on the Tyles, I recommend that you serve a local copy of the bootstrap, not from a Cdn, that downtime can be causing any trouble.
– Caio Felipe Pereira
@Caiofelipepereira Thank you very much for the provision, but the other error was missing wp_head() and wp_footer()!
– Rafaelfdib