This post is only meant for bloggers, and aimed particularly to those who uses the WP-Vybe theme on their site.
I received an email today asking me how I implemented Adsense for Search on chowtimes.com using the WP-Vybe theme. Instead of responding directly to the one person by email, I thought I write this up and make a post for the benefit of all users of the WP-Vybe theme. The instructions below are meant for implementating Adsense for Search on WP-Vybe theme but conceptually it works the same for any WordPress theme.
By default, WP-Vybe implements the search capability from WordPress. It looks like this:
Before I begin, I suggest you take a few minutes and check out how the Adsense for Search worked on Chowtimes.
The advantage of incorporating Adsense for $earch is pretty obviou$, so I won’t go into that but jump straight into the how-to. I am assuming here that you already have an Adsense account and had implemente Adsense for Content already somewhere on your blog. So I won’t go into what Adsense is on this guide.
Here are the steps:
Step 0: Before We Start …
We need to understand how it all works. There are TWO separate pieces of codes you need to implement:
- You need replace the Search Box with one from Google’s Adsense for Search
- You need to create a new WordPress Page (NOT Post) to house the search results.
That is all there is to it. Simple.
Step 1: Create The PAGE to House The Search results.
First thing first. You need to create an empty PAGE (not Post) to house your Search Results.
I name my page as “Google Search Result” and the resulting URL is as shown below highlighted in yellow. Take note of the URL as you want to use that to tell Google Adsense where to send the search results.
Leave the body of this page empty … for now.
Step 2: Get Your Adsense for Search Codes from Adsense
Login to your Google Adsense account. Navigate to AdSense for Search as shown below.
When you get to the Adsense for Search Page, just follow the notes I had peppered throughout the screen below. If it’s too small to read, click on the image to see it in full.
You’re almost there. You now have all the codes you need to put into your blog. Here are two sets of codes you want to use … one for the Search Box and one for the Search Results Page.
Step 3: Pasting Your Codes To The Search Results Page
This step is a no-brainer really. You just need to paste the Search Results Code from Adsense to the HTML view (not Visual view). Publish the Page.
Step 4: Pasting Your Codes on the Search Box.
The instructions here are very specific to WP-Vybe. In this step you will need to replace the default Search Box on WP-Vybe with Google’s Search Box. The codes are found on the header.php file of the WP-Vybe theme. To get to the file, navigate as follows:
Appearance > Editor > Header (header.php)
Look for the lines highlighted in red below … comment those out. Note, I had also commented out the RSS button as I find that extraneous as you also get the same RSS button on the top of the main body of the theme.
Finally, paste the Adsense codes (marked on green). Save the file … and you’re set.
I might miss a step or two but do let me know and I’ll update this post with additional info if needed. Hope you find this useful.