[Support request] Page Header Content – Cannot save

[tobymiguel]

I am trying to implement Google Ad code into the Page Header content, but each time I try, everything “freezes” and I can’t save or do anything.

[Tom]

Interesting, can you show me the code you’re adding?

[tobymiguel]

Hi Tom

It is just the normal adsense code, example:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ad code -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-00000000000"
     data-ad-slot="000000000"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

[Tom]

I just saved that block in the Page Header content area without any issues.

However, adding javascript in there might not be the best idea, and I’ll probably add a filter that prevents that from happening.

One thing you can try is adding your code into a shortcode, and then placing the shortcode in the content area:

add_shortcode( 'adsense', 'my_adsense_shortcode' );
function my_adsense_shortcode()
{
    ob_start();
    ?>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Ad code -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-00000000000"
         data-ad-slot="000000000"
         data-ad-format="auto"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <?php
    return ob_get_clean();
}

Then you can use the [adsense] shortcode wherever you like.

Another perk to this is you can change the ad code and it will change it site-wide wherever you’re using the shortcode.

[tobymiguel]

Thank you Tom, this is working.

But why are the Page Header Content only displaying on the Home page? Can I make it display side-wide?

[Tom]

Page Headers are page-specific.

If you want it to be global, you want to use GP Hooks.

[Ramesh Srinivasan]

Nice Tip, Tom. Right now I’m using “Ad Inserter” Plugin, but will try your short-code method. Looks slick.

[Tom]

Thanks! 🙂

[tobymiguel]

Hey Tom

Can you tell me how to do it with GP Hooks? 🙂

[Tom]

You would just put the shortcode in “Appearance > GP Hooks” in the hook you want (After Header is the same as the Page Header).

[tobymiguel]

Oh I hadn’t activated Hooks… 🙂

Anyway, I tried your suggestion, but then next problem arises.

If you put anything in the After Header hook, it will not display inside a container.
I tried to set the width to 1100px in CSS, but then it is not responsive anymore.
Any suggestion? I’ve tried other hooks, but none of them will display inside the container above the content and sidebar.

[Tom]

Have you tried the “Inside Content Container” hook?

Otherwise, wrap the code in a container:

<div class="grid-container grid-parent">
    Your contained content
</div>

[Author]

Posts