Saturday , 24 February 2018
Home » Make Money » Adding Responsive AdSense Ads to WordPress – The Why and How Of It?

Adding Responsive AdSense Ads to WordPress – The Why and How Of It?

Observing the rate at which people are becoming largely dependent on mobile devices to access the web, the one thing that site owners need to focus upon is, how they can make their site adjust to the varied screen sizes and resolutions. However, with so many new devices and platforms getting developed each day, making your website responsive on all of the OS platforms won’t be possible, or at least seems to be impractical. But, you can definitely make your responsive design work well when accessed on most popular platforms.

When it comes to creating responsive sites, there are several aspects that you need to consider for making your website successful, and most importantly, profitable. After all, most of us, create a site to earn some revenue. Indubitably, AdSense is the “de facto” money-making tool you can opt for. But, there is a problem with adding AdSense advertisements on your responsive layout, they might not adjust to the screen size it is being accessed on.

Want to know how you can make your site’s AdSense responsive for different platforms? Reading this post further will possibly help you learn about some workable solutions, using which you can make your AdSense ads responsive for your WordPress website.

Responsive AdSense Ads

Getting Started With Creating Responsive Ad Units

One of the best to make the size of your advertisement in-sync with how you control your responsive layout requires you to use a responsive add unit.

Responsive ad units, as the name implies, helps adjust your ads to fit your page layout across several devices. You can create a responsive add unit, by following the below listed simple steps:

  1. Get logged-in into your Google AdSense account.
  1. On the top of your window, you’ll find an ‘My Ads’ option. Simply click on it.
  1. In order to create ad unit, click on ‘New ad unit’ and give a personalized name to the ad as you like.
  1. As soon as you’ll click on the ‘Ad size’ option, a drop down menu will appear from where you need to choose ‘Responsive ad unit’.
  1. You can now choose the type of ad you want to display on your site, and get it styled. Once you’ve completed styling the ad, click on the “save and get code” button. This will generate a pop up window with the code that you need to add in your site to implement the responsive ad unit.
  1. Make sure to copy and paste the code to your selected advertisements present in your WP site in a secure manner. Let’s look at an example to see how the responsive AdSense code looks like:


<!– top –>

<ins class=”adsbygoogle”





(adsbygoogle = window.adsbygoogle || []).push({});


Note: In the AdSense code, make sure to save two values: data-ad-client and data-ad-slot.

Adding the Responsive AdSense Code in Your WordPress Theme

When it comes to adding the responsive code in your WP site, you can edit the settings of your CSS file and FTP to accomplish your objective. For doing so, follow these steps:

 Step 1 – Select an ad-size according to your own requirements.

Step 2 – Next, open up your theme’s CSS file you’re currently using, and append the below given code just after the “@media” declaration.

.adslot_1 {

width: 540px;

height: 270px;


 Note: You can choose to change the size of the ads.

You will also find another @media declaration for the mobile devices:

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

Once again access the CSS file, and then add the same code at the bottom of the file with different sizes:

.adslot_1 {

width: 230px;

height: 230px;


That’s it, simply save the CSS file and upload it on your account.

How to Display the Ads Via Widgets?

In case, you want to show up the ads on your front-end using widgets, just follow these key points:

  1. Login to your WP website admin panel dashboard.
  2. Navigate to the widget area.
  3. Drag and drop the “Text Area” widget to your website sidebar, and then simply paste the AdSense code inside your website’s header section.

Using GARD to Add Responsive AdSense to Your WordPress Site 

Abiding by the above discussed steps can give novices a hard time. Fortunately, there are a number of WordPress plugins that can be used to get the job done easily, without much hassle. One great plugin that allows you to embed responsive Google AdSense in your WP site’s content is Google AdSense for Responsive Design (also popularly referred to  as GARD). It does so, by using a shortcode [GARD].

What’s best about GARD, is that it works well on all of the devices. So, irrespective of which device your user is using to access your site, GARD will make sure to deliver the right-size AdSense ad that fits perfectly to the user’s mobile device screen. What’s more? This plugin works in conformity to the Google’s AdSense policies.

Let’s Wrap Up!

In case you’ve decided to create a responsive WordPress powered blog or site, then you’ll most likely want to make some profit from it. One viable solution, you can choose to accomplish your objective is to place AdSense ads into your site. However, you might face issue in adjusting the ads in sync with your responsive layout. This post will serve as an easy-to-follow guide for beginners, who find adding responsive AdSense ads to a WordPress install a difficult task.

Author Bio – Mike swan is professional WordPress developer and helps users in converting PSD to wordpress theme services.  He loves to share his experiences in web design and web development trends.

Leave a Reply