My Site

Creating Awesome Wordpress Sites With Genesis

  • Home
  • Tutorials
  • Discounts

How To Add Adsense Ads To Your Genesis Theme

By Josh Kotsay | Last updated May 27, 2014 5

Share the love:
Facebooktwittergoogle_plus

Often times, you want to earn a little extra money from your niche site by adding Google Adsense or some other form of banner advertising. Depending on how much traffic your site gets, you might be able to offset your web hosting costs and other expenses with the ad revenue you get from visitors clicking on your ads.

GenesisAdsense

When you create an Adsense ad, you will get a snippet of javascript code that you need to insert on each page that you want to show the ad. But what if you have hundreds of pages on your site? You are going to quickly find that it is a huge pain in the ass to manually add that code to every one of your posts.

If you are using the Genesis Framework however, doing something like this is quite simple. All you need to do is leverage the Genesis Framework’s powerful hook mechanism. This will let us add our ad snippet in one place, and have it show up everywhere on our site.

In this short tutorial, I will show you how to display Adsense or any banner ad unit embedded in each blog post.

Step 1 – Get Your Ad Code

If you are going to use Adsense ad units, then head on over to your Adsense account page and generate an ad unit that will best fit with your blog. I typically find that the 336 x 280 or 250 x 250 ad units work best with these types of ads. Once you have setup your ad as you like it, grab a copy of the Javascript code that it gives you.

If you want to use your own banner ad units instead, then make sure you have your image and link code ready.

Step 2 – Add Your Ad Code Via Hook

Open up your child theme’s function.php and add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
add_action( 'genesis_before_entry_content', 'add_ad_unit' );
 
function add_ad_unit() {
?>
<div class="inpost-ad">
 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:250px;height:250px"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="2352484899"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
</div>
<?php
}

Here, I am leveraging the genesis_before_entry_content hook. This allows me to insert the ad code before the post content itself.

Style Your Ad Unit

Lastly, you will want to add some basic styling to your ad unit. Basically we want our ad to float to the right of our content and to have a little bit of margins between the ad and your post text. We can do that like this:

1
2
3
4
.inpost-ad {
float: right;
margin: 0 0 0 10px;
}

That is all there is to it. Your Adsense ad unit will now appear in every single post on your site.

Filed Under: Genesis Theme Framework, Tutorials

About Josh Kotsay

Josh Kotsay is an internet marketer and wordpress theme addict. You can view his personal blog over at Joshkotsay.com where he reviews different IM products.

Comments

  1. Lisa Kubo says

    May 27, 2014 at 9:05 pm

    Interesting tutorial Josh. But what if I want a little more control and I don’t want the Adsense ads to show up for every post. Instead I’d like to have them show up for only a subset of them.

    Reply
    • Josh Kotsay says

      May 27, 2014 at 9:12 pm

      Hi Lisa,

      It’s a bit trickier in that situation. However, if you use Dynamik Website Builder or Genesis Extender, you can leverage the Labels feature to do this somewhat. Just create a Label and then add a conditional for that label in your hook box.

      Reply
  2. Enstine Muki says

    May 29, 2014 at 10:07 am

    This is powerful Josh
    Can you do a tutorial on creating a widget? Something like instead of hard-coding, we could just have a widget that will place the code at that spot 😉

    How possible is that?
    Enstine Muki recently posted…How I got paid $660 to drive traffic to my blog!My Profile

    Reply
    • Josh Kotsay says

      June 3, 2014 at 6:51 am

      That’s a good idea Enstine. Will definitely consider that for one of my next tutorials.

      Reply
  3. Kyle Alm says

    September 29, 2014 at 6:50 pm

    You can always use Genesis Simple Hooks plugin for this too. Also give you some more placement options.

    Definitely use the CSS and the div though, otherwise it will look funny.
    Kyle Alm recently posted…Easy Keyword Research With Market SamuraiMy Profile

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badgeShow more posts

Free Email Updates

Sign up and get updated whenever we publish new tutorials on the site

Write For Us

Love to dabble with Wordpress or the Genesis Theme Framework? Write an awesome tutorial for us and earn $100 per article! See this page for more details.

Popular Posts

  • The Cheapskate’s Guide To Free Genesis Child Themes
  • 4 Simple Steps To Boost Your Google Page Speed Score
  • Add Your Own StudioPress Inspired Email Opt-in Box
  • Add Eye Popping Comment Bubbles to your Genesis site
  • How to Create Your Own HelloBar For Genesis
Genesis Theme Framework Banner

Our Sponsors

Categories

  • Articles (7)
  • Chrome (1)
  • Dynamik child themes (1)
  • Elegant Themes (3)
  • Email Marketing (1)
  • Genesis Theme Framework (22)
  • Reviews (8)
  • SEMRush (1)
  • Thrive Themes (4)
  • Tutorials (18)

Recent Posts

  • Build Your Email List Faster With Thrive Leads February 14, 2015
  • Turbocharge Your Opt-Ins With Content Upgrades January 1, 2015
  • The Cheapskate’s Guide To Free Genesis Child Themes September 29, 2014
  • How To Speed Up Your Site With MaxCDN and W3 Total Cache August 25, 2014
  • Awesome New Additions To Thrive Content Builder August 21, 2014

Top Commentluvvers

    Copyright © 2018 · Dynamik Website Builder on Genesis Framework · WordPress · Log in