Client Side

All the fancy frizz

Include JavaScript files on certain WordPress pages

Written by: Peter Fisher on October 1, 2011
Tagged under: , ,
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

WordPressIf you need to include JavaScript on certain WordPress pages then add the following logic in the header.php
Here I am registering and queuing up the wordCounter JavaScript file if the current page title is ‘wordCounter jQuery Plugin’.
[crayon lang=”php”]
if (is_page(‘wordCounter jQuery Plugin’) )
{
wp_register_script( “wordCounter”,
“/wp-includes/js/wordCounter/jQuery/wordCounter.jQuery.js”,
array(“jquery”)
);
wp_enqueue_script(‘wordCounter’);
}
[/crayon]

If you have lots of pages which require different JavaScript files then I suggest using a switch statement and use the default case for the home page or a standard ‘default’ page that doesn’t require specific JavaScript files.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Peter Fisher is a web developer working in Gloucester UK. Founder of the digital agency Websomatic, author of this blog and the HowToCodeWell Youtube channel. Peter has over ten years of web development experience under his belt

Read all about Peter Fisher

Leave a Reply

Your email address will not be published. Required fields are marked *

18 Responses

James McLain says:

How do I find and edit my header.php file? Do I have to use an FTP client outside of WordPress?

Pete says:

The header.php file is located in /wp-content/themes//header.php
You will need to access the file via FTP or by SSH.

Edward says:

Hi peter, i want to make personal gallery pages then I follow you to add scripts in header.php. But i get this error http://i.imgur.com/TCDB3.png

Here the code:
if (is_page('galeri') )
{
wp_register_script( "galerisaya", "/wp-includes/js/galerisaya/jquery.cssAnimate.mini.js", array("jquery") );
wp_register_script( "galerisaya", "/wp-includes/js/galerisaya/jquery.themepunch.megafolio.min.js", array("jquery");
wp_register_script( "galerisaya", "/wp-includes/js/galerisaya/jquery.touchwipe.min.js", array("jquery");
wp_register_script( "galerisaya", "/wp-includes/js/galerisaya/jquery.waitforimages.js", array("jquery");
wp_enqueue_script('galerisaya');
};

Is there something, i missing about the code? I’m doing this in my localhost for test.

Pete says:

Hi Edward,
At a glance I can see that you are missing some closing wp_register_script parentheses. it should be
wp_register_script(‘name’,’path’,’array()) See the two closing brackets. The first is for the array and the second is for the function.
This is missing for all but the first wp_register_script call.
Also you dont need the ; after the closing curly bracket..

It would be worth going through the web server log file to get line numbers etc…

Hope that helps

Edward says:

That’s the problem.. sorry for my mistake, I need more careful. I’m a noob for wordpress. Sorry if out topic, it’s same way to include css?what i mean just change wp_enqueue_script to wp_enqueue_style?Thanks for helping me.

Pete says:

Yep, that’s right, use wp_enqueue_style( $handle, $src, $deps, $ver, $media ); for CSS. More info can be found on the wordpress codex:
http://codex.wordpress.org/Function_Reference/wp_enqueue_style

Happy to of helped

@pfwd says:

I’ve just replied to Edwards query on my post Include JavaScript files on certain WordPress pages http://t.co/xTSrHiO8

Abhijeet says:

Hi Peter,

I have tried to include include the following javascript on one of the wordpress page of my website. Not able to see the proper output.

examprofessor_account = “technowrites”

Can you let me know how and where to include this code.

Pete says:

Hi Abhijeet,
I’m assuming you have wrapped the variable declaration in script tags.
JavaScript might not work within the post. However it will if its written to the template file or included in the head.
I would put the JavaScript in an external file and call it from the head using the tutorial in the post.

Abhijeet says:

Hi Peter,

I have created an external file name exam.js and put that in the theme. Now what code shall I use to call this file and where do I put that code?

Regards
Abhijeet

Pete says:

Hi Abhijeet,
I would put the js file in /wp-includes/js//.js
Then I would use the wordpress script hooks in the theme header to include the js files as shown in the post above

Robert says:

Hi Peter,
I want to include a javascript file I created which is independent of jquery, can I use this method to do that?
Thanks,
Robert

Pete says:

Hi Robert,
Yes you can use this method to add any kind of external JavaScript files regardless of dependency.
The third parameter in the function wp_register_script() is a array of JavaScript dependencies. This parameter is optional and without it you can register any external JavaScript files.

Robert says:

Thanks, I ended up just installing a plugin so I could include a javascript snippet on a post using a shortcode. Then I had to use another plugin which allowed me to include php code using another shortcode so I could use javascript commands within a form. I did this to make my simple ajax example work within a wordpress post at http://www.wilycode.com/simple-ajax-auto-complete-example/.

anand says:

Hi Peter,

Well this post explains including js file. Can you show how to include one piece of js code in post to trigger some functions.

Thanks,
Anand

Pete says:

Hi Anand,
I use a wordpress plugin called Jinx that allows me to embed JavaScript into the posts/pages. This pusts the scripts under the the contents of the page. I’ve talked about it in my latest post: Embedding JavaScript in WordPress Posts

I hope this helps

Ryan says:

Sorry for the stupid question but…

Where in my header.php file do I add this code? (I’m using a child theme)