Custom Branded Google Search With WordPress
I’ve been playing around with some really cool features in WordPress lately. With my site, and a few others i’ve been working on, I’ve been toying with the “Page Template” feature that allows me to customize which elements show up on a page (like, a sidebar, specific headers, a footer, etc). But, while working specifically on The Film Talk for Jett Loe, I developed/discovered a technique for keeping visitors in your page but giving them the luxury of a Google Search.
What You’ll Need:
- Access to your theme’s “page.php” template.
- Access to a Google Adsense account (specifically for search)
- A blog/site that is at least 800px wide (side-to-side, ignoring sidebars)
Let’s Go!
Login to Google Adsense
Select “Adsense Setup” from the tab menu
Then select “Adsense for Search”. This will let you create a customized search engine with the power of Google behind it.
If you’ve never dealt with Google Search, you’ll see an introduction video to the right side. Watch it if you want, then click Get Started.
Next, you’ll see the first screen of the Wizard. Some options are a little more important than others, and I’ll let you know which ones those are.
For the first option (Search Type) select whether you want your users to be able to search the entire web or only the sites in your network. If you want to limit the search, enter the URLs into the box below.
You can add keywords to help the search if you want, but it’ll only add to the terms. A good example of this is if you want to provide a web search with your url in it, providing a link to everything on the web referencing you and the search term.
The options below that are pretty self explanatory. If you don’t know what they mean, don’t change them – but if you do, then feel free to set them however you wish.
Next, select your style of Search Box. It’s up to you, really, but I like the top one for white background sites – the javascript overlay really gives it a nice effect. The size is up to you, but a good size is 15-20.
Now, the next page is where we start multitasking. Open a new window and log into your WordPress admin. Create a new page and title it “Search”. Save it and remember the permalink you need to be able to access it. For now, leave the content blank.
Did you write down the permalink? View the page and get it if you haven’t, then head back and insert it into the box next to “Open Results within my own site” (and select the radio button for that option). If you know the width of your blog, you can enter it there – otherwise, keep it at 800 – we can change it later if we need to.
Set the location you want your ads to show (at least top and right is best for monitization of your site) and choose your colors. I’d match them to your site to give cohesiveness, but if you want to default them to Google’s pallet, that’s fine too.
Save your search, give it a name, accept the terms of service, and get the code.
You’ll see that there are two codes you need: the first code is for the search box itself. The second is where Google will look for the search results.
OK… here’s where WordPress can really showcase those search results. Using your favorite FTP client, head over to your website and duplicate “page.php” to “searchpage.php”. Head into the theme editor, navigate to “searchpage.php” and remove “<?php get_sidebar() ?>”.
(This assumes you have a theme in which the sidebars are in “sidebar.php” and that you want to remove the sidebars. If you are skilled with editing WordPress, then you can make whatever edits you need to get the code to display correctly. If you are not skilled at editing the code, then remove only the sidebar and make sure to backup what you do.)
Finally, at the beginning of “searchpage.php” add this code:
<?php
/*
Template Name: Google Search
*/
?>
Save your changes, head into the Manage tab and open that page you just created (Search). We’re going to make three main changes here:
1) Add the BOTTOM code into the page content. That’s going to tell Google to insert the search results where you place that code.
2) Uncheck the ability to comment and ping – you won’t need it for search results.
3) Down in Page Template, select “Google Search” as your template. That’s going to tell WordPress to use “searchpage.php” instead of “page.php” (which doesn’t contain your edits) to display when you navigate to this page.
Over the search results, put a copy of your search box code [The TOP Code in the AdSense Page] (if you aren’t going to put the box into your sidebars, you don’t have to do this – but if you can’t see the sidebars, and that’s where your search box is, you can’t see the search box, right?) Save your changes.
Now, put your search box into your theme where you want it (more than likely into the sidebar). The easiest way to do this is in a “text” widget. Navigate to Presentation > Widgets and add in your widget. Open the widget and drop in your search code.
Save the widgets and view your theme. Does the search box look ok? Great! If not, you may need to do some tweaking to get it to look correctly.
Specifically, in the search box code, look for the <input type=”text” name=”q” size=”16″ /> portion. You can make the text-box longer or shorter by changing “16” to whatever number you want.
Ready to test it out? Do a search and voila!
See that search box? That’s the code from the Google Search at work. And when I do a search…
There is the header, navigation, and Google’s Search results! If you scroll down you’d see the Footer displaying as well. And it all fits well within the WordPress theme.
It’s not for the faint of heart – anyone with a decent knowledge of WordPress can use this to power up their search results and make a little money from the revenue. If you are a novice at WordPress, don’t be afraid to ask for help. But regardless of your WordPres skill, this is a great way to really showcase your WordPress theme while utilizing the most powerful results engine in the World.
Good luck, and post your success stories in the comments!