Enqueuing for Scripts
Enqueueing scripts (or local stylesheets), it is a bit more complicated, but it’s learnable.
Underneath the last wp_enqueue_style function, type wp_enqueue and select wp_enqueue_script from the menu that shows up (thank you, WordPress Snippets extension).
The following helpful boilerplate is output, showing us what arguments are expected by the function:
wp_enqueue_script( $handle:string, $src:string, $deps:array, $ver:string|boolean|null, $in_footer:boolean )
The values passed to the function are:
- The Handle: a unique name for the script, so WordPress can manage it.
- The Source: the path to the script.
- Dependencies: if needed we can list script dependencies here, by their handles.
- Version: A number, typically today’s date, that will be appended to the URL for cache busting purposes.
- In_Footer: True or False: this determines whether the script loads before the close of the BODY rather than in the head of the page. True = bottom of page; False = header.
Change the handle to rubberchicken_menu_js. It has to be a string, so make sure it’s in quotation marks.
Next, we will set the Source of the script.
First, in your theme make a new folder called js. Inside that, put a file called main.js. In that file, make a simple console.log message:
console.log('my javascript has loading')
How to Make the Path to the Source File
All URLs in WordPress are absolute, not relative, so when the theme is installed at a new domain, WordPress needs to figure out the path to resources, starting with the https://domain.com/ part.
We saw earlier that we can use a WordPress function to find the style.css file. We will do something similar to find our JS file. For the SRC value, put in the following:
get_template_directory_uri() . '/js/main.js'
What’s going on here?
The get_template_directory() function retrieves the absolute URL of the theme. That way, the correct location of the theme will be supplied, regardless of what site the theme is on, or whether we are in a localhost environment.
Then we add a dot: in PHP, the dot is a concatenation operator, which will be used to add two path parts together.
From there, we then add the remainder of the path to the local script.
Fill the rest of the arguments out like this:
wp_enqueue_script( 'rubberchicken_menu_js', get_template_directory_uri() . '/js/main.js', array(), true, true );
Now see if your script loaded correctly. Do this by reloading your site and then inspecting it and choose the console tab from the top of the right side of the inspector.
When You’re Done
If you’re a Langara student in an online course…
Copy the rubberchicken theme to the desktop. If you’re on a Mac, be sure to right-click and choose COPY. If you option-drag from this area of your file system, the Mac will make only a shortcut to your theme folder rather than a copy.
Rename the folder menu-exercise-your-name.
Open the style.css file that’s in that folder. Edit the theme NAME at the top of the css file. Change it to your-first-name.
Edit the Author name. Change it to your-first-and-last-name.
Zip the theme folder, and then hand it into the course hand in materials folder on studentshare (via myfiles.langara.ca).
This naming convention helps me mark. If your theme is not named this way, it will not be marked.
If you’re an Emily Carr Student…
Copy the rubberchicken theme to the desktop. If you’re on a Mac, be sure to right-click and choose COPY. If you option-drag from this area of your file system, the Mac will make only a shortcut to your theme folder rather than a copy.
Rename the folder menu-exercise-your-name.
Open the style.css file that’s in that folder. Edit the theme NAME at the top of the css file. Change it to your-first-name.
Edit the Author name. Change it to your-first-and-last-name.
Zip the theme and hand it into the dropbox area I’m using for handed in material. The URL is on our course Moodle page.