I am wondering what the most efficient method is to add a javascript file specifically for a post and/or page.

Here are a few solutions I came up with:

  • Switch to HTML editing view and post your JavaScript in there (pretty bad solution)
  • Custom fields with the specific JavaScript for that post/page in the key & value pairs
  • In footer.php, load JavaScript files depending on which page you're on (this leads to a lot of conditionals though)

On a side note, none of the JavaScript files will be shared between pages - it will literally be specific to what you're currently viewing.

Any thoughts?

  • Meta boxes / custom fields are your best option
    – Miha Rekar
    Oct 10, 2012 at 19:33
  • How would you define efficiency?
    – fuxia
    Oct 10, 2012 at 19:44
  • 1
    By 'efficient' I mean the least amount of code redundancy and the most effective way to go about doing this specifically for a single post/page. Oct 10, 2012 at 20:44

3 Answers 3


I think the best balance between efficiency, and using proper wordpress methods for adding javascript would be adding something along these lines to your themes functions.php file. For Example:


function load_scripts() {
    global $post;

    if( is_page() || is_single() )
        switch($post->post_name) // post_name is the post slug which is more consistent for matching to here
            case 'home':
                wp_enqueue_script('home', get_template_directory_uri() . '/js/home.js', array('jquery'), '', false);
            case 'about-page':
                wp_enqueue_script('about', get_template_directory_uri() . '/js/about-page.js', array('jquery'), '', true);
            case 'some-post':
                wp_enqueue_script('somepost', get_template_directory_uri() . '/js/somepost.js', array('jquery'), '1.6', true);

add_action('wp_enqueue_scripts', 'load_scripts');

This gives you full control over what gets loaded where, a centralized location in your themes functions.php file for editing what gets loaded where: and, this way uses wordpress methods for adding javascript to your posts and pages safely.

  • 1
    Nice little function. You're right about it being useful to have a 'centralized location'. Thanks a bunch. Oct 10, 2012 at 21:57
  • 3
    I guess this can be cleaned up a bit. You're basically checking the same thing with two different switch-cases. I'd say combine both switch-cases, and the conditional if could be if (is_page() || is_single()). What do you think Ben? Oct 11, 2012 at 1:40
  • Sounds like an improvement to me. Good one! Oct 11, 2012 at 2:01
  • @Ben is it the functions.php one inside theme or in wp-includes ? my page title is Access to Home Online and I have put your function changeing home to Access to Home Online but it is not working ? Feb 7, 2017 at 7:55
  • 3
    This does not work for child themes, but this can be easily fixed. Replace get_template_directory_uri() with get_stylesheet_directory_uri()
    – jastram
    Dec 30, 2020 at 14:12

What I would do is either place in the footer or header and use php conditionals.

For example:

<?php if (is_page ('your-page')){?>

  <script type="text/javascript" src"the file path"></script>

<?php } elseif ( is_page ('another')){?>

  <script type="text/javascript" src"the file path"></script>

<?php } else { ?>

  <script type="text/javascript" src"the file path"></script>

<?php } ?>

This way your not calling all the scripts all the time on each page load and your only calling the ones you need.

Here is a link to the Wordpress codex http://codex.wordpress.org/Conditional_Tags

And if you have special scripts that might only need to be called on a per post basis use custom fields.

  • Thanks Nicole - this was #3. It's a decent solution considering I'm not going to have many pages... still considering it. Oct 10, 2012 at 20:45
  • Whati have above can used with the various items of the wordpress codex such as: is_categories, is_single (for posts), is_post_type ... I added a link to wordpress's conditional list in my answer above.
    – Nicole
    Oct 10, 2012 at 20:48

The other tested way is below add in page directly from editor and do add comments with in script tag other wise it won't work.

<script type="text/javascript">
var a = 5;
alert("hello world. The value of a is: " + a);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.