JavaScript in WordPress


JavaScript will work in WordPress. Including your JavaScript code in your pages or posts in WordPress does take a little extra effort however. After you’ve written your JavaScript code we recommend that you add it to your site using the WordPress Enqueue. There is an article in the WordPress Codex website that explains how to use JavaScript in WordPress.

Wikipedia discusses JavaScript and, paraphrased and in italics, has the following to say about it:

Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. The majority of websites use it and it is supported by all modern Web browsers without plug-ins.

JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification.

You can use JavaScript within WordPress but there are some things to keep in mind and there are certain steps you need to take depending on where and how you want to use it.

The above Hello, Mike! text is actually inside a JavaScript file. The code inside that file is shown below.

function helloMike () {
   document.writeln('Hello, Mike!');
}

To show the Hello, Mike! text on this WordPress post I typed the following code in the Text (not Visual) editor of this post.

<script type="text/javascript">
<!--
helloMike();
//-->
</script>

For the above Hello, Mike! example, I used followed the instructions in the above-mentioned article under the section called “Creating a Multiple Script File”. If you have a bunch of scripts you call from time to time you can put all of those into several functions and put all of those functions into a .js file. That file is referenced in the header.php file of your theme. In the head section of your header.php file you can add the following line of code:

<script src="<?php echo get_template_directory_uri(); ?>/js/mikescript.js"></script>

In this case the file name is mikescript.js

This file was copied to the hosting company’s server. Where should it be stored on the server? For this website, I use the company Host Gator. For this post example I switched the theme to Twenty Fourteen. On the server, the directory that the JavaScript file is stored in is as follows:

/public_html/wp-content/themes/twentyfourteen/js

Theme Specific

If I change the WordPress theme, then my JavaScript will not work because the theme will not be able to find the JavaScript file, unless I copy the file to the other theme and make sure that the script in the header.php is also added and points to the correct directory.

If you are using the Customizr theme, it’s directory structure is different. The JavaScript files are located as follows:

/public_html/wp-content/themes/customizr/inc/assets/js

So now if I want to use the Customizr theme with my JavaScript file, I need to copy that file to the above directory on the server of my hosting company. I also need to tell the theme to load that file when the header loads. To do this I need to edit the header.php file and add one line of code that loads my JavaScript file. Once loaded, I can now make a call to any function within that file from anywhere in my website.

Below is a small part of the Customizr theme’s header.php file. You can see where I have added my script tags that point to my JavaScript file.

<html <?php language_attributes(); ?>>
<!--<![endif]-->
	<?php
		//the '__before_body' hook is used by TC_header_main::$instance->tc_head_display()
		do_action( '__before_body' );
	?>
	<script src="<?php echo get_template_directory_uri(); ?>/inc/assets/js/mikescript.js"></script>


	<body <?php body_class(); ?> <?php echo apply_filters('tc_body_attributes' , 'itemscope itemtype="http://schema.org/WebPage"') ?>>

By the way, where on the Host Gator (my service provider) server is the header.php file located? I am using a child theme with Customizr, but the header.php file is located here:

/public_html/wp-content/themes/customizr

My Customizr child theme is located in a different directory but I don’t need to do anything under that directory. Just for your information, the directory is as follows:

/public_html/wp-content/themes/child-customizr

This discussion continues in the next post: JavaScript in WordPress Part 2.

Leave a comment

Your email address will not be published. Required fields are marked *