wp_enqueue_script does not work

Asked

Viewed 547 times

3

I am creating a theme for Wordpress, however the wp_enqueue_scripts does not work. The code that is in the functions.php is:

<?php
function scripts_and_styles() {

  if ( ! is_admin() ) {
      wp_enqueue_script( 'jquery' );
      wp_register_style( 'style.css',get_template_directory_uri().'/style.css' );
      wp_enqueue_style( 'style.css' );
      wp_register_style( 'bootstrap.min.css','https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
      wp_enqueue_style( 'bootstrap.min.css' );
    }
}

add_action('wp_enqueue_scripts', 'scripts_and_styles');
?>

Other information that may help identify what is happening:

  • When I insert echo 'Oi!'; appears Hi! in the index.php, as expected;
  • I have to insert into header.php the <?php do_action('wp_enqueue_scripts') ?>, and from what I had understood this would not be necessary;
  • When I use var_dump in the wp_enqueue_script( 'jQuery' ); and in others wp_enqueue_script() is 'printed' NULL in the index.php;
  • Nothing I use jQuery works in my theme (I guess because I can’t call it);
  • I use the XAMPP.

Just to be clear: It’s not only jQuery that doesn’t work, nothing is included. It doesn’t call either style or script. I am aware that jQuery comes included in Wordpress and I have to point out if any script depends on it.

  • 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.

  • @Caiofelipepereira Thank you very much for the provision, but the other error was missing wp_head() and wp_footer()!

3 answers

2


I have solved the added problem wp_head() and the wp_footer()!

2

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:

  1. The name of Handler of your script. (From that point on, that’s the name you’ll reference in your code);
  2. The path of script;
  3. 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;
  4. The version of his script
  5. 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.

  • 1

    That’s not what I wanted, but I voted for his disposition, I discovered the mistake! It’s very elementary, it lacked wp_head() and wp_footer() !

  • @Rafaelfd happens! After this you never forget.

0

Try to do it that way:

wp_deregister_script( 'jquery' ); // remove o registro se houver
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"), false);
wp_enqueue_script('jquery');
  • I tried it doesn’t work anything like that, but even so, I thank you for having devoted your time seeking to help!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.