Run script in header for one page only

CMS & WordPress
1

Hi, I’m new to jQuery, but I’ve managed to set up a jQuery plugin in wordpress (Easy Slider).
The script call is in the header.php. I only really need the script for one of my pages, so I’ve tried putting a condition on it, but my code causes the plugin to break.
Here is my code:

<?php if (is_page('portfolio'))
{ 
echo '<script type="text/javascript" src="<?php bloginfo(\\'template_directory\\'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo(\\'template_directory\\'); ?>/js/easySlider1.7.js"></script>';
}
?>
  1. What do I need to do to fix this condition statement?
  2. What does the jquery.js file do exactly? I understand wordpress already has jquery built in so do I need to call it here?

Many thanks.

2

Thanks Tim, I couldn’t get it working with your code either though. The page is published, it works fine with this code:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easySlider1.7.js"></script>

I tried simply removing the jquery script and it failed, so I guess it does need it after all.

Then I tried your code as is, then also added back in the jquery script, so it looked like this:

<?php if (is_page('portfolio')) 
{ 
echo '<script type="text/javascript" src="'.bloginfo('template_directory').'"/js/jquery.js"></script><script type="text/javascript" src="'.bloginfo('template_directory').'"/js/easySlider1.7.js"></script>'; 
} 
?>

Both tries failed. I’m going to try using an include statement and will see how that goes, I’ll post back shortly. Cheers

3

I am not a jquery guy, i would assume jquery.js loads the functions to make jquery to work.


<?php if (is_page('portfolio'))
{ 
echo "<script type=\\"text/javascript\\" src=\\"bloginfo('template_directory')/js/jquery.js\\"></script>".
"<script type=\\"text/javascript\\" src=\\"bloginfo('template_directory')/js/easySlider1.7.js\\"></script>";
}
?>

You had un-needed tags

4

Thanks rguy84, but its not working. Removing the php tags before bloginfo means the blog info statement is not being converted to the actual file directory (I can see this when I view code from the browser).

So how do I put a php statement within an echo? I have tried so many combinations, and can’t get it to work. Any help is greatly appreciated!!

5

Thanks but still no good…the page would load at all with this combination. I might just have to leave my original script tags as is and just have it load for every page of the website. Or I could put this tags in a separate file and use a conditional include statement to bring them in for the portfolio page.
Thanks again for trying, if you do find a solution later on in your travels it would be great if you could post it. Cheers.

6

one last shot


<?php if (is_page('portfolio')) 
{ 
echo '<script type="text/javascript" src="'.bloginfo(\\'template_directory\\').'"/js/jquery.js"></script>'. 
'<script type="text/javascript" src="'.bloginfo(\\'template_directory\\').'"/js/easySlider1.7.js"></script>'; 
} 
?>
7

Me again,
So the include works pretty well, its definitely only loading the script on the portfolio page. Just to confirm what I did, on the header.php I put this just below wp_head:

<?php if (is_page('portfolio')) 
{ 
include 'easyslider.php';
} 
?>

Then created easyslider.php with the scripts:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easySlider1.7.js"></script>

Probably not the most sophisticated solution but should be fine.
Thanks guys for your help.

8

I’ve tried that…still no luck

<?php if (is_page('portfolio')) 
{ 
echo '<script type="text/javascript" src="bloginfo(\\'template_directory\\')/js/jquery.js"></script>'. 
'<script type="text/javascript" src="bloginfo(\\'template_directory\\')/js/easySlider1.7.js"></script>'; 
} 
?>

When viewed as html, bloginfo is still not converting to the directory:

<script type="text/javascript" src="bloginfo('template_directory')/js/jquery.js"></script><script type="text/javascript" src="bloginfo('template_directory')/js/easySlider1.7.js"></script>

Anything else I can try? Thanks for your help.

9

Make the double quotes around the echo part single quote. Then take the slashes out before the double quotes. Then put slashes in front where single quotes are currently (inside bloginfo)

10

For one, the code is still wrong:

<?php if (is_page('portfolio')) 
{ 
echo '<script type="text/javascript" src="'.bloginfo('template_directory').'"/js/easySlider1.7.js"></script>'; 
} 
?>

You don’t escape quotes in the functions parameter.

Two, you shouldn’t need to include jquery. Yes, it is already included w/ Wordpress.

Three, is your portfolio page published? If not, then using is_page() won’t work - if you’re previewing the page beore publishing, you have to use is_preview().

Make sure your portfolio page is published, drop that into your header and you should be good. If you’re not getting the action needed, make sure the script is even being called. If it is, it could be the JS itself. If not, post back. But, stay on this track. You don’t want to have browsers loading unnecessary external files site-wide

11

Can you post the URL to this page you’re trying to do?

Do you see the jquery 1.4 script being called in the header in addition to the two scripts you’re trying to call? It’s possible for some reason that script was deregistered in your theme.

Ideally, when you’re trying to add a JS file, you want to use WP’s functions:

<?php
function load_js() {
     wp_register_script( 'easyslider', get_bloginfo('template_directory') . '/js/easySlider1.7.js');
     wp_enqueue_script('easyslider');
}
add_action('init', 'load_js');
?>

Using this function in your theme’s function file will effectively “pre-load” the JS into the queue and Wordpress will (should) spit it out automatically in the header. You can use the is_page() within that function, as well. Really, this is the correct way to include JS scripts and I apologize for not thinking of it yesterday.

Using the include the way you are effectively is too many steps, i.e., too much processing when there doesn’t need to be. Something isn’t quite correct; we’ll get it fixed. Post the URL, please

12

I’m just building this locally for now, so no live url yet, sorry about that.

With my include setup, the jquery 1.4 script is being called in the header for all my pages:

<script type='text/javascript' src='http://localhost:8888/berrywebdev/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>

So no problems there, I think because I had put

<?php wp_enqueue_script("jquery"); ?>

just before wp_head in header.php.

I’ve tried the way you explained, using the functions.php. I added this:

<?php
if (is_page ('portfolio')) {
function load_js() { 
     wp_register_script( 'easyslider', get_bloginfo('template_directory') . '/js/easySlider1.7.js'); 
     wp_enqueue_script('easyslider'); 
} 
add_action('init', 'load_js'); 
}
?>

Its not activating the plugin though…I think because it needs the other jquery.js script as well. I tried adding it like this:

<?php
if (is_page ('portfolio')) {
function load_js() { 
     wp_register_script( 'easyslider', get_bloginfo('template_directory') . '/js/easySlider1.7.js');
     wp_register_script( 'easyslider', get_bloginfo('template_directory') . '/js/jquery.js');
     wp_enqueue_script('easyslider'); 
} 
add_action('init', 'load_js'); 
}
?>

but still not working. I believe jquery.js is needed to make the plugin work, as itswas part of the easyslider package…I could be wrong, but it just seems every time I leave it out the plugin fails.

Anyway, if you feel like replying, thanks, otherwise I’ll just keep my include solution.