Custom Scripts per page or Custom Post Type

Question

A client has requested some interesting functionality. THey have about 20 different scripts, most of which are needed by one page only. They would like an area within Wordpress's pages and custom post types to add scripts for THAT PAGE ONLY. So when that page loads, the script loads in the header or footer, NOT inline with the body content. I am looking for an idea or a plugin to make this functionality happen. Any ideas?

Answer 1

I'm assuming that you want to load some post-specific scripts (JavaScript) in header.

1. Using Wordpress Custom Fields

One way you achieve this by using wordpress custom fields, While posting new post just add a custom field with name (i.e - header_script) and enter the Script source in next text-field.

This will store the Script source in wordpress database with name - header_script

To load the script located at that source in header files put the following code in header.php or put in footer.php incase you want that script to load in footer.

Here's the code that will load src information stored in custom field - header_script

Update - The code has been update to work outside Wordpress Loop.

<?php global $wp_query; 
  $postid = $wp_query->post->ID;
  $key="header_script";?><script type="text/javascript" src="<?php echo get_post_meta($postid, $key, true); ?>"></script>

UPDATE - 2

Use this code to show multiple scripts. NOTE - I changed the third value to false which allow us to store and retrive multiple values under same custom field name.

<?php global $wp_query;
$postid = $wp_query->post->ID;
$key="header_script";
$h_scripts=get_post_meta($postid, $key, false);
foreach($h_scripts as $h_scripts) { ?><script type="text/javascript" src="<?php echo $h_scripts ?>"></script><?php }?>

2. Using conditional statments in wordpress

If the scripts are specific per post types or categories means eg - image posts needs jQuery thick-box and video posts needs some script to show videos on page... just an example

You can use conditional statements to load only needed scripts for post types.

<?php if ( 'image' == get_post_type() ) { ?>
<script type="text/javascript" src="scrip-1"></script>
<?php } elseif ( 'video' == get_post_type() ) { ?>
<script type="text/javascript" src="scrip-2"></script>
<?php } else {} ?>

Above code will load script 1 only on image post type and so on. But I think the best way is to save the script source as a custom field.

Answer 2

I would do this using a custom metabox. I use WPAlchemy MetaBox class, but if you're just creating one metabox it's probably best to just use the Wordpress metabox API.

A Standard text field would suffice, but an upload metabox would be more user friendly.

Then retrieve the URL entered in that metabox either in the header or footer.

Let me know if you need a more technical answer and I'll edit this with more info.

Answer 3

If you want to load a js file for a specific post type, you can use get_post_type()

if (get_post_type() === 'products') {
    wp_enqueue_script('pd', JS_DIR . '/product-gallery.js', array(), '1.0', true);
}