Adding Scripts and Style only to a certain Page on WordPress

Sometimes we want to add a script or a css file only to a certain page. How can this be done?

Here’s what happened to me: I needed to insert a code snippet on a page. The snippet was generated by a third party. In fact – it was a form, and the form’s code, already ready, also contained the action for the form, on a galaxy far, far away. I.e. – remote server, not a part of the site.

That means – most of the work already done. All is needed is to paste the piece of code on a page, and let the 3rd party action page deal with the rest. Unfortunately, even when a remote server takes care of the form data, it is still our responsibility to validate it on the client side. So further to adding the html code for the form, we need some javascript to actually validate it. To do so, I wanted to call an external jquery plugin called validationengine. Question is: how do I call this script only on the form’s page?

So the first thing we do, is create a unique template for the form page. Having done that we go on to the next stage

What we need to do now, is creating 2 hooks that will be called and affect the content of the page’s head. The first hook, when called, will register the necessary js files, and the second hook will add a line to the head html: a call for the css file.

In this example I will demonstrate adding some script that take care of form validation, but you may use the same technique for anything you want.

So it is time to add some code to our functions.php file. You can find this file on your theme’s directory. If you don’t find it – don’t worry. Just go ahead and create one. Open the functions.php file with your favorite text editor and write down:
function print_form_scripts () {
wp_enqueue_script('validationEngine-en', get_bloginfo( 'template_url' ).'/jquery.validationEngine-en.js', array('jquery'));
wp_enqueue_script('validationEngine', get_bloginfo( 'template_url' ).'/jquery.validationEngine.js', array('jquery'));
}
function print_form_styles ($content) {
$content .= '<link rel="stylesheet" href="'.get_bloginfo( 'template_url' ).'/validationEngine.jquery.css" type="text/css"/>';
echo $content;
}

The first function (print_form_scripts) when called, will register a couple of scripts to the page,
The second function (print_form_styles) when called, will add an html line to the head content, a call for a css file, that is relevant for the form validation.

Now, all is left to do, is actual hooking of these functions to the wp_head action.

In order to do so, open your new page’s unique theme file (page-NNN.php) and add these lines, before the call for the get_header() function:
add_action('wp_print_scripts', 'print_form_scripts');
add_action('wp_head', 'print_form_styles');

Keep in mind, that these lines should be added to the file before the call for the theme’s header file (get_header()), as they are hooked to wp_head, which in its turn, is called from within the header file.

Having done that, you can refresh the page and check it’s html hitting “view source”, and see that indeed the calls to the requested js and css files are added to the head html, for this page only.