Sometimes when using WordPress you will find the need to insert a script within your website, or before the closing tags.
There are plugins that can help you do this, but they are not always reliable, are limited in what they offer and it’s just another plugin to clog up and slow down your site.
So let’s do it the old fashioned way, by using built in WordPress hooks and functions to insert your scripts where you want them. I will show you how to insert both CSS or Javascript scripts within your head or body, there are different best practice methods for each.
functions.php
This tutorial assumes you are using a child theme. If you aren’t already using one, I suggest you set one up then come back to this guide, so that your customisations are not lost the next time you update your theme.
If you are using a child theme, navigate to:
- Appearance > Theme Editor
- Access your functions.php file
wp_enqueue_script
We are going to be using a PHP function called wp_enqueue_script to insert our scripts within either the <head> or before the closing </body> tag.
This function registers a script if the src provided is valid and then enqueues it to be loaded on your website – https://developer.wordpress.org/reference/functions/wp_enqueue_script/
You can see an example of wp_enqueue_script above being used to setup a child theme, but don’t worry, our code will be a bit simpler.
Inserting scripts in the WordPress <head>
Inserting scripts in the WordPress head is super easy, there’s really no need for a plugin. All that you need to do is take the block of code below and change one thing, the URL to your script.
Here, we are creating a function called enqueue_scripts. You can call your function anything, you don’t need to worry about the parentheses or the curly brackets right now. A function stores a block of code that can be activated by calling the function name.
wp_enqueue_script('script-name', 'https://code.jquery.com/jquery-3.3.1.slim.min.js');
wp_enqueue_script is a built in WordPress function. WordPress has already done all the hard work for us, we just need to pass in the right parameters to make this work (the two blocks of text within the parentheses).
‘script-name’ – this value can be anything. It is a placeholder to refer to the script you want to insert in the <head>.
‘https://code.jquery.com/jquery-3.3.1.slim.min.js’ – replace this with your script.
add_action ('wp_enqueue_scripts', 'enqueue_scripts');
The final part of this code snippet is telling WordPress to insert the scripts we referenced in our function.
(‘wp_enqueue_scripts, – this must come first, it’s the built in WordPress function
‘enqueue_scripts’) – this must come second, it’s the name you give your custom function.
Inserting scripts before the closing </body> tag
WordPress makes it super easy to insert scripts before the closing </body> tag through use of the $in_footer parameter that can be used in the wp_enqueue_script function.
We only need to make a tiny change to the script we used above to make our script appear before the closing </body> tag.
Can you see what is different between the two scripts? Kudos if you can! You probably have a keen eye.
Anyway, if you can’t, I’ll tell you. Within the parentheses I added ‘ ‘, ‘ ‘, true before the end of the parentheses.
wp_enqueue_script accepts 5 parameters and $in_footer is the 5th parameter, which takes a value of true or false. We need to tell our function that we aren’t using parameter 3 or 4 which is why we have the two empty ‘ ‘.
Setting $in_footer to true, will change where your script is inserted to just before the </body> tag.
To test if your script is being inserted correctly, follow these steps:
- Right click on your website
- Click ‘View Source’
- Copy the script URL you are trying to insert
- On the ‘View Source’ page, click ctrl+f to open up a search box
- Paste your script in and click search
If you see your script, you’ll know your function is executing correctly. You can also check it is appearing in the right place by checking if it appears before the closing </head> tag (it’s in the header) or before the closing </body> tag (it’s not in the header).
