UPDATE 07/31/2013: Google has finally offered up the beginnings of a solution – quite similar to what we have been using. You can check out my article here!
NOTE: My adsense account has been deactivated. And the fine folks at Google simply don’t bother explaining why they deactivate accounts – they just do it. If I ever find out why I will forward that info on. For now, I would recommend you do not use the guide I have below – in case that is the problem.
Over the past two days, I’ve put up a couple articles relating to widgetizing the twenty twelve header and guidance for adding multiple items up there while accounting for 2012′s responsive nature. I wanted to finish up today by showing my solution for running Google Adsense ads to the header while still maintaining the responsive nature of the theme as best we can, let’s dig in!
You’ll notice I have responsive in the title of this article in quotes. I want to emphasize that we are going to perform a little trickery in our widget. Currently, Google doesn’t feed out responsive ads. I don’t know of any way to make the ads truly responsive. But I have come across a little technique to keep your advertising from looking horrible and busting completely out of your theme. Now if you aren’t looking to make a widget, you can still use this technique for adjustable ads – but throughout this series of articles I have been hinting at my functionality plugin. I’ve shown how to add code to your theme of course, but I also stress the plugin route.
Here’s my thoughts on the plugin. I change themes on VoodooPress each time a new default theme is released with WordPress. On my personal blog, I change themes annually. Certain functionality I like to keep regardless of what theme I have. This header widget area with Google Ads is one of those things. So I register my sidebar in the plugin, and I build my widget. Then – each time I change themes all I need to do is insert a small piece of code to add my widget area and maybe adjust a little CSS and I’m done. It’s all up to you of course! This all works in a theme, or a plugin!
Now, on to the setup. Before we get into the code, you need to take some time over on Google Adsense. You will need to register 3 different ads. You need a full sized ad, a medium sized ad, and a mobile friendly sized ad. You can pick what sizes you want – I personally went with 728×90, 468×60, and 320×50. Remember I told you we couldn’t make things truly responsive? Instead, we load an appropriate sized ad for the screen size. The tradeoff here is that the ads don’t behave responsively – they don’t flex. If you load up your site on a computer monitor, you get the full size ad – if you then adjust the browser window, the rest of the theme responds and looks great – the ad however, won’t do that. It just loads the proper size ad at load time. It seems to work well enough for me for handling computers, tablets, and phones. Now after registering those three ad sizes, here is some code for you:
The code should look a little familiar, It’s just a combination of the code Google gives us for inserting ads, combined together and conditionalized for the window size. Of course you need to replace the XXXX for publisher ID and ad slot with your own numbers from Google. Now, you could just set up your ads, and use this code in a text widget and you’d be all set. I just wanted a widget so I could drag my ad to my new header sidebar and be done with it. A little bit of work for fun, and simplicity down the road. Here’s the rest of the code for that simple widget, just like everything else we’ve done, this works in functions.php or in your functionality plugin:
That is it! This isn’t the way you would go about building a fancy, in-depth widget of course. This widget has absolutely no settings or anything. I don’t even set it up so the title can be changed, there is no need. All I want is a drag and drop ad widget.
That’s it for this little mini-series, nothing mind-blowing here. I really just wanted to help you get started with thinking about how you are gonig to modify the twenty twelve theme, because very soon it’ll be the new default look for WordPress. As always, when you get ready to modify that theme – DO NOT TOUCH IT! Friends don’t let friends modify themes improperly! And you know VoodooPress is your friend! Instead, make a child theme for all your modifications! Everyone will be much happier!