Using jQuery and Javascript in WordPress Templates

There are a ton of tutorials out there about how to include javascript and jQuery in WordPress. I probably read most of them as I was adapting my WordPress based CMS to use my newly gained jQuery skills. The theme writer’s approach to including javascript is to modify your theme’s functions.php file and call the wp_enqueue_script function to trigger when wp_print_scripts action fires. However, for the tweak happy folks like me, there’s actually an easier way that I stumbled upon reading the excellent wpengineer blog.

I was reading about contact forms at wpengineer and the code included the wp_enqueue_script call right in the template before the get_header() call. Brilliant! I had never read that about that technique. You don’t have to write conditional statements nor hook in within the functions.php file. This is especially handy if you use a premium theme. Premium themes usually have a functions.php file that includes a huge caveat not to modify it (for a lot of good reasons). An even better benefit to modifying the template is as your theme is updated, you don’t have to worry about carrying over custom edits.

Advertisements

3 thoughts on “Using jQuery and Javascript in WordPress Templates

  1. Hey John, I was wondering if you would explain your second paragraph a bit more. The reason I say this is because I have a flash movie that I am trying to place in a template file (specifically home.php.) I have two files. A .js file and a .swf file. I put the .swf file in as an object in a div in the main content area of my page. I inserted <script src="htt://localhost/wheremyfileis/intromovie.js" just below the The movie works but I cannot move it on the page at all. If I style the object or the div with css it does nothing. I think it has something to do with the way I’ve put the .js file in there because if I move the .js file to my header.php file before the body of the page it is the first thing that loads on the page(above every other element on the page!) I know this is suppose to be a comment but…any suggestions? I’m desperate! Thanks!

    • Jason….I’ve abandoned Flash for QuickTime because of standards issues and general PITA when it comes to embedding. However, what I’m saying in the second paragraph is to put the wp_enqueue_script call for supporting javascript in the template before the get_header() call. You could put it in header.php before wp_head(), I guess.

      If I understand what you’re trying to do here, the js file should actually be echoed in the template somewhere near the_content() call. Maybe you should consider a Flash embed plugin. Sorry I can be of more help but I think your issue is less of a javascript issue and more of a Flash problem and I’m out of my depth there.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s