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