How to write your own JavaScript code in WordPress?

Use a plugin from wp.org

There are plugins like Simple Custom CSS and JS, which allows you to write your custom JavaScript codes in it. But you could create your own plugin too, if you want to:

Create a plugin with your js codes in it

Step 1

Create a folder inside your plugins folder. I will call it "custom":
wp-content\plugins\ custom

Step 2

Create a PHP file with the same name you used for the folder:
wp-content\plugins\custom\ custom.php

and make it contain this code with a name of your choice:

<?php
/**
 * Plugin Name: Custom
**/

add_action('wp_footer', 'my_custom_script');

function my_custom_script() {
?>
	<script>
		window.onload = function(){
			/* these codes run after page load */
		};
	</script>
<?php
}

Step 3

Your plugin is ready and you can activate it. Now any code written in it will run on the frontend of your website!

Example 1

This code should create an alert on your pages:

<?php
/**
 * Plugin Name: Custom
**/

add_action('wp_footer', 'my_custom_script');

function my_custom_script() {
?>
	<script>
		window.onload = function(){
			alert('test');
		};
	</script>
<?php
}

Example 2

We have some JavaScript example codes for our sliders, like you can trigger alerts, when slide switching happens. Using that code as an example, this would be the code of your plugin:

<?php
/**
 * Plugin Name: Custom
**/
add_action('wp_footer', 'my_custom_script');

function my_custom_script() {
?>
  <script>
    window.onload = function(){

      if(typeof _N2 !== 'undefined'){
         _N2.r('#n2-ss-387', function(){
             var slider = _N2['#n2-ss-387'];
             slider.sliderElement.addEventListener('mainAnimationStart', 
             function(e) {
                alert('Your slider starts to switch to another slide.');
             });
             slider.sliderElement.addEventListener('mainAnimationComplete', 
             function(e) {
                alert('Your slider finished moving to the other slide.'); 
            });
         });
      }

    };
  </script>
<?php
}

This part was added to avoid the code on pages, where our slider is not available:

if(typeof _N2 !== 'undefined'){
   ...
}

So as you see, you need developer knowledge to write custom codes.

Error debugging

If your js code won't run, you should do these tests:

Check if your code exists

Go to your page -> right click on it -> choose View page source -> search for your code with Ctrl + F. If your code is there, go to the next debugging process.

If your code is not there, you are probably using a custom theme, missing the wp_footer hook. If you do use your own theme, then don't bother writing a plugin, but write your JavaScript code inside the theme's codes instead.

Check for JavaScript errors

As you see here, check for JavaScript errors. If there is a JavaScript error on your page, that can stop your code as well. Also your code might have the error and this debugging could point that out too.