How to add custom JavaScript

This article refers how to add custom JS through the child theme. So before starting, make sure it’s installed and active. If it’s not installed, access Rey Theme > Dashboard in the backend and you should see a red button “Install Child theme” .

Note: If you want to avoid using a child theme, you can use a plugin such as Code Snippets .

The easiest way of editing the child theme’s functions.php file to add your custom code is to:

1. Open Appearance > Theme Editor;
2. Select Rey-child in the top right select list;
3. Click on the Theme Functions.
4. Add your custom code in the editor.

Please make sure the code is valid and doesn’t have errors. Otherwise you can lockdown your site. Normally the safest way is through FTP or cPanel’s File manager, however if you know exactly that your code is valid, please proceed.

Adding JS code in Head

add_action('wp_head', function(){
	?>
	<script>
		// JS code here (make sure not to include script tags)
	</script>
	<?php
}, 100);

Add JS code in Footer

add_action('wp_footer', function(){
	?>
	<script>
		// JS code here (make sure not to include script tags)
	</script>
	<?php
}, 100);

Add JS code after body tag opens

add_action('wp_body_open', function(){
	?>
	<script>
		// JS code here (make sure not to include script tags)
	</script>
	<?php
}, 100);

As you can see in all examples, i already added the script tags, so make sure not to double load them. It’s important because it’ll crash the page.

Another thing to remember is that you can modify that “100” number, which stands for the hook’s priority. So making it smaller will force the hook to print the code earlier.

Adding Google Analytics or GTag code

Make sure to replace the content between <!– …. and –> at the very end, or just replace the [YOURTRACKINGCODE] text.

add_action('wp_head', function(){
	?>
	<!-- Google Tag Manager -->
	<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
	new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
	j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
	'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
	})(window,document,'script','dataLayer','[YOURTRACKINGCODE]');</script>
	<!-- End Google Tag Manager -->
	<?php
}, 100);