Most efficient way to add javascript file to specific post and/or pages?

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?


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.

Leave a Comment