The ultimate guide to adding AdSense to WordPress using GeneratePress

Ads on websites are a bit of a hot potato. On the one hand a large number of visitors hate them and use ad blockers but on the other hand, developers and writers have to somehow cover their costs. After all, running a website doesn’t come for free. If you ask me it’s a fair trade-off for the content you get.

Up until not too long ago I was using Google’s AdSense Auto ads. These were meant to revolutionise the way we place AdSense ads on our websites. Some clever machine learning would figure out what ad to put where and it would be an optimal experience for both reader and creator. All with minimal coding.

But, as it turned out, AdSense Auto ads aren’t quite there yet. Ads would appear above my header image, in between the steps for a recipe or attached to galleries without any padding. This made for an awful reading experience and surely turned some of my visitors in the direction of ad blockers. I’m pretty sure this also led to more accidental clicks.

It was obvious to me that I would have to rid my pages of auto ads and return to good old manual placement. I had a few requirements for my ads:

  • They had to be clearly separate from the rest of the content. If possible in their own little container.
  • They should interrupt the reading experience as little as possible.
  • Despite the previous two requirements I still wanted to get a decent amount of impressions and if possible clicks.

With that in mind I set out to create these ads. There are a large number of plugins for WordPress that will place ads for you. But just like with Auto ads, I wasn’t going to trust some machine with the layout of my website. And that is where the brilliant GeneratePress Elements came into play. I wasn’t looking forward to editing each individual post and page in order to place some ads. So I figured I could use Elements to place my ads.

I did actually end up using a plugin for some things. Two in fact. The good news is that I have found a very nice and easy to use plugin called Advanced Ads. This plugin won’t bug you too much about paying for a pro version and the free version can get everything done. All this plugin will do for us is convert the AdSense code into a neat little shortcode. That, plus some basic styling and making sure our ads look good both on mobiles and desktops.

Things you need to follow this guide

  • You need to have an AdSense account.
  • You have to be using the WordPress theme GeneratePress. This guide will be using a feature specific to that theme. That feature is only available in the paid version.
  • You have to have the plugin Advanced Ads installed.
  • There is another plugin called Q2W3 Fixed Widget which is optional but also very neat. So you might want to install that one too.

Configuring AdSense ad units

I’m not going to go with responsive ads because I don’t trust AdSense not to mess up my site’s design. So what I did is configure fixed sizes for my display ads. Because I had no idea what sizes to pick I used a handy guide from wpbeginner.com as a reference.

In-article ads

You can create ad units by clicking on Ads, then Overview and moving over to the tab named By ad unit.

The first ad is going to be an in-article ad. This might sound as if I’m going against my word, but these can only be responsive. To my defence, I’ve found they don’t often vary in size and do embed very well into articles. And they allow for some very basic styling. Once we’ve finished setting up the ad we can give it a name at the top of the page and save it. We won’t be needing the code yet so just ignore the next message.

In-article ads allow for basic styling

Display ads

While we’re in AdSense we may as well set up the rest of our ad units. To this just click on the big button with the description Display ads, enter your desired size and save it. I went with the following formats:

  • Medium rectangle (300×250)
  • Mobile leaderboard (320×50)
  • The billboard (970×250)
  • The half page (300×600)
  • The desktop leaderboard (728×90)
Display ads can be a fixed size

Advanced Ads setup

We can now start importing our ads using the Advanced Ads plugin. But before we can do that we have to link our AdSense account. Luckily Advanced Ads does most of the work for us. Simply go into the Advanced Ads settings, select the AdSense tab, and click on Connect to AdSense. This will open a window from which you can select the Google account you used to set up AdSense. A code will appear which you will then have to paste into the Advanced Ads settings.

AdSense can easily be set up using Advanced Ads

In-article ads in Advanced Ads

The first ad we’re going to add is our in-article ad. To do that we can click on Ads in Advanced Ads. We can then select AdSense Ad from the list. This should show us all of the ads that have been created in AdSense. If there’s something missing you can simply click on the refresh icon in the top right-hand corner of the list.

All my AdSense ads in Advanced Ads

If I select an In-article ad, a warning pops up. No worries, this is to be expected. It just means we have to enter our code manually. Click on the option to insert an AdSense code. This will present you with a field to enter that code. Now head into AdSense and find the appropriate ad unit. Click on the code icon (< >), copy your code, and paste it into Advanced Ads. Then you can simply click onto next.

Click on insert a new AdSense code here to add your code

The following conditions can be used if you want your ad to only appear on certain devices such as desktop browsers or smartphones. As our in-article ad is responsive there’s no need for that. Proceed by clicking on next.

This in-article ad won’t need any conditions

Finally we can select where we want our ad to appear. Because there’s no way of setting this up using GeneratePress Elements, we’re going to let Advanced Ads take care of it. Select content from the options and you should be prompted to choose a paragraph. This ad will then appear after the paragraph you chose.

By selecting Content Advanced Ads will automatically insert ads into your posts

There are some basic styling options available here. I’ve centered my ad and added a small margin to the bottom, to give it a bit of breathing room. You can repeat these steps and add more in-article ads now or leave it at just one.

Advanced Ads allows for some basic styling of ads

Display ads in Advanced Ads

To add these you go through the same steps again. However things are considerably easier because we don’t have to add any code manually. But what I am going to do is add visitor conditions. Some of these ads are meant to be displayed only on desktop browsers and others only on mobile browsers.

I’m setting my half-page ad to only be shown on desktops. And I’m also not going to select any placement for this ad. That will be done manually. You can now do the same with the rest of your display ads. Set them all up but don’t choose any placement yet. Also don’t forget to set your ad to display only on certain devices.

My half-page ad will now only appear on desktops

Placing ads in GeneratePress

With that set up we can finally think about placing our ads. The first one I’m sure I want is one above each post. On a desktop it will span the complete width, this will be the billboard unit. On mobiles it’ll be a leaderboard.

An example of the ad I want to set up

To make this all possible we’re going to be using the groups inside of Advanced Ads. Click on add a new Ad Group Inside of the Groups. I’m simply naming mine Billboard. With the group ready we can click on edit. Select Ordered ads and leave the visible ads at one. Then add the two ads you want displayed. So for me it’s the Billboard for desktops and the Medium rectangle for mobiles.

A new Ad group in Advanced Ads

Update the group and head back into the overview. In the same place you can find the Edit button you can now click on Usage and copy the shortcode it presents to you.

Update the group and head back into the overview. In the same place you can find the Edit button you can now click on Usage and copy the shortcode it presents to you.

Head over to the GeneratePress Elements and add a new one. This Element will be a hook. In order to give our ad its own little container we can place it inside of a div container. Give this container the class inside-article and you’re sorted. Now paste the shortcode in between the div tags.

To place the ad above the content and sidebar but underneath the header I’m going to select the Hook inside_container there’s a handy visual guide available in the GeneratePress docs as to where these hooks are located.

Enable the option to execute shortcodes and move over to the display rules. Select Posts and leave the other option on All Posts. Don’t forget to give this Element a fitting title and hit Publish.

Telling the ad to only appear on Posts

And just like that we have our first ad published. It’ll now appear on each individual post without us having to make individual edits. Using these Hooks you can place ads anywhere around your content. How you place yours is up to you.

GeneratePress 3 is here and it’s amazing

It’s here. We were presented a short teaser in the latest update to GeneratePress Premium and now we get our first glimpse of it. GeneratePress 3.0 has landed. And this…

2 thoughts on “The ultimate guide to adding AdSense to WordPress using GeneratePress”

  1. Thank you for your guide.
    I was happy to set up Generatepress then before going live I reminded to myself I had AdSense and it wasn’t implemented…
    I will use your tutorial to do so, even if I find this plugin a little hard to understand.

    Thanks again,

    Sam

    Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.