In this article, let』s take a look the ways to custom JavaScript code in Astra theme.
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, Google Analytics code will no longer function.
So it is a best practice to install JavaScript unrelated to design and theme in it』s 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 Java script code in the head, use the wp_head locationTo 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 Custom Layouts module in Astra Pro Addon:
If you have Astra Pro Addon, you don』t need to install another plugin to add JavaScript code.
Enable Custom Layouts Module (screenshot)Create New Post (screenshot)Enable Code Editor and add your code.Replace existing comments and paste your code (screenshot)Set other options as per your needs and save.
For most of the websites, configurations as below works great:
Layout: HooksAction: wp_head or wp_footer depending where you wish to add the codePriority: 10Spacing: 0Display On: Entire WebsiteUser Roles: All