15

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 '12 at 19:33
  • How would you define efficiency? – fuxia Oct 10 '12 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. – mousesports Oct 10 '12 at 20:44
26

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.

  • 1
    Nice little function. You're right about it being useful to have a 'centralized location'. Thanks a bunch. – mousesports Oct 10 '12 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? – mousesports Oct 11 '12 at 1:40
  • Sounds like an improvement to me. Good one! – Ben HartLenn Oct 11 '12 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 ? – Ciasto piekarz Feb 7 '17 at 7:55
  • @Ciastopiekarz I've updated my answer to better show that the code goes in your themes functions.php file. – Ben HartLenn Mar 13 '17 at 1:16
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.

  • Thanks Nicole - this was #3. It's a decent solution considering I'm not going to have many pages... still considering it. – mousesports Oct 10 '12 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 '12 at 20:48
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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