Per Post Scripts & Styles of Javascript or CSS on a WordPress Blog

If you’ve ever tried to post a tutorial or demonstration of Javascript or CSS on a WordPress blog, you’ve inevitably faced the challenge of figuring out how to load the scripts and styles for just that post.

The easy way is to add the styles to your main stylesheet and add the Javascript code to your main Javascript file (if you have one), but that’s not really a very nice thing to do to your viewers, especially if your post specific code ends is rather large. Visitors end up downloading code they’ll likely never visit, and every time you want to a new post, those files will have to be recached.

A better way would be to only load post-specific Javascript and CSS when you’re looking at that particular post. Unfortunately, WordPress doesn’t provide a built-in way to do this.

I’ve seen a few plugins that do this, but all of them are pretty hackish and don’t have nearly enough customization options. So after much frustration with the existing plugins, I decided to write my own.

Allow me to introduce Per Post Scripts & Styles. You can download the plugin hosted on WordPress.org or follow the source on Github.

 

Why it’s better

• Dynamic URLs with %SITE_URL% and %THEME_URL% variables
• Script dependency support as well as script duplication checking
• The option to load scripts in either the header and footer
• Attach scripts to posts, pages, and custom post types
• Load attached scripts and styles not just on that post’s page, but on the home page or any other page where that post is displayed.

Perhaps the worst thing about the existing plugins is they force you to hard code your script and style URLs. Not only is this bad practice, but it’s particularly inconvenient if (like me) you do most of your development locally, and then upload to your server. Obviously if I attach http://localhost:8888/javscript/some-file.js to a post, that’s not going to work when it to my production server. This also applies to anytime you need to switch to URLs. Per Post Scripts & Styles allows you to use variables like %SITE_URL% and %THEME_URL% making this issue much easier to manage.

Another big problem with the existing plugins is they simply collect your URLs and plop them out in the header. This goes against WordPress best practices for two very compelling reasons: (1) no duplication checking and (2) no dependency checking. Imagine if you wanted to include a that required jQuery to run. You could list jQuery as one of the scripts to attach, but what if another plugin is already loading jQuery? Now you’ll be loading it twice!

Per Post Scripts & Styles takes care of all these issues for you. A meta box is added to every post, page, or custom post type you choose, and all you have to do is specify which the URLs should be loaded. The plugin takes care of the rest.

 

Documentation

Edit Post Screen

In the edit post screen there is a meta box below the post content box titled “Per Post Scripts & Styles”. Simply enter the URLs of any Javascript or CSS files that you want to load in the appropriate box.

Instructions

• When entering the URLs, you may use the variables %SITE_URL% and %THEME_URL% for greater flexibility, e.g. %SITE_URL%/scripts/this-post-script.js
• To have multiple scripts, put each on on its own line.
• If your script has one or more dependencies, add them as a comma separated list in braces at the end of the URL, e.g. %SITE_URL%/scripts/code.js{jquery,json2}. Here is a list of possible dependencies that ship with WordPress.

Header Scripts

List script URLs to be enqueued in the header.

 

Footer Scripts

List script URLs to be enqueued in the footer. (The footer is often the best place to put Javascript files because it doesn’t slow the loading of the other HTML content.)

 

Styles

List stylesheet URLs.

 

Extras

Hardcode Javascript or CSS here. It will be outputted right before the </header> tag. Make sure to properly use the <script> and <style> tags. Note: while this is primarily used for Javascript and CSS, the contents of this box is dumped at the end of the header on the page. Anything extra you want to put in the header when this specific post is loaded can go here.

 

Settings Page

Allow Per Post Scripts & Styles For The Following Post Types:

 

Choose one or more of the post types to allow attaching specific scripts and styles to. If you have custom post types, they will appear in this list as well.

Only Load Scripts & Styles When

 

Most of the time you will want to select single post pages only. The only exception is if you’re displaying the full content (not just the excerpt) of a post on another page. This blog, for example, is using the second option because it displays the full content of some posts on the home page. Keep in mind, however, that selecting all pages will add a considerable amount of overhead to each page load since it will have to query the database for every post loaded on every page. Only use this if absolutely necessary.