How to add custom JavaScript

You are here:
Estimated reading time: 1 min

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.
This image has an empty alt attribute; its file name is BBPTsl

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.


LinkAdding JS code in Head

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

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

LinkAdd 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.

LinkAdding 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);

Was this article helpful?
Dislike 0
Views: 1338

2 Replies to “How to add custom JavaScript”

  1. Dusek

    This help “How to add custom JavaScript”
    It is no longer current
    Because Theme Editor is not available.

    1. Marius[ Post Author ]

      Hi Martin,

      This is a WordPress built-in functionality and is added by default, however it’s likely in your case it’s hidden because of several reasons, such as it’s explicitly disabled with this constant in wp-config.php eg: define( ‘DISALLOW_FILE_EDIT’, false ); (reference https://stackoverflow.com/a/44445656 ), or the account type is not having this capability. Maybe this article would help https://wpfullcare.com/wordpress-theme-editor-missing-how-to-fix-it/ ?

      Marius

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!