If you run a successful website, there is a good chance you will use some sort of affiliate network to monetize your website.
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)
2 Simple Ways To Add Custom JS To WordPress
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).
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.
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.
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
// your javscript code goes here
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.
// your javscript code goes here
This is all there is to it.
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.
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.
No, as the purpose is different.
PHP is the programming language that most of the WordPress codebase is written in.
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?
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.
- 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