How to add Google AdSense Responsive Ads to WordPress

Google say it is really easy to add the AdSense responsive code to WordPress. But if, like me, you manually control the placement of ads then the cut and paste code that Google provides doesn’t work.

I use the WordPress Genesis theme – so these instructions have been based around that. However these instructions should work for other responsive themes too.

How to get responsive ads working

the first thing to know about responsive ads is that you can make them any size you want. You are no longer constrained by the predefined sizes of the old ads.

This is great news because it means that if you place an ad at the top of your content then you can stretch it so it is the full width of your page. This is much better than having white space and, in my opinion, is one of the best reasons to swap to responsive ad units.

In order to get the responsive ads working you have to do the following steps:

• Create the Ad
• Update your WordPress Theme CSS file with the responsive code
• Add the ad to your WordPress article or widget 

a. Create the Ad

If you have know how to create the responsive ad units then you don’t need to create the ad.

Instead simply grab the data-ad-slot code as described in step 9. You will need the ad unit ID (also called a data-ad-slot) and your publisher ID (also called a data-ad-client) for use later so make a copy of it.

1. Login to Google Adsense

2. Click ‘My Ads’ on the top menu

3. Click ‘New Ad Unit+’ to create a new unit

4. Give the unit a name such as ‘Responsive Ad At Top Of Page’.

I tend to put the word responsive in the description to make it easy to spot. This is especially important if you have pre-existing ad units and you don’t want to confuse them.

5. On the ‘Ad Size’ dropdown menu select ‘Responsive ad unit’

6. Select the Ad type and style the ad how you wish.

7. Once the ad is styled click the ‘save and get code’ button. A pop up window will appear with the code in it.

8. The mode menu item will default to ‘Smart Sizing (Recommended)’. Copy the code and paste it somewhere safe, such as into a document.

9. If you look at the code carefully you will see a couple of lines that says something like

data-as-slot=”1234567890123″

data-ad-client=”ca-pub-00000000000″

Keep these safe as you will need it later to create your ad.

b. Update your WordPress Theme CSS file with the responsive code

I have assumed that you know how to edit your theme’s CSS file, and use FTP software to upload the new version to your website.

1. Decide on the size of ads you would like to use. Remember, you can make them ANY size you want.

I usually go for 3 sizes:

• Desktop size
• 600px – 480px (for tablets)
• 480px and lower (for smartphones)

If you are looking to replace a 336px x 280px ad unit then I would suggest the following sizes:

• Desktop size : Full width of content area x 280px
• 600px – 480px (for tablets) : Full width of reduced content area x 280px
• 480px and lower (for smartphones) : 250px x 250px

2. Open your WordPress Theme’s CSS file and add the following code outside any @media declarations. This will then become the ‘default’ size:

.adslot_1 {
width: 550px;
height: 280px;
}

If you want a different size of ad simply use your own prefered sizes.

3. Find the @media declaration that says something like:

@media only screen and (max-width: 600px)

This is for tablets and the size may be slightly different depending on who wrote the theme.

4. Within the declaration add the following code at the bottom:

.adslot_1 {
width: 550px;
height: 280px;
}

If you want a different size of ad simply use your own prefered sizes.

5. You will have another @media declaration which will be for smartphone something like this:

@media only screen and (max-width: 480px)

6. Within the declaration add the following code at the bottom:

.adslot_1 {
width: 250px;
height: 250px;
}

If you want a different size of ad simply use your own prefered sizes.

7. Save the file and upload it to your hosting account.

c. Add the ad to your WordPress article or widget

1. Login to WordPress and edit an article

2. Click on the ‘Text’ tab at the top of the text to change to HTML mode.

3. Copy in the following code:

<ins class=”adsbygoogle adslot_1″ style=”display: inline-block;” data-ad-client=”ca-pub-0000000000” data-ad-slot=”0000000000“></ins><script type=”text/javascript” src=”http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js” async=””></script><script type=”text/javascript”>// <![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({});
// ]]></script>

4. Replace publisher code found in the line ‘data-ad-client=”ca-pub-0000000000“‘ with your own code that you copied earlier.

5. Replace ID code found in the line ‘data-ad-slot=”0000000000“‘ with your own code that you copied earlier.

6. Publish the article and pat yourself on the back for a job well done!

Remember it can take a while before new Google AdSense ad units show adverts so you may not see anything right away.

Did you find this post helpful?

If you found this post helpful please take a moment to tweet, like, or share this article by using the buttons at the top or bottom of this page. I’d really appreciate it. 🙂

Also, if you are feeling extra generous please leave some encouraging feedback in the comments section at the bottom of the page. I love getting feedback from visitors. It encourages me to continue writing useful articles for readers like you.

Thanks for taking the time to read my website!