There are a ton of ways to include specific scripts within a particular page or custom template by utilizing the WordPress API. However, in this simple article I want to demonstrate my favorite method of dealing with a script block that is hopelessly tied to a particular template.
First, I’m assuming you understand the following methods:
<?php get_header(); // http://codex.wordpress.org/Function_Reference/get_header wp_head(); // http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head get_footer(); // http://codex.wordpress.org/Function_Reference/get_footer wp_footer(); // http://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer ?>
I’m also assuming that you’ve created your own Page Template before:
http://codex.wordpress.org/Pages
As developers, we all have our own preferences and styles, and when it comes to separation of concerns (a much deeper issue), many developers feel a constant urge to keep all files of a particular type (styles, javascripts) within an area designated to that type. While I completely subscribe to this sort of organization, I also love having related scripts right at my fingertips.
I want to include my simple script within the footer, and particularly when the wp_footer
method is called. I could create a script file dedicated to My Custom Template, place it within my `javascripts` folder within my theme directory, use the wp_enqueue_script
method within my functions.php
file, and finally use a conditional to include my script only when My Custom Template is being used … yeah … I say no.
The above process is too convoluted. Instead, we’ll do it another way:
<?php /* Template Name: My Custom Template ------------------------------------------------------------ */ get_header(); ?> <div> <h1>My Custom Template</h1> </div> <?php add_action("wp_footer", "addscript_mytemplate"); function addscript_mytemplate() { ?> <script> jQuery(document).ready(function($) { // now that the document has loaded, do something within your script alert("Yay! I'm only included within this specific tempalte!"); }); </script> <?php } get_footer(); ?>
So simple. It’s organized, convenient, and has a very clear purpose.