Do you want to learn how to add custom JavaScript to WordPress because you’d like to add new functionalities to your site?
But why is JavaScript (JS) IMPORTANT, and what is its USAGE in WordPress?
If you run a successful website, there is a good chance you will use some sort of affiliate network to monetize your website.
And this means you will probably have to add a JavaScript snippet to track cookies.
JavaScript can read, create, modify, and delete the cookies that apply to the current web page.
But its usage is not limited to cookies.
It is mostly used to display dynamic content like interactive maps, lightboxes for images and videos, affiliate marketing, and much more.
I will explain it in more detail later in the FAQ section.
This post covers:
- Add custom JS with a plugin (WPCode)
- Add custom JS manually (functions.php file)
- FAQs About JavaScript In WordPress
2 Simple Ways To Add Custom JS To WordPress
Fortunately, adding JavaScript to your WordPress website is relatively easy, especially if you use a plugin (recommended).
For the purpose of this tutorial, I will also show you how to add JavaScript manually to your functions.php file, but most of you will want to use one of the WordPress plugins.
1. Add Custom JS With A Plugin (WPCode)
The plugin that I will use is WPCode (more known by its previous name Insert Headers and Footers).
This is the FASTEST way to add JavaScript to your website.
Or any other code, for that matter.
What I like about this plugin is that it comes with several premade templates for the most common uses that you can implement with one click.
This can be handy if you want to completely disable WordPress comments or hide the WP admin bar for more space on small screens.
But, a lot of times, the code you have to add is personalized (for instance, when you are adding Facebook Pixel, or other tracking scripts to your website).
How To Add Your Code To The Plugin
In this case, you will have to add custom code to the plugin.
After you install and activate the plugin, head to Settings > Code Snippets > Add Snippet.
Click on the Add your custom code button and add your code.
A big advantage of using a plugin is that you can easily decide the location of your code.
The default option is a site-wide header which is usually the best for most scripts.
So, unless advised otherwise by the JavaScript code author, leave this setting intact.
A more ADVANCED approach is to use conditional logic with which you can select the pages where you want the JavaScript to be inserted.
You can easily limit the code to the home page only, or you can make it valid for just the logged-in users.
There are many variations, but this is only for advanced users.
For most admins, the default option is all you need.
You can also use WPCode to insert custom PHP code snippets, CSS code snippets, HTML code snippets, and text snippets with full conditional logic.
2. Add Custom JS Manually (functions.php file)
This method is a bit trickier, and I only recommend it for experienced WordPress users with at least basic coding knowledge.
You will have to edit the functions.php file, and if you don’t add the code properly, you can even crash the website in the worst-case scenario.
It is highly recommended that any changes to the theme’s files are done using a WordPress child theme.
This ALLOWS you to customize the theme without the risk of losing all your hard work when the theme is updated.
But you can also use a WordPress backup plugin to recover your website as quickly as possible.
How To Add Custom JS To Functions.php File
Prepare your JavaScript code and open the functions.php file.
ADD the following code to insert the JavaScript into the header of your website:
function example_javascript() {
?>
<script type=”text/javascript”>
// your javscript code goes here
</script>
<?php
}
add_action(‘wp_head’, ‘example_javascript’);
You can see that we are not adding the code to the header.php or footer.php, yet the inserted code will ultimately end in one of them.
This is achieved with the add_action call where the position is set with either wp_head for the header or wp_footer for the footer.
The FOLLOWING code will add the JavaScript to the footer of your website:
function example_javascript_footer() {
?>
<script type=”text/javascript”>
// your javscript code goes here
</script>
<?php
}
add_action(‘wp_footer’, ‘example_javascript_footer’);
This is all there is to it.
JavaScript is now added to your website, and with that, the necessary functionality.
FAQs About JavaScript In WordPress
What is JavaScript?
It’s a scripting language that you can use to implement extra features on your website.
But basically, it makes the world wide web more dynamic.
Most of the fancy animated content you see on modern’s websites is made with it.
Can you edit JavaScript in WordPress?
Yes, definitely. You can add, modify and delete JavaScript functions in WordPress.
And you can do so with the help of a plugin or by manually editing the functions.php file.
Just make sure you are implementing changes in a child theme and have some coding knowledge.
Can I use JavaScript instead of PHP for WordPress?
No, as the purpose is different.
PHP is the programming language that most of the WordPress codebase is written in.
JavaScript can only access and modify the front end of your website because that’s the way WordPress is coded.
So, all the interaction with the database in the backend can only be achieved with PHP.
Where is the best place to put JS in WordPress?
Usually, JavaScript will go in the header or footer section of your WordPress website, so it is loaded on every website page.
For example, if you have affiliate marketing set up like Facebook Pixel, the script needs to be loaded on every page so that you can track your visitors properly.
So, unless the cookies are only tracked on specific pages, or dynamic content is only meant to be on the home page, JavaScript should be inserted on every page.
What can JavaScript do for a website?
The use of JavaScript on the web is very diverse, some of the most popular features include:
- Interactive menus with animations
- Adding creative hover effects
- Creating vivid image galleries with different layouts and special effects
- Zooming in or zooming out on an image
- Playing audio or video on a website
No Comments