AdSense in a dynamic WordPress sidebar

I’ve had an AdSense block sitting in my sidebar for a while now. It only recently occurred to me that the sidebar has a dynamic size (22% of the page body), and depending on screen resolution (and browser window size) the 250x250 px ad block was slightly messing up the page layout.

So the task was obvious: How do you show AdSense blocks of different widths depending on the visitor's screen resolution?

Unfortunately php can’t detect screen resolution, since php runs server-side and no request parameter passes the client’s screen width along. So the approach with functions.php is out.

javascript, on the other hand, runs client-side, and you can use it to figure out the client’s actual width.

I went over parsing the ad code in the first post

What we care about here is the middle part, namely class="adsbygoogle", since it’s different for every block.

Next, go into your AdSense account and enable ad blocks in the sizes you need. In my case that’s:

• 125x125
• 180x150
• 200x200
• 250x250
• 300x250

And based on the section describing class="adsbygoogle", build the script you need:

<script>
width = window.innerWidth;
window_percentage = (window.innerWidth/100)*95;
sidebar_percentage = Math.round((window_percentage/100)*22);

if ((sidebar_percentage > 125)&&(sidebar_percentage <= 180)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:125px;height:125px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
} else if ((sidebar_percentage > 180)&&(sidebar_percentage <= 202)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:180px;height:150px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
} else if ((sidebar_percentage > 202)&&(sidebar_percentage <= 250)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:200px;height:200px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
} else if ((sidebar_percentage > 251)&&(sidebar_percentage <= 301)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:250px;height:250px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
} else if ((sidebar_percentage > 301)&&(sidebar_percentage <= 402)) {
    document.write('<ins class="adsbygoogle" ');
    document.write('style="display:inline-block;width:300px;height:250px" ');
    document.write('data-ad-client="ca-pub-<strong>xxxxxxxxxxxxxxxx</strong>" ');
    document.write('data-ad-slot="<strong>xxxxxxxxxx</strong>"></ins> ');
}
</script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</center>

In my case the main body takes up 95% of the page width:

window_percentage = (window.innerWidth/100)*95

22% of that is the sidebar width:

sidebar_percentage = Math.round((window_percentage/100)*22)

After that it’s just a simple chain of conditions displaying the right block depending on screen width.

Now the ad block in the sidebar doesn’t mess up the page layout anymore. Took half a day, but worth the effect.

This approach works just as well for other ad and non-ad blocks too.