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

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!

Read more here: How to get a jQuery script to run on a page?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , ,

Wordpress related questions and answers: