Twenty Ten and AdSense

We have been having a play while waiting for WordPress 3.1 to be a full release, one of the things we have been looking at is Google AdSense and how to use this in a theme.

There were a number of questions that a Google search answered, we found a nice heat map from Google and also looked at which size adverts get the most clicks and where to place them.

Three twenty ten child themes have been created and we want to share these, they are only tested on a local environment and have taken into account the new twenty ten theme that will be released in WordPress Version 3.1.

Where is the best place for our AdSense

Have a look at this heat map from Google and the best place is above our content, then the left side is a better place for our advertisements, this is because we tend to read from left to right, don’t worry one of our child themes is from right to left.

heatmap

In our research the statistics show that the best size advert that gets the most clicks, and it is the clicks on the Google adverts that generate the revenue, so we will use two ad blocks, in our content area we will add a 468 * 60 banner, and the sidebar we will add a large rectangle above a pair of sidebars, we will also use Widgetized areas for these, so they can be used for other content. 

Left Single Sidebar with Top Content

Our first child theme we have moved the sidebar to the left and added a Content Top widgetized area, the sidebar works just like the right sidebar, and you populate the content top widgetized area from Appearance > Widgets, all we done was added a text widget and pasted in our 486 * 60 banner code from AdSense, you can use this area for anything else.

The widget if populated will appear on the home page and any other pages, there are two files index.php and page.php which you can remove if you do not want the content banner, download this template from here Left Sidebar Top Content Twenty ten Child (1114)

left-sidebar

Left Triple Sidebars with Top Content

Our second child theme we have moved the sidebars to the left and added a Wide Sidebar and Content Top widgetized area, the sidebars works with the Wide Sidebar over the First and Second Widgetised Area.

We populated the Content Top widgetized area from Appearance > Widgets, all we done was added a text widget and pasted in our 486 * 60 banner code from AdSense, you can use this area for anything else, the widget if populated will appear on the home page and any other pages, there are two files index.php and page.php which you can remove if you do not want the content banner, download this template from here Three Left Sidebars and Top Content Twenty Ten Child (951)

We also populated the Wide Sidebar widgetized area from Appearance > Widgets, all we done was added a text widget and pasted in our 336 * 280 banner code from AdSense, you can use this area for anything else.

three-left-sidebar

Right Triple Sidebars with Top Content

Our third child theme we have moved the sidebars to the right and added a Wide Sidebar and Content Top widgetized area, the sidebars works with the Wide Sidebar over the First and Second Widgetised Area.

We populated the Content Top widgetized area from Appearance > Widgets, all we done was added a text widget and pasted in our 486 * 60 banner code from AdSense, you can use this area for anything else, the widget if populated will appear on the home page and any other pages, there are two files index.php and page.php which you can remove if you do not want the content banner, download this template from here Three Right Sidebars and Top Content Twenty Ten Child (1008)

We also populated the Wide Sidebar widgetized area from Appearance > Widgets, all we done was added a text widget and pasted in our 336 * 280 banner code from AdSense, you can use this area for anything else.

That is it for this post, download the files, open them up and have a look, there are very few changes made to give our theme a different layout and a chance to earn some AdSense revenue, if you are using other AdSense code or plugins remember a maximum of three blocks per page is all that is allowed.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

16 thoughts on “Twenty Ten and AdSense

  1. Great information on best spots to place ads. I’m new to blogging (and blog design, css, themes, widgets, and all that good stuff), but your Google Adsense heat map couldn’t be any easier to understand. Also it’s nice to see what my options are as far as customizing the Twenty Ten theme. I need to do quite a bit of customizing.

    Check out my blog if you get a sec. I’d be very interested to hear your thoughts and feedback.

    Thanks,
    Dustin Brohm

    FirmFinancialFooting.com

    • Just thought I would drop a comment for Dustin Brohm. I checked out your blog and it’s great. Easy to read and alot of very useful information. Sounds like your on the right track. I wish you all the best.

    • Hi, Pfsnipoo, I’ve simply added this to style.css to control my fonts…see if playing around with these can help you..it certainly helped me.

      Regards

      #site-description {
      margin:0;
      }

      body {
      font:normal 12px Verdana, Arial, Sans;
      }

      #content .entry-content {
      font:normal 13px Verdana, Arial, Sans;
      }

      #content .entry-title {
      color:#000;
      font-size:15px;
      }

      #site-title {
      font-size:24px;
      }

  2. Thank you for sharing….Do you know how to add adsense code to the tagged and category pages using the Twent Ten theme?

    If so can you please post as this would be most helpful since you are familar with Twent Ten theme

    Thankx!

  3. Good info there, i run a local blog for my beautiful town and have decided to start using adsense. I like the Content Top widgetized area but would also like to shorten the length of the header and place a widget for adsense beside it. Any ideas how to do this?

    http://www.mijasguide.com

  4. Hi, Excellent work, I’m already using your Left Single Sidebar with Top Content on my site here: http://goo.gl/5o8Sv and I am satisfied with it.

    I have a few queries, I’d be really grateful if you can help with that.
    1.I’m trying to deploy the Leaderboard (728 x 90)  adsense unit. But it really messes up the whole page, the left side bar and centre content/post page gets all mingled and mixed up. Can you suggest modifications to fix that issue?
    2. Is the theme applicable in all browsers? Chrome seems to display things alright, but IE is really messing things, even with smaller ad units..any suggestions?

    • Hi, I fixed the above issues, but IE is not displaying the top add properly even if I revert to default settings (clean download from here) settings, the bloc size appears to be small for top widget area, which leads my adsense bloc to cut off the links at the bot and also display smaller font size even tho its bigger.

      Pls help :)

      Also how can I display top widget on post pages?

    • The answer to this 99.00% of the time is html, firstly upload the template to a test website and run the page through the validator.
      http://validator.w3.org/

      This will show any html errors, look for missing start or closing tags and fix these first, and most of the other errors will dissapear.

      If you find that the rich media ads appear top left and not in the sidebar in IE9, it is not the theme but IE9, I get this and on all websites not just mine, I press F12 abd change to mode from compatibility view.

      HTH

      David 

      • Hi David-

        Thanks for this, template and info, very helpful!

        I ran into same issue trying to place a 720×90 banner ad widget in the top content area. Here’s a test link that shows the new left sidebar creeping over into the content area:

        http://timberlandia.com/?adv_test=1

        I ran the link through the suggested validator site, which showed 47 HTML errors. I tried to find where to make the suggested edits under Appearance Editor, but all of the code in your theme appears truncated so I couldn’t find the specific lines to amend.

        The theme template looks fine without the ad widget in place, visible on the live site http://www.timberlandia.com

        I ran that url through the validator and it showed one less error. Seems line 56 column 73 is the only error on the ad test link (Element img not allowed as child of element ul in this context. Suppressing further errors from this subtree.), but I can’t see how to amend that either (or if it’s part of your code or the ad widget’s).

        Any suggestions on how to fix would be greatly appreciated!

  5. Thanks for this tutorial, I’ve referenced it many times.

    Any chance in another tutorial updated for Twenty Eleven theme? I tried adding the top widget area which worked perfectly for Twenty ten, but in Twenty Eleven, when a page becomes too narrow, the widget areas stack on top of each other.

    Adding the widget area as explained here they will not stack like the others.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Themes

tabbed

We were searching for code to create a tabbed admin page for our WordPress to facebook Plugin, and we found a very nice website with the code we needed, the website is recommended as one to visit. It took a … Continue reading

Read More

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More

Posted in Twenty Ten

asc3.png

It is strange that there is no option to reverse the display order of the posts on the category page, when we select a category the list is the same as a blog, in descending order newest to oldest. That … Continue reading

Read More