How to load specific java script on specific page?

hwu053
(@hwu053)

14 years, 4 months ago
I am developing my first site using wordpress. I have pretty much finished the site, expect one problem with java script conflicting.
what I am having now is that all my java script files are imported in my header.php, so jquery is loaded on each single page.
This is my current code
```
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/validate_trigger.js" ></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/custom.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.js" ></script>

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/easySlider1.5.js"></script>
```
What I am trying to archive is that jquery files are only loaded on certain pages where I need them.

For example, I have a contact.php page, where I have jquery validator.
how do I call my jquery.validate.js without putting my code inside header.php, but contact.php?
I spent 3 hours trying to get wp_enqueue_script working, but it just doesn’t!
In my contact.php, it starts with
```
<?php wp_enqueue_script('jquery-1.3.2.min', 'wp-content/themes/vono/js/jquery-1.3.2.min.js'); ?>
<?php wp_enqueue_script('custom', 'wp-content/themes/vono/js/custom.js'); ?>

<?php get_header(); ?>
<?php get_sidebar(); ?>
```
But it does not seem to work.
Am I on the right track here?
I am a newbie, I am sure this can be easily fixed, thanks in advance for anyone who can help.

Viewing 8 replies - 1 through 8 (of 8 total)

s_ha_dum
(@apljdi)

14 years, 4 months ago

I don’t know if wp_enqueue_script will work if ran inside a template page. You may already be too late in the load process, though it may work if you load to the footer with the $in_footer parameter. I’m not sure about that. I haven’t tried.

wp_enqueue_script will work if you load it from your theme’s functions.php, though, which is what I typically do for theme specific stuff.

It isn’t sufficient to just call wp_enqueue_script. Look at the codex. You also have to hook it to something. In the codex example its hooked to ‘init’. Hooking to ‘get_header’ has worked for me so far.
Mark / t31os
(@t31os_)

14 years, 4 months ago
Of course, you could always just do..
```
if( is_page('x')) { ?>
// YOUR SCRIPT STUFF
<?php }
```
..in the header..
Thread Starter hwu053
(@hwu053)

14 years, 4 months ago
Thank you both for your generous help.
I tried putting the following code in my header.php
```
<?php
function load_index_page(){
	wp_enqueue_script('jquery-1.3.2.min', 'wp-content/themes/vono/js/jquery-1.3.2.min.js');
    wp_enqueue_script('easySlider1.5', 'wp-content/themes/vono/js/easySlider1.5.js');
}?>

<?php if (is_home()){
		add_action('init', load_index_page);
} ?>

<?php wp_head(); ?>
```
and I’ve also tried the following code in my functins.php/
```
function load_index_page() {
  if (is_home()){
  		wp_enqueue_script('easySlider1.5', 'wp-content/themes/vono/js/easySlider1.5.js');
		wp_enqueue_script('jquery-1.3.2.min', 'wp-content/themes/vono/js/jquery-1.3.2.min.js');
  }
}
add_action('get_header', load_index_page );
```
But neither of them loads up the codes enqueued.
What mistake did I make in those codes?
s_ha_dum
(@apljdi)

14 years, 4 months ago

If you want to write the javascript directly into header.php like t3los_ suggested just put the code in the header, or a link to it, and don’t mess around with wp_enqueue_script at all.

As for your second script, is_home may not be working the way you expect it to work. Echo something from inside that ‘if’ and see if is_home is firing when you expect it to. Secondly, you’ve called your callbacks incorrectly. It should be: add_action('get_header', 'load_index_page' );. Notice the second set of single quotes around your function name.
davillan
(@davillan)

14 years ago
not sure if you have figured out the wp_enqueue out yet but i will post this for you and others

This code goes in your functions.php file
```
function scripts() {
if ( !is_admin() ) { // this if statement will insure the following code only gets added to your wp site and not the admin page cause your code has no business in the admin page right unless that's your intentions
	// jquery
		wp_deregister_script('jquery'); // this deregisters the current jquery included in wordpress
		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false); // this registers the replacement jquery
		wp_enqueue_script('jquery'); // you can either let wp insert this for you or just delete this and add it directly to your template
	// your own script
		wp_register_script('yourscript', ( get_bloginfo('template_url') . '/yourscript.js'), false); //first register your custom script
		wp_enqueue_script('swfobject'); // then let wp insert it for you or just delete this and add it directly to your template
        // just in case your also interested
		wp_register_script('yourJqueryScript', ( get_bloginfo('template_url') . '/yourJquery.js'), array('jquery')); // this last part-( array('jquery') )is added in case your script needs to be included after jquery
		wp_enqueue_script('yourJqueryScript'); // then print. it will be added after jquery is added
	}
}
add_action( 'wp_print_scripts', 'scripts'); // now just run the function
```
Jerry Rietveld
(@jgrietveld)

13 years, 12 months ago

Legend! Thanks a million davillan. Solves all my problems!

davillan
(@davillan)

13 years, 11 months ago

Glad i could help –> jgrietveld

Anonymous User 7341632
(@anonymized-7341632)

13 years, 4 months ago

Davillan, that helped me as well. Awesome!
Thanks!