This post discusses the recommended way to load JavaScripts and CSS into your WordPress site. Who’s recommendation? I like to follow wpbeginner.com‘s suggestions. We discuss the WordPress enqueue. If you are not using WordPress this will not apply to you. Please refer to the article How to Properly Add JavaScripts and Styles in WordPress at wpbeginner.com.

This post will walk you through an example of how to use the enqueue system in WordPress for loading a very simple set of JavaScript functions into the entire site (available in every post and page). The example is that of a pop-up alert box that displays a simple message to the user and has an OK button that when pressed will close the alert box. That’s all. Once you know how to add JavaScript to your WordPress site you can get more creative with your JavaScript code. Let’s write the simple JavaScript code first. It is shown below.

function alertHelloWorldExclamation() {
	alert("Hello World!");
}
function alertHelloThereWorld(){
	alert("Hello there, World");
}

Our file is called hello_world_alerts.js. We need a unique name for our script so we will call it my_hello_world_scripts. In this site we are using a child theme under the theme Customizr. We need to decide on a folder location for our file on the server. After using an FTP program to look at the server, I have found a location for our file: public_html/wp-content/themes/child-customizr/hello_world_alerts.js.

The code below needs to get copied to the functions.php file in your theme. If you are using a child theme in WordPress then you would copy it into your child theme’s functions.php file.

<?php
function wpb_adding_scripts() {
wp_register_script('my_hello_world_scripts', get_stylesheet_directory_uri() . '/hello_world_alerts.js', false,'1.0', true);
wp_enqueue_script('my_hello_world_scripts');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

The wp_register_script() Function

A few necessary changes were made to the example in the article. Notice that I used ‘false’ for the dependency parameter and the fifth and final parameter is true. True in the last parameter puts the script in the footer. False would have put it in the header. The default is false.

Warning: Cannot modify header information – headers already sent by (output started at /home1/mikeporter/public_html/wp-content/themes/child-customizr/functions.php:37) in /home1/mikeporter/public_html/wp-includes/pluggable.php on line 1167

I got the above warning when I tried to log into the admin (Dashboard) part of this website. I then removed the code (by commenting it out with /* …CODE… */) I added to functions.php and the error no longer appears. Now I can get into the Dashboard. There is a problem on line 37 of our functions.php file. There is a suggested fix here. Essentially it says that you need to be sure to remove any blank characters at the beginning and end of the file. I did that. It’s fixed. Moving on…

Go ahead and click either button above you should get a pop-up alert message. It works. This enqueue methodology can also be used to load your CSS code. These buttons each have an onclick event that calls a JavaScript function.

What is the code for the above two buttons?

<input type="button" value="get a Hello World! pop-up message" onclick="alertHelloWorldExclamation()" />
<input type="button" value="get a Hello there, World pop-up message" onclick="alertHelloThereWorld()" />

Bluehost

Suppose you are using Bluehost. What would you need to do to make these above two buttons work in WordPress? First, log in to Bluehost.

Click the Advanced button. Then click the File Manager button.

Start by double-clicking public_html. Work your way down: wp_content, themes and the name of your theme itself, or the name of the child theme you are using. You will now see a short list of files, one of which will be functions.php. You need to upload the js file that has your code in it. The name of our JavaScript file in this post’s example is called hello_world_alerts.js. Click the Upload link.

Upload the file.