How To Add Custom JavaScript To WordPress Without a Plugin

As you build your site, you will need to add JavaScript code to your WordPress site and want to either load it on all pages or only specific pages. In this article, we will see how we can add JavaScript to WordPress without using a plugin. We will first create a child theme of our currently active theme. After that, we will see the ways to add both a simple JavaScript code snippet and a complete JavaScript file to WordPress website.

Create a Child Theme And Activate It

Navigate to wp-content/themes/ directory of your site using your hosting panel File Manager utility or FTP.

Create a new folder for your child theme. For example, 'my-child-theme'.

Inside the child theme folder, create two files style.css and functions.php.

Open style.css and add the following code.

/*
Theme Name: My Child Theme
Template: parent-theme
*/

Remember to replace ‘My Child Theme’ with your desired child theme name and ‘parent-theme’ with the folder name of your parent theme.

After doing these steps, we will need to activate our child theme.

In the WordPress Dashboard, go to “Appearance” > “Themes” and activate the child theme you created.

That’s it. Now your child theme is created and activated, we can now proceed to adding JavaScript to our website.

Adding a Complete .js JavaScript File to WordPress

Upload your JavaScript file to your child theme’s folder via your hosting panel File Manager or FTP. For example, if your child theme’s folder is my-child-theme, then you should upload it to wp-content/themes/my-child-theme folder. The location of the file will now be wp-content/themes/my-child-theme/custom-script.js where custom-script.js is the name of the file.

The next step is to enqueue our JavaScript file so that WordPress knows it has to load this file too along with other files. Open functions.php file in your child theme’s directory and add the following code snippet.

function my_child_theme_scripts() {
	wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/custom-script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

Remember that the above code snippet is a PHP code snippet and if you have a completely empty functions.php file, you need to add these PHP tags <?php at the start of the document for the PHP code to run successfully.

The above snippet adds code to the bottom of the website. If you want to load the script in the header of the page, use the code below.

function my_child_theme_scripts() {
	wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/custom-script.js', array(), '1.0', false );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );

Save your changes.

Test If JavaScript is Loaded Successfully In WordPress

Open your website in a browser.

Right-click anywhere on the page and then click “View page source“.

Press “Control + F” to open the search bar and then type “custom-script.js“.

If you can see custom-script.js file in the source code, that means that your JavaScript file has loaded successfully.

Add A JavaScript Code Snippet to WordPress

You can add JavaScript snippet to either the header or the footer of a website using hooks.

There are two hooks you can use for this purpose.

wp_head: Adds code in the section of the page.
wp_footer: Adds code to the footer of the page.

You have to put these code snippets in functions.php.

The following code adds JS code to the head of the page.

function websoftpixel_javascript() {
?>
	// JavaScript code here wrapped in <script> tags
<?php
}
add_action( 'wp_head', 'websoftpixel_javascript' );

For example,

function websoftpixel_javascript() {
?>
	<script>
		console.log('WebSoftPixel');
	</script>
<?php
}
add_action( 'wp_head', 'websoftpixel_javascript' );

Did you notice the <script> and </script> tag in the above code snippet. Remember to add your JavaScript code inside these tags.

For adding content to the footer of the page, you just need to replace wp_head with wp_footer in the above code snippets.

function websoftpixel_javascript() {
?>
	// JavaScript code here wrapped in <script> tags
<?php
}
add_action( 'wp_footer', 'websoftpixel_javascript' );