No results found. Try again with different words?

Search must be at least 3 characters.

How to Add Custom Javascript Code in Astra?

Sidebar Image

Did not find a solution? We are here to help you succeed.

Whether you want to improve user interactions, integrate third-party tools, or add unique visual effects, injecting JavaScript into your Astra website can make your site truly stand out.

In this guide, we’ll walk you through different ways to effortlessly add custom JavaScript code to your Astra theme. We’ll go step by step, ensuring you have the ability to adjust your website’s behavior and features according to your precise vision.

How to Add Custom JavaScript Code in Astra?

Adding custom JavaScript code to your Astra-powered website is a breeze, and there are several methods to achieve this. Here are three convenient ways to incorporate custom JavaScript into your Astra theme:

  1. With Insert Headers and Footers Plugin
  2. With Free Astra Hooks Plugin
  3. With Site Builder module in Astra Pro Addon

You can pick the method that suits your style – whether it’s a plugin or Astra’s tools.

With Insert Headers and Footers Plugin

Any JavaScript that is unrelated to the theme or design of the website; any code that you will need to have on the website even if you switch the theme — should always be added through a plugin. 

For example, you will always need the Google Analytics code present on your website regardless of the theme you’re using. But if you add the Google Analytics code in the theme settings now and switch the theme from Astra to something else later, the Google Analytics code will no longer function.

So it is a best practice to install JavaScript unrelated to the design and theme in its own independent plugin. Insert Headers and Footers is a free, popular, and lightweight plugin that you can use to add JavaScript code.

With Free Astra Hooks Plugin

Astra Hooks Plugin allows you to add your Custom Content, Shortcodes, and JavaScript code in the various hook locations. Once installed, you will see a new tab in the Customizer.

  • To add JavaScript code in the head, use the wp_head location
  • To add the code in the footer, use the wp_footer location.

Please visit the plugin page WordPress Repository to download and learn more about this plugin and how it works.

With Site Builder module in Astra Pro Addon

If you have Astra Pro Addon, you don’t need to install another plugin to add JavaScript code.

  1. Navigate to Astra Dashboard
  2. Enable Site Builder Module
  3. Navigate to Astra > Site Builder 
  4. Select the Hooks as the layout type
  5. Enable Code Editor and add your code
  6. Replace existing comments and paste your code 
  7. Set other options as per your needs and save.

For most of the websites, the configurations below works great:

Astra Custom Layout Settings
  • Layout: Hooks
  • Action: wp_head or wp_footer depending on where you wish to add the code
  • Priority: 10
  • Spacing: 0
  • Display On: Entire Website
  • User Roles: All

We hope this document has been helpful. If you have any questions, feel free to leave a comment below.

Was this article helpful?
Sidebar Image

Did not find a solution? We are here to help you succeed.

Related Docs

Join 1,653,898+ Happy Site Owners Using Astra

Whether you are a beginner, small business owner, or professional web developer, Astra provides all the tools you need to easily build your beautiful WordPress website.

Download is Just A Click Away!

Membership Retention Checklist Download

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form