Select Page

How To Load Javascript in WordPress

Doing things the WordPressy Way

Yes, technically it’s possible to just drop scripts into template files, but it’s not the correct method to use on WordPress sites. WordPress is pretty particular on how it handles JS.

Register Scripts via functions.php

Just a heads up, the functions.php file is pretty sensitive. WordPress requires everything in functions.php to have absolutely perfect syntax, otherwise it will break your entire site. Please don’t mess with it if you’re on live install or don’t have a way to access this file should you get the dreaded white screen of death.

Once you agree to the above mentioned terms and conditions, you’ll want to register your new Javascript file with the wp_enqueue_scripts function, which is most commonly used with a hook like so:

// enqueue script tabs
function add_scripts() {
wp_enqueue_script( 'coolScript', get_stylesheet_directory_uri() . '/js/coolScript.js', array(), '1.0.0', false);		
add_action( 'wp_enqueue_scripts', 'add_scripts');

There’s definitely a lot going on here, but basically wp_enqueue_script is expecting a lot of arguments, some required, some optional. The first argument is the name of the script, and that’s required. Next is the filepath of the named script, which funny enough, is actually optional. The default filepath is just an empty string, which refers to the root of the WordPress installation.

In the above example, I actually used another WordPress function get_stylesheet_directory_uri(); which just returns the directory of the currently activated child theme, then you can just concatenate the rest of the filepath with a period in PHP.

Next is an array of dependencies, so if your script depends on other scripts, you can pass those into this array. Mine didn’t have any dependencies, so I just left it as an empty array.

Next is the version number, which is given as a string in single quotes. And finally, the last argument is a boolean which is $in_footer. This is set to false by default. WordPress loads all scripts at the very top of the page, up in the <header>. If your Javascript is manipulating or selecting an element later on down the page, there’s a good chance your script won’t work in the <header>.

If that’s the case, and you need to load your JS in the footer in order for it to work, you can set the very last argument to true and that will drop your script all the way down to the bottom, just before the closing </body> tag.

Check out more articles

How to Generate a Ranger Config File

ranger --copy-config=all This will copy all the default config files from /usr/local/lib so you can make edits without messing anything up. Huge shout out to for explaining this and so much more. Took me a...

First Open Source Contribution

Surprise! I genuinely did not plan on making my first ever open source contribution today. In fact, I didn't plan on a lot of things happening this week at all. I recently got an awesome opportunity to work on a site that is being hosted on a platform called Pantheon,...

How to Exclude Specific Posts and Pages from WP_QUERY

For the sake of having something to work with, let's suppose we've got the following query:In this query, inside the $args array, there's a special parameter that allows you to exclude specific posts and pages from the query. This parameter is called post__not_in and...

Configure SSH For Password-less Connections

Preamble I'm slightly embarrassed to admit this, but it was a long time before I figured out how amazing this little file is and how exactly to put it to good use. The file I'm talking about is the SSH config file. By default, when you first connect to a server via...

WordPress Site Stuck in Maintenance Mode

Plugin Error Code 500 During Update While I was updating a WordPress plugin locally, something happened on my local server to trigger a 500 error code as the plugin was updating. On the frontend, I refreshed the page and was greeted with "Briefly Unavailable for...

Creating a WordPress Plugin Downloader

How it Started I was recently tasked with the challenge of creating a WordPress theme generator. The idea being, instead of writing your style.css file from scratch, you'd be able to just answer a few simple questions about how you'd like your theme set up, and those...

Fix Audio on XFCE Chromebook

The Problem After moving from GalliumOS to Xubuntu, I noticed that playing YouTube videos on both Firefox and Chromium would result in decent playback for a few minutes, but suddenly the audio would turn into a solid beeping tone while the YouTube video displayed the...

Adjust Trackpad Sensitivity XFCE

xinput set-prop "Elan Touchpad" "Synaptics Finger" 1 1 1 What are the values 1 1 1? This sets the sensitivity as close to the original ChromeOS as possible. Larger numbers will decrease sensitivity of various aspects. I never looked into which individual value...

Fireworks (Short Film) About the film Year: 2020 Director/DP: Tim Searfoss Writers: Matt Jones, Tim Searfoss Sound Mix: Matt Jones

Hosting Multiple Sites Using LocalWP

I've done a write-up on hosting local WordPress sites before, but I definitely prefer this method over the previous one. If you've never tried hosting multiple sites using LocalWP, then I'd encourage you to check it out. I've had really bad issues with it in the past,...