There are many reasons why we want to add custom JavaScript to our WordPress site.
One of the main ones is that with JavaScript we can apply changes in style, design and content.
There are also several ways in which we can implement it. But you have to be very careful how we do it, since a bad JavaScript implementation can do more harm than good.
What Is JavaScript?
JavaScript is a programming language with which we can create and control the dynamic content of a website, such as animated graphics, autocomplete text suggestions, photo slideshows, interactive forms, …
It makes any changes to our page without the need to reload or refresh.
One of its main features is that it does not run on the server, it runs directly in the browser. Being a programming that is on the client side, it does not slow down our website.
Now let’s talk about some ways to add JavaScript to WordPress
Add Javascript Using A Plugin
We may be using a theme that allows us to add JavaScript code, such as Divi, but as we have said.
WordPress by default does not give us that option and we will need a plugin.
Our friends at WPBeginner have a plugin that will help us to add JavaScript to our website in a very simple way.
In the WordPress Dashboard, go to Plugins → Add New, and search “Insert Headers and Footers”.
Upon activation, go to Settings → Insert Headers and Footers.
Now that we have the possibility to use JavaScript (js) code, we can do it in two ways.
We can directly enter the script in the following way.
We may have a lot of code to add, and each one has a different function.
This can make our JavaScript code gibberish.
The best solution is to create a JavaScript file for each function that we need.
We need to create a “/ js” folder in our wordpress, we can do it with the file editor, or an FTP client.
There we will keep the different .js files with the codes we need. But now we have to call them.
<script src="https://www.yoursite.com/wp-content/themes/your-theme/js/js-file.js"></script>
In the Scripts In Header section we can add these calls.
Add JavaScript Using Code
To perform this method, we need to know how to manipulate files in WordPress, through the cPanel file editor or an FTP client, which is the best way.
The first thing we have to do is add the following function to the functions.php file:
[php] function wpb_hook_javascript() {?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20JavScript%20Code%20Here%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php
}
add_action(‘wp_head’, ‘wpb_hook_javascript’);
[/php]
If for example, we want to load a JavaScript code in a certain post, in this case a post with ID 11236, we would see something like this:
[php] function wpb_hook_javascript() {if (is_single (‘11236’)) {
?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20JavScript%20Code%20Here%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php
}
}
add_action(‘wp_head’, ‘wpb_hook_javascript’);
[/php]
If we want to use the code in a page instead of in a post, we just have to change is_single for is_page, with its corresponding ID.
In the functions.php file, we can also make a call to our .js files.
[php] function plush_enqueue_assets() {wp_enqueue_script( ‘our-script’, get_stylesheet_directory_uri() .’/js/js-file.js’ , array( ‘jquery’), array( ‘jquery’ ), ‘1.0.0’ );
}
[/php]
Although we are beginners in WordPress, these methods are quite simple, anyone can implement them.
If you have not started your website yet, you can check our post Create Your Website With WordPress
To learn more about JavaScript, visit their page javascript.com
Leave a Reply