Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
Meta boxes / custom fields are your best option –  Miha Rekar Oct 10 '12 at 19:33
    
How would you define efficiency? –  toscho Oct 10 '12 at 19:44
    
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
add comment

2 Answers 2

up vote 7 down vote accepted

I think the best balance between efficiency, and using proper wordpress methods for adding javascript would look something like this, as an example.

functions.php:

function load_scripts() {
    global $post;
    wp_register_script( 'home', get_template_directory_uri() . '/js/home.js', array('jquery'));
    wp_register_script( 'about', get_template_directory_uri() . '/js/about.js', array('jquery'));
    wp_register_script( 'somepost', get_template_directory_uri() . '/js/somepost.js', array('jquery'));

    if( is_page() || is_single() )
    {
        switch($post->post_name) 
        {
            case 'home':
                wp_enqueue_script('home');
                break;
            case 'about':
                wp_enqueue_script('about');
                break;
            case 'some-post':
                wp_enqueue_script('somepost');
                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.

share|improve this answer
    
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
    
No problem mouse! If you like my solution, please accept my answer by clicking on the checkmark to the left of it, under the up/down vote arrows. –  Ben Oct 10 '12 at 23:42
1  
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 Oct 11 '12 at 2:01
add comment

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.

share|improve this answer
    
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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