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.
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.
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.
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.
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!
That’s a good idea Enstine. Will definitely consider that for one of my next tutorials.
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 Samurai