| WordPress
Add Custom JavaScript into your WordPress Site

In some situations, you may need to add custom Javascript to your site. Normally, this would involve modifying your theme files.

However, there is a less intrusive alternative. "Header and Footer Scripts" is a plugin to add custom JavaScript to WordPress without modifying your theme.

In this tutorial, I'm going to show you how this useful plugin works.

First, let's install the plugin:

  • Log in to your WordPress site.
  • Go to Plugins > Add new
  • Search for "Header and Footer Scripts".
  • Click "Install Now" and activate the plugin.
Custom JavaScript into WordPress

Option #1. Upload a custom Javascript file

  • Save your custom JavaScript code into a file with the .js format
  • Upload it into your site to this folder: wp-content/themes/your-theme/js/
  • Go to Settings > Header and Footer Scripts.

Now you have two options to load the file:

  • Scripts in header (load inside head tag)
  • Scripts in footer (load before closing body tag)

Use the location that match better your needs using this syntax as example:

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

 

Custom JavaScript into WordPress
  • Click "Save settings" button when you're done.

Option #2. Load custom JavaScript without a file

Alternatively, you can add your code directly into WordPress without the need for a custom .js file:

Custom JavaScript into WordPress
  • Click "Save settings" button when you're done.

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.