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

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

Leave a Comment