This AdSense tutorial may seem overly simple to many longtime WordPress users. If you fall into this group, don’t worry, we will be adding more advanced tutorials over time. For everyone else, welcome! This tutorial is for you.
In this example, we are going to look at one technique for adding AdSense to WordPress blogs. Really, there are many ways that this can be accomplished. The simplest way, and the one we will be using today, is to drop the your AdSense code directly into a text widget. It’s fast, easy, and allows you to position your ads between other widgets.
For this tutorial, I will be using the Slate theme which is available to download free here. While the colors we are using are designed to match the Slate theme, this technique will work equally well on any widget-ready theme. Let’s jump right in.
Here is the Slate theme without AdSense installed. Looks smart… but it’s not making you any money. 
Let’s start by formatting an AdSense ad block to match the Slate theme look. If you have not signed up for an AdSense account, it is a simple process. The easiest method is to create a Gmail account or a Google account under another email address. Then create an AdSense account here. Once you have an operational AdSense account you are ready to create the ad block we will be using in this tutorial.
Navigate to your Google account. Click on the AdSense icon under My Products. Select the AdSense Setup tab at the top of the window and click on AdSense for Content. At this point, you will have the option to choose an image-only ad block, text-only, or both. Personally, while I find that the image ads look better, they don’t perform as well as the text ads, but it’s up to you. When you click Continue, you will be taken to the Choose Ad Format and Color page. 
The text fields on the right allow you to change to colors in the ad to fit your theme’s color pallete. In our case, we are matching the colors of the Slate theme.
- set the border to #373737
- title to #459deb
- background to #373737
- text to #cccccc
- URL to #cccccc
Continue to the Save and Get Ad Code page. Highlight and copy the JavaScript code for your ad block.
Now let’s install this ad block onto your blog. Open the admin panel on your WordPress blog and open the Widgets panel under Appearances. Add a text widget from the Available Widgets column. Click on the edit option when it appears in Current Widgets column. In the title field you can add a title like “Sponsors” or “Useful Links.” Paste the AdSense code into the large text area. It should look like this:
Click Done and Save. If you forget to save all of the changes that you have made they will revert back to the original. It can take time for the code to be activated on Google’s end, so if your ad block is blank at first, give it twenty minutes and check again. This is the final result: 
Not bad looking really. I generally find that text ads look much better on a dark background than on a white one. I will be running other tutorials over time and making changes to the demo, so don’t be surprised if there are other modifications as well. The ads on the demo page are active, in case you were curious.
Related Media
Comments
10.16.09
… I also find myself torn between the coffee shop and my dual monitor setup
11.04.09
May I suggest ABR Viewer as an alternative to loading and trying each brush in Photoshop? It’s free, and I use it regularly. You may find this a great time-saving alternative!
http://abrviewer.sourceforge.net/
Hope it helps!
11.04.09
Thanks for the referral, Cyndi! I’ll have to spend some time tonight trying it out.
02.11.10
I love you to pieces man!!
10.14.10
I wished and wished for a Mac, then was given one at work.
So I moved all my files over.
I HATE it. I’m a designer. I have about 50 folders for 50 different projects. I name the banner psd “banner.psd” for all of them. Try and search for them all, yeah the Mac finds them but then you have to do “get info” for each one (or change some such setting and still click on each to see where the dang thing is located. On windows. I glanced at the path to the folder and voila. Yeah changing permissions on Vista is a headache but it’s far better than the constant problems I have on the Mac. Photoshop is twitchy at best, the thing crashes, although my Roku, PS3, Wii, personal laptop all do fine with my wirless, the mac drops it all the time. I use multiple monitors. Oh my god what idiot thought of leaving the application menu on one screen when the application is on another? You can only choose one little sprout because Steve Jobs knows better than you how you should work.
can’t wait to ditch it.
sorry tirade over.
ps tons of free windows applications out there.
11.26.10
Um… how about not naming all of your files the same name? Sounds more like an organizational issue than an operating system issue, either way.
I might recommend using an identifier and THEN _banner.psd? I assume it’d be difficult to find photos as well if every picture on a drive had its own folder and was named “photo.jpg”.
Examples:
Projectname_size_banner.psd
Clientname_size_banner.psd
etc…
04.17.11
Ok, so… I’m a total newbie to photoshop. I have CS5 and a brickton of brushes. I have tried renaming them, but they do NOT show up in the list like I want them to. I’ve played around with it for like a half hour. Can anyone please help?