I just converted another of my sites to WordPress from static pages. For a couple of the pages, I was really chafing at the restrictions of WordPress compared to static code, mainly because I wanted to load jQuery and do some special table formatting. No matter what I tried, WordPress would reform my jQuery code so that it wouldn’t work.
Then, I ran across JinX, a WordPress plug-in that allows you to include JavaScript code in WordPress pages as you wish — that is, as opposed to having to put all the JavaScript into the header.php file and loading it with all pages, even pages on which you don’t need it.
This all relies on the fact that WordPress uses jQuery internally, so as long as you can get to it the right way, you can use it in your blog posts, too, without having to load it separately.
After I played with it for awhile, I realized I could load custom CSS files for these pages, too. So, in the JinX source code box at the bottom of the WordPress posting page, I’d enter something like this:
<script type="text/javascript" charset="utf-8">
<!--
var datatable1 = "/css/datatable.css";
jQuery(document).ready(function($) {
$('<link rel="stylesheet" type="text/css" href="'+datatable1+'" \/>').appendTo("head");
});
// -->
</script>
<script src="/scripts/datatables.js" type="text/javascript"></script>
You can see that to get everything to work you have to alias the jQuery object using “jQuery(document).ready(function($) { …” instead of the normal $(document).ready(function() { …”, but this is an easy-to-remember variant.
Once I got this working, I realized that I could ditch WordPress’ gallery feature, too. The built-in WordPress gallery is nice as far as it goes, but if you need to make a change to it, you’re out of luck. However, with the technique made possible by JinX, I could create a page using VisualLightBox (for example), and then get it working with JinX. (I happen to like the way VisualLightBox looks and works, but the Auto Thickbox WordPress plug-in is definitely worth checking out … I’m just using VisualLightBox as an example of what you can do with this technique.)
<script type="text/javascript" charset="utf-8">
<!--
var vlightbox1 = "/css/vlightbox.css";
var vlightbox2 = "/css/visuallightbox.css";
jQuery(document).ready(function($) {
$('<link rel="stylesheet" type="text/css" href="'+vlightbox1+'" \/>').appendTo("head");
$('<link rel="stylesheet" type="text/css" href="'+vlightbox2+'" \/>').appendTo("head");
});
// -->
</script>
<script src="/scripts/visuallightbox.js" type="text/javascript"></script>
Note that you absolutely need to wrap your JavaScript/jQuery code in HTML-style comment “tags,” or your code will appear in the text of your post.
Note also that the current version of WordPress (3.0.5) loads jQuery 1.4.2, so if you’re hankering after features found only in 1.4.4 or 1.5.0, you’re out of luck.
