If you run a successful website, there is a good chance you will use an affiliate network(s) 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:
- 2 Simple Ways To Add Custom JS To WordPress:
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 has several premade templates for the most common uses you can implement with one click.
But, often, 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 must 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 limit the code to the home page only or 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
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 in which most of the WordPress codebase is written.
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
Note: This article was originally published on October 17, 2022. But our team regularly reviews it and updates it with necessary improvements for accuracy.