How to get a jQuery script to run on a page?

Question

I am having a hard time figuring out how to get a jQuery script to run on a Wordpress page of mine the "correct" way.

I have followed this article and implemented what the first answer says to do.

There are so many tutorials and articles I've read on how to get jQuery to work on your blog, but I just cannot seem to figure it out.

I have a number of questions that I hope to get addressed from others who have had experience in it.

First of all, most of the tutorials and things I've read are how to get jQuery included on your blog. My first question is, shouldn't most themes that you download out there automatically include jQuery in your header anyway? For example, my site has these lines automatically included in every page right off the bat:

<script type='text/javascript' src='http://<mysite>.com/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://<mysite>.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

So, jQuery is included, I don't need to worry about that...

Okay, it's included, now I need to figure out how to get just a sample page or post to run a jQuery script.

I follow the directions on the page I listed above...

I first go into the back end of my site, go into my Child Themes folder, and make a new file called "jquery-script.js".

In it, I write the following code and save the file:

jQuery(document).ready(function($){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});

Okay... I have my jQuery script file on the back end. Now, I need to reference or enqueue that script. According to the article, it is best to enqueue the script. So I follow the directions and add a new PHP function in my child theme's "functions.php" file. In this file, I add the following:

function add_jquery_script() {
  wp_enqueue_script(
    'jquery-script', // name your script so that you can attach other scripts and de-register, etc.
     get_template_directory_uri() . '/jquery-script.js', // this is the location of your script file
     array('jquery') // this array lists the scripts upon which your script depends
  );
}

So, that's done. I believe this should work. So, I go and create a "Test Page" on my site (not published or anything). I create the divs, button, and everything I need to get my script to do what I want it to do:

<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

I preview the page, click the button.... nothing. Nothing happens.

Okay... maybe I need to do a little more in my functions.php file. So I go back in there and read on the page I'm following that perhaps you have to add a line to get it to work. So I add the following line after my function:

add_action('wp_enqueue_scripts', 'add_jquery_script');

I save the file. I'm excited. This should work. I go and test my page... nothing at all again. Nothing happens when I click the button. Hmm...

So now, I go and do something totally different in my functions.php file. Something that I've done in the past to get certain scripts to work... so I completely remove the function and the "add_action" call and implement the following in my functions.php file:

function add_jquery_script() {
    echo '<script type="text/javascript" src="http://<mysite>.com/wp-content/themes/responsive-childtheme-master/jquery-script.js"></script>' . "\n";
}
add_action('wp_head', 'add_jquery_script');

I then save the file and go test it. My page WORKS!!! Woohoo! It does what I want it to do.

However, I'm not satisfied with that. I've read everywhere that you should always enqueue your scripts using the method that I attempted to use but failed.

So a few closing questions that I hope to get answered:

• First, why did it not work when I tried to enqueue my script but did work doing my second method?

• Secondly, the thing is now... that jQuery script I wrote gets included on EVERY single page of my site... every post, page, etc. Is this a problem?? Is there any way to just have it included on the ONE page I want the script to run so that it doesn't affect other pages?

• Third, why can't I include this script within the "text" tab of my TinyMCE Editor that I use while writing a page/post? I tried using <script> tags and just putting my tiny script in between those, but that doesn't appear to work.
• Fourth, if I CAN'T get my script to only run for one page and it does have to be included in every single page, then I'll obviously have to specifically target my HTML elements much much better. Obviously I won't be using a script that targets every button by using $("button"), so then would I just give my button on that specific page some unique ID such as <button id="some-unique-id"> and then target it through my jQuery? That way, the script will only work for that button.

Sorry for the extremely long post and noob questions... I just have never messed with jQuery that much and I'm trying to wrap my head about how to work Wordpress in order to include my own custom scripts and things that I want to run.

If anyone has any feedback on any of my questions, it would be GREATLY appreciated. Thanks so much!

Answer 1

Your question is a bit broad. We actually have a one question per post policy. I'm going to try to answer though

My first question is, shouldn't most themes that you download out there automatically include jQuery in your header anyway?

Well, basically correct. So many features today in a theme needs jquery to run properly. I haven't came across a theme that does not make use of jquery. And just a note here, if your theme does not have jquery loaded, load the jquery that comes by default with wordpress, it is already build in, so you just need to enqueue the library. It is not advisable to load the jquery library from outside sources

(Just a point of note, your theme should have wp_head() in the header and wp_footer() in the footer for your scripts and styles to work, as wp_enqueue_scripts uses these hooks to hook your scripts and styles to)

You can simply just add jquery to your theme with

function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

I preview the page, click the button.... nothing. Nothing happens.

First, why did it not work when I tried to enqueue my script but did work doing my second method?

There is a fundamental flaw in most of the online tutorials. Newbies might not know this, but the $scr parameter (URL to the script) in wp_enqueue_script(), wp_register_script(), wp_enqueue_style() and wp_register_style() for child themes, parent themes and plugins are different

• parent themes uses get_template_directory_uri()
• child themes uses get_stylesheet_directory_uri()
• and plugins uses plugins_url()

So that is why your code is not working, you are using the parent path in your child theme. You should never use your second method. Your first method is the correct method of loading scripts and styles

Secondly, the thing is now... that jQuery script I wrote gets included on EVERY single page of my site... every post, page, etc. Is this a problem?? Is there any way to just have it included on the ONE page I want the script to run so that it doesn't affect other pages?

Styles and scripts can be conditionally loaded by means of use of conditional tags. You can go and have a look at these in your own time, but basically, if you need to load jquery only on the home page and not on other pages, you will do something like this

function my_scripts_method() {
   if(is_home()){
        wp_enqueue_script( 'jquery' );
    }
}    
add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

Third, why can't I include this script within the "text" tab of my TinyMCE Editor that I use while writing a page/post? I tried using tags and just putting my tiny script in between those, but that doesn't appear to work.

You should always load scripts and styles using the wp_enqueue_scripts action hook, and styles and scripts should be loaded conditionally as needed.

Fourth, if I CAN'T get my script to only run for one page and it does have to be included in every single page, then I'll obviously have to specifically target my HTML elements much much better. Obviously I won't be using a script that targets every button by using $("button"), so then would I just give my button on that specific page some unique ID such as and then target it through my jQuery? That way, the script will only work for that button.

See point number two for explanation