That “icing” can take several forms. For instance:
- In some cases, websites will employ custom js in WordPress to produce what is called an “application programming interface”, or API. One example of an API would be providing a user with the ability to manipulate an audio clip that is embedded on a web page.
First Things First: The Wrong Way
Adding a custom script may well be necessary to achieve the functionality a business owner is after. But if the script is added in a rushed or haphazard fashion it could wind up doing far more harm than good. In order to save time and trouble, it’s best to first address the ways custom js in WordPress should not be deployed, before getting into the right way to do so.
The Right Way to Add Custom JS to WordPress
Note: Before we go any further we should also emphasize the importance of creating a “child theme“ for your site and making any modifications to that. This will ensure that if anything goes terribly wrong that you have a complete backup of the site ready to step in.
When the page loads it will read this call and reach out to the “whatever” file to execute the scripts that are there. If those scripts are well-formulated they should execute flawlessly on the page and enhance the functionality. If you are not sure how to add the call to the header of the page there are plugins that will do it for you.
WordPress and plugins go together like apples and cinnamon, or peanut butter and jelly. You really can’t fully appreciate one without the other. By current estimates, there are more than 55,000 plugins in the official WordPress repository, and tens of thousands of non-official plugins loitering around the internet hoping someone will take a liking to them.
With that many plugins, it’s reasonable to assume that there might be one or two out there designed to produce the event or effect you’re after. All you have to do if you’re developing a WordPress website is log into the site via the “yoursite/wp-admin/” login interface, navigate to the plugin page and enter the function you’re looking for in the search box at the top of the page.
You’ll then be presented with a host of plugins all designed to produce the desired effect, event, API or whatever. Select one and click “install”. Then click “activate” and fill in whatever variables may need to be filled in to complete the process. Using a plugin has several advantages.
- First, if the plugin is in the WordPress repository you know it has been thoroughly vetted and is both safe and effective.
- Second, if you are developing a site yourself and you are not a professional coder, you will not have to hire one to get the effects you’re after. That can save you a lot of money.
- And third, adding functionality via plugins is so quick it’s a little bit ridiculous.
As we said, there are a multitude of WordPress plugins available for just about every imaginable function, event, or other process or effect. Though they tend to take different paths to the same destination. Let’s look at a few of the methods these plugins for WordPress use to work their magic.
In most (not necessarily all) cases, you will upload your js file via FTP to the wp-content/ folder. And your plugin should allow you a way to enter the permalink to that file, which will then be added to the header or footer.php files as a call, rather than as lines of executable code.
It may seem a bit far-fetched that anyone would go to the trouble of creating a plugin just to integrate one lonely piece of js into a single page on a website, but it’s not at all. Coders who create custom js for WordPress will often produce an accompanying plugin to facilitate the use of the script and enhance their reputation.
A plugin will make it less likely that the code you add will create cascading problems that could undermine your site’s functionality, as well as its viability in the eyes of Google. Keep in mind that if you want to add a script intended to execute before other page content, you’ll need to add that to the header.php file. And if you want to add a script designed to execute after the other page content has loaded, you’ll need to add it to the footer.php file.
There are numerous plugins out there that will perform these modifications of the PHP files for you. Simply search for them on the plugins page of your site and then install, activate and open the plugin interface. There you’ll be asked to enter the script (or scripts) that you want to execute. Some of these plugins include a box for entering script(s) into the header and a separate box for adding script(s) to the footer. You can choose to leave either blank or you can add scripts to both PHP files simultaneously.
Use the information provided in the above guide to determine which method of adding custom js to a WordPress site is right for your particular website, or the site you are developing for someone else. And remember these fundamental rules:
- Always create a child theme and make any modifications to that.