How to Add Custom JavaScript to WordPress

How to Add Custom JavaScript to WordPress

wprocket

Are you looking for a way to add a custom JavaScript file/source to WordPress? Alright, you have landed on the right web page. Generally, some websites require some custom JavaScript functions for new features to perform.

Add Custom JavaScript Source to WordPress Step by Step

However, there is a lovely and straightforward alternative method. Using a plugin called Header and Footer Scripts. It will allow you to add all types of JavaScript in <head> and <footer> tag of your WordPress website. You can download the plugin directly from here or can do the following to install from WordPress admin panel.

Let’s first install the plugin:

You can also read: How to Install WordPress Plugin

  1. Log in to your WordPress Dashboard
  2. Go to Plugins → Add new
  3. Search for plugin “Header and Footer Scripts.”
  4. Click on “Install Now” and activate the plugin.

Header and Footer Scripts Plugin

First Step: Upload Custom JavaScript File

  • Save your custom JavaScript code into a file with name.js format
  • Upload it to your cPanel main Theme in this folder: wp-content / themes / your-theme / js /

Second Step: Add Source/File to Plugin Setting

Go to Settings → Header and Footer Scripts. Now, you have two options for loading the source code:

  • Header Script (it will embed between <head></head> tag)
  • Footer script (it will embed between <footer></footer> tag)

For example, using this syntax, use a location that matches your needs:

<script src="https://www.yoursite.any/wp-content/themes/your-theme/js/file.js"></script>

Add Custom JavaScript Source

wprocket-728x98_Black

Otherwise, you can add your code directly to WordPress without needing a custom name.js file

<script>
   // JavaScript URL 
</script>

You may also like our blog series, RainaStudio 101:

Conclusion

The way we have discussed here in this article has real benefits that are easy to achieve and will save you time rather than other ways. If you found this article helpful, raise your hand, and leave your feedback in the comment section.

You will love The following tutorials:

GenesisPro728x90

Facebook
Twitter
LinkedIn
Pinterest
Tumblr
Naim Wahid

Naim Wahid

I love to work with WordPress, PHP, JavaScript, and other web-based technologies. Studying CSE at BCMC(Bangladesh Computer and Management College), Jashore.

Leave a Reply

Your email address will not be published. Required fields are marked *