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

by

The question:

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?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

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:

functions.php:

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);
                break;
            case 'about-page':
                wp_enqueue_script('about', get_template_directory_uri() . '/js/about-page.js', array('jquery'), '', true);
                break;
            case 'some-post':
                wp_enqueue_script('somepost', get_template_directory_uri() . '/js/somepost.js', array('jquery'), '1.6', true);
                break;
        }
    } 
}

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.

Method 2

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.

Method 3

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);
-->
</script>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment