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

3 Views

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:

Read More
  • 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?

Post Views: 3

Related posts

Leave a Reply

3 comments

  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.

  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.

  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>