How to add AdSense under the Astra theme title

When add AdSense, you will most likely use a plugin. However, if you are not adding AdSense to various locations but only to the header or under the title, it is better to add it directly with code rather than a plugin.

Since plugin installation should be minimized to ensure site speed, if you are only adding 1 or 2 AdSense ads, adding the code directly rather than using plugins can save system resources.

Inserting AdSense code directly can be difficult for first-time users, but if you follow the instructions and follow the steps, you can add AdSense without any CLS issues.

So, let’s learn how to add AdSense under the top title, which is the most frequently added based on the Astra theme .

Save space under the title

You need to secure space for AdSense to be displayed under the title, as CLS (Cumulative Layout Shift) issues can occur. If you do not secure space and AdSense is displayed, it will push out the body text, causing a CLS error.

Well, since this is based on the Astra theme, let’s make use of some additional CSS features that most themes have to make room for this.

You can do this by going to Appearance > Customize > Additional CSS in your WordPress admin .

.custom-adsense {
    margin: 20px; !important; 
    text-align: center;
    height: 280px; 
}

@media (max-width: 768px) {
    .custom-adsense {
        height: 320px; 
    }
}

You can add the code above to the additional CSS, and what you need to adjust here is the height. Since the space is different between desktop and mobile, you need to adjust the height while refreshing to prevent the body from being pushed and then raised again.

Add AdSense code

function add_adsense_below_title($content) {
    if (is_single()) { 
        $adsense_code = '<div class="custom-adsense">
                            <ins class="adsbygoogle"
                                 style="display:block"
                                 data-ad-client="ca-pub-xxxxxxxxxx"
                                 data-ad-slot="xxxxxxxxxxxx"
                                 data-ad-format="auto"></ins>
                            <script>
                                (adsbygoogle = window.adsbygoogle || []).push({});
                            </script>
                        </div>';
        $content = $adsense_code . $content;
    }
    return $content;
}
add_filter('the_content', 'add_adsense_below_title');

The above code is an AdSense code that adds AdSense only to posts and the location is set under the title. You can add this to functions.php in Appearance > Theme Editor.

The parts to be modified in the above code are the AdSense client and slot parts highlighted in red. You must check with AdSense and enter them correctly.

And in the case of functions.php, the added code may disappear when the theme is updated, so you need to create a child theme that will not be removed even if the theme is updated and add it.

To summarize the work

1. Add code to reserve desktop and mobile space in Appearance > Customize > Additional CSS
2. Add AdSense code to Appearance > Theme Editor > functions.php

It may seem difficult if you only look at the contents, but if you try it yourself, you will be able to add AdSense code that does not cause CLS (Cumulative Layout Shift) issues without difficulty.

▶ AMP for WP Plugin: How to Apply Automated Ads

▶ How to fix missing H1 tag issue on Astra theme home screen

▶ 404 Error: Key Things to Check When You Get a Sitemap Not Found