How to: Correctly Include JavaScript Files in WordPress Themes

23rd November 2012


There are quite a few ways to include JavaScript files into a theme, but only one method that is recommended by WordPress. The reason? To ensure maximum compatibility with updates and plugins, and avoid scripts being called multiple times. Following their guidelines, whether you’re handing over to a client, developing for yourself, or putting out a free theme under GPL, should save you a whole host of headaches in the future.

I’m going to cover how you correctly include JavaScript files in your WordPress Themes, but first here are a few things you should know.

  1. A number of common libraries, including JQuery, are already bundled with WordPress. This is something to be aware of before you start trying to call external files all over the place unnecessarily. WordPress lists these here.
  2. It is helpful to make sure you know where in your theme certain scripts need to be loaded. You don’t want to call a script meant for the home page post slider in admin – that’s how you end up slowing things down and creating conflicts.

To get started, you’re going to need to open your functions.php file, usually found in the root of your theme directory. You should also familiarise yourself with these two functions – wp_register_script and wp_enqueue_script. Registering a script makes it available for use. Enqueuing pulls the script to the theme.

NB: It’s possible to register scripts without enqueuing them and it’s possible to enqueue scripts without registering them (but it means more enqueue parameters). We’re going to register first and enqueue second in order to keep things neat and organised.

Bundled scripts

Bundled scripts are pretty simple because you don’t need to register anything new, just call them. For that, as with everything else in this tutorial, we’re going to use wp_enqueue_script.

Over-riding the bundled version

Of course, there might be times you want to over-ride the bundled version of a certain script, in this case JQuery. This is probably only advisable if you’re maintaining the site yourself, not if you’re releasing the theme. If you really need to do it, here’s how:

First, we’re going to de-register the bundled script. Then we’re going to register the version we want, this time from Google’s CDN. Then we’re going to enqueue it as normal.

Custom scripts

Loading a custom script is much like loading a bundled script, except that you need to register it before you can use it. When you register a script, you can specify whether it requires any other scripts in order to run. In this example, we’re going to load a custom script which is dependent on the JQuery library:

Conditional calls

If you want to load a script only on certain pages, you’ll need to use some conditional statements. In this example, we’re going to load the custom script from above on the front page only.

2 Comments

  • Robin

    30th June 2013 at 11:59 am

    Thanks for sharing the idea.

  • nev

    28th August 2013 at 10:55 am

    Thanks for this. It finally got me motivated to register and enqueue my scripts properly 😉

Comment...

What our customers say:

I would highly recommend Hut Six Digital for your website implementation. Jo has been fantastic to work with and has exceptional knowledge in her field. She is friendly, reliable and professional, which has resulted in our fantastic new website launch. Her training was clear and concise, and I know she will be on the end of the phone or email should I need her for a little refresh. She has enabled us to take full control of our new website, which was something other companies have been unable to offer. Excellent value for money too!

Christina Canning (SMS Alarms Ltd, Thatcham)

Jo has been personable and efficient in setting up my website. She did a great job of understanding what I wanted and providing guidance from her wealth of experience. She has explained things in a non-technical way and has been very responsive, patient and flexible in working with me. In short, Jo is great value for money and easy to work with.

Vanessa Rhone (Venus Works, Oxford)

Excellent, efficient service from Jo. Highly recommend.

Xan Rice (Journalist, Oxford)

I am not exactly a technophobe but due to previous experiences of pressing buttons that I have no business pressing I have shied away from doing thing to update or improve my site. I have called on Jo Cox’s expertise several times and she is always quick, efficient and gets you back on track whilst also calming you down. I can honestly say that there is no one else I would call on in an emergency to sort out problems with my website. I have never had a bad experience with Jo’s services or with Jo as the service provider.

Lisa Bentley (Writer, Liverpool)

Jo has been amazing. Through 1-2-1 training sessions she has helped me to make significant improvements to my website functionality. This has not only been cost effective but it also has empowered me to use the skills that I have gained to edit my website myself in the future. She has simplified what I thought would be tricky tasks. I will definitely continue to work with her in the future and I couldn’t recommend her highly enough.

Felicity Wood (Yoga Instructor, Bicester)

Jo took my simple brief outline of what I wanted and turned it into everything I wanted and more. Jo was very professional, efficient and she was patient and understanding with the fact that I was not knowledgeable about building websites or what’s involved. By the end of it Jo had given me and my team a training session around how to manage the website. I would highly recommend her!

Sharon Mulholland (Sandcastle Mortgages, Kidlington)

Jo was completely fantastic! I’d been struggling to make a WordPress blog design work and was completely stumped. I made an enquiry to Jo about some help, and she replied within 24 hours. It was easy to agree on a price for the things that needed to be done, and she had fixed everything within 48 hours of the original enquiry. I had thought my problem was too small for someone to help with it, but I was pleasantly surprised that Jo was happy to sort out the small issues with my site for an extremely reasonable fee. Throughout the process, Jo was efficient, effective and stayed in regular communication. She answered all of my questions, even the really idiotic ones, and nothing was too much trouble. The entire experience was great and I would recommend her in a heartbeat to anyone who needs help with a website project – big or small. She is, in short, superb at what she does.

Imogen Goold (Blogger, Oxfordshire)

I wish I had found Jo earlier. We wanted to progress from making simple text edits to getting more out of the CMS. After a very enjoyable training session, we can now design new pages and keep the website organised. Excellent.

Margaret Hildreth (JP Hildreth Ltd, High Wycombe)