How to Add JavaScript in Astra Theme?

In this tutorial, we will add JavaScript in Astra Theme without the help of any plugin. Here are going to insert custom JS code with the help of the Custom Layouts Module.

so, if you want to add vanilla JavaScript code to your Astra theme, you can easily do it on a specific post or page in your WPAstra Theme.

In this article, you are also going to

  • Insert JavaScript in specific posts or pages.
  • Using Custom Layouts to Insert the custom code.
  • Adding and Displaying User Input Forms.
  • Computing the value using forms and displaying output.

Steps to Add JavaScript in Astra Theme

How to Add JavaScript in Astra Theme

There are several ways to add JS code to Astra WordPress Theme, but here we will use the Astra Pro version to enable the Custom Layouts Module via Astra Options.

If you don’t have the Astra Pro version then get it right now.

I assume you already have activated the Astra Pro plugin so let’s get started.

1. Activate Custom Layouts Module

Activating Custom Layouts Module in Astra Theme

We need to add code via Hooks in Astra Theme in order to insert JavaScript code on our website. so, let’s activate the Custom Layouts Module.

Go to Appearance > Astra Options > Available Astra Pro Modules > Elements > Activate

2. Add New Custom Layouts

Let’s add New Hook from Custom Layouts.

Go to Appearance > Astra Options > Custom Layouts > Add New.

Select Hooks from the available options and that will create a new Custom Layout Hook.

To add JS code, click on Enable Code Editor Option located at the top of the box.

Here, Add the Title for the Custom JavaScript code.

Under Layout Option, choose the Hooks option.

Now, you will be able to see more Hooks options.

Adding Custom JavaScript code in Astra Theme via Hooks Layout

Here we are going to add simple JavaScript code to add two numbers from the input form.

<script>
        function add() {
            var a, b, c;
            a = Number(document.getElementById("first_number").value);
            b = Number(document.getElementById("second_number").value);
            c = a + b;
            document.getElementById("answer").value = c;
        }
</script>

3. Custom Layouts Settings for JS Code

  • Under Action, Select wp_footer.
  • Leave Priority as it is.
  • Under Spacing leave as it is.
  • Select Entire Website under the Display On Option.
  • Under Responsive Visibility leave it as it is.
  • For other settings leave blank.
  • Finally Hit Publish Button.

4. Create a Post/Page

Create a new post/page to display the result of the JavaScript code.

Here I have created a post named Sum of Two Numbers.

5. Creating Input Forms

Now it’s time to create input forms to add two numbers and also display the results.

  • Go to the Sum of Two Numbers post.
  • Select Custom HTML block in the content area.
  • Insert the following form code.
  • Hit Publish button.
Enter the first number : <input id="first_number" type="number"><br><br>
Enter the second number: <input id="second_number" type="number"><br><br>
<button onclick="add()">Add</button><br><br>
Total Sum: <input id="answer" readonly>

6. Result

Here is the result of adding two numbers in the Astra WordPress Theme.

Result of Adding JS code in Astra Theme

How to Add JavaScript in Specific Posts & Pages in Astra Theme?

Inserting or Adding JavaScript code in a specific Post/page is easier in Astra WordPress Theme.

  • First, create a post/page in which you are going to use the JavaScript code.
  • Second, select Action from the option where you want to add your content or snippet 
  • Third, while creating the Hooks from Custom Layouts Module, you will see the Display Rules option.
  • Now, select the specific post/page that you published earlier.
  • Hit Publish button.
  • Now you will be able to see the result/output.

Also Read

Takeaway

This article aims to help users to add scripts to the Astra theme and make it work as intended. There is not so much advanced knowledge required.

Moreover, there are other ways to add JavaScript code to the Astra theme but a handy way is to use the built-in Astra Pro feature, i.e. via the Astra Options panel.

If you have any issues regarding this tutorial then please comment below.

Share:

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, and Blogging. I mostly publish tutorials on GeneratePress, Astra, Kadence, and GenerateBlocks.

2 thoughts on “How to Add JavaScript in Astra Theme?”

Leave a Comment