Use Astra Hooks

How to use Astra Hooks with Astra Free Theme

Astra is the most popular Wordpress theme with five out of five star ratings and more than 1 million active installations. The theme offers a lot of customization options. It is lightweight, fast, responsive and SEO friendly. You can design just any type of website including blog, portfolio websites and ecommerce sites using Astra. The theme is also very user

friendly and most customizations can be applied easily. You do not need to be an expert to use all its features and give your website an awesome look.

The Astra theme comes in both free and pro versions The pro version includes several extra features to make it easier for you to create and maintain your website. One of those premium features is the Astra Hooks. You can buy the Astra pro version if you need to use these hooks on your website. However, if you do not need all the features that come with Astra pro, you can keep using the free version and still use the Astra hooks.

In this tutorial, we will show you a few methods to use Astra hooks with the free Astra theme including the plugin and manual methods to apply codes to different website areas using Astra hooks.

The astra hooks allow you to insert codes in various positions. There are several positions in a webpage where it is not possible to add code directly using a plugin or by making changes to theme code. In that case, these hooks are particularly very useful for inserting codes.

There are several positions above the Astra header where you can insert ad codes in your website using one or the other hook. Similarly these hooks allow you to add codes in positions below the header or before post entry and after the post content as well as near the footer. You can check out a full list of [all Astra hooks here]. The easiest way to use Astra hooks is to buy the pro version. However, as we already mentioned, you will not need to buy the pro version solely for hooks.

Add code to Astra hooks using a plugin

Using Ad Inserter Plugin

Ad inserter is among the most popular plugins used for applying ads in your website. One of the best features of this plugin is that it allows you to use custom hooks available with your theme for laying ads or inserting and executing js, html and php codes.

Install the Ad INserter plugin just as you install any other plugin. Go the Wordpress dashboard and add a new plugin. Install Ad inserter and activate it. Now, go to settings in the Wordpress dashboard and click on Ad inserter.

Once on the Ad Inserter dashboard, you will see there are 16 blocks for inserting codes. After the last block, click on the settings sign. You will see the hooks button there. Click on it. You can use Ad Inserter to add 20 hooks and use them for inserting code or displaying ads.

Suppose, you want to display an ad under the header (a little lower than the Astra header). The hook you can use to do that is the astra_header_after or astra_masthead_bottom hook. Copy the hook name and add it to the action box. Now fill the hook name box and give this particular hook a name. For example, we are using the astra_header_after hook and labeled it ‘below header’. This hook gets called if we use the below header position for inserting ad code with Ad Inserter plugin.

Now, go to one of the blocks where you have added the desired code. Click on Insertion under the block and in the dropdown menu, you will see that the position we just added using the hook has become visible and can be used for laying ads or inserting any other code. The Below Header position we defined using the Astra_header_after hook is visible at the bottom of the dropdown menu. Go ahead and use it to display an ad.

Using Astra Hooks plugin

Another easy method to start using Astra Hooks is to use the Plugin by BrainStorm Force called ‘Astra Hooks’. This plugin makes it easy for you to add codes in various positions using these hooks.

Go to the Wordpress plugin repository and search for the Astra hooks plugin. Download the plugin zip file and upload it on your website or just install it by adding a new plugin. After you have activated the plugin, you can go to the customizer and you will see a new section labeled hooks there.

Click on it and you will see five different positions there including header, content, comments, sidebar and footer there. Choose the position where you want to place the code and then click on it to select the right hook. Paste your code inside that hook and done.

Add Code to Astra Hooks by Editing the Theme functions.php file

In case you do not want to use a plugin, you can still use the Astra hooks to add code to your website. However, to do that, you will need to edit the functions.php file of Astra theme. You can create a child theme before making any changes.

To add an html or js code to your them using an Astra hook, paste the following code inside your functions.php file at the bottom:

add_action( 'astra_hook_name', 'add_content_astra_hook' );
function add_content_astra_hook() { ?>
      <!-- Your HTML/JS code goes here -->
<?php }

In the above code, you will need to replace the astra_hook_name with the desired hook. Suppose, we want to add code to the astra_header_after hook:

add_action( 'astra_header_after', 'add_content_astra_hook' );
function add_content_astra_hook() { ?>
      <!-- Your HTML/JS code goes here -->
<?php }

You can use the above function to insert html and js code like your google analytics code or Adsense code to any specific hook. All you will need to change in the above code is to replace the hook name with the right hook. In the above code, we have used the astra_header_after hook, which you can replace with any such as astra_header_before or astra_masthead_bottom and so on.

To edit your theme’s functions.php file, you will need to go to the appearance section on your wp-dashboard and click on edit theme files. Add the code to the area where it says
‘Your HTML/JS code goes here’.

However, if you need to add php code, you will need to remove the ‘?>’ and ‘<?php’ marking the beginning and end of php code and add your php code):

add_action( 'astra_header_after', 'add_content_astra_hook' );
function add_content_astra_hook() { 
      <!-- Your PHP code goes here -->
}

So, that’s how you can easily add codes to your website and extend its functionality. Suppose, you want to show a promotional message under all your blog posts, you can add html code in the below content position using the above function.

Note: If you do not want to edit the functions.php file directly, just use the code snippets plugin to insert code without touching the functions.php file.