In our first post I showed you the DIY type the Google side of how to set up your own custom search box as well as make some money by adding AdSense. In this half of the tutorial you will learn how to set up a private page on your blog to host your blogs search results.
The reason you want to host your own results would be for both continuity of look and feel as well as this step keeps your reader more connected to your blog.
Step One:
To create your private page in wordpress - from your dash board click on “write” and then “page.” Type in the title for the page such as “Site Name Search Engine” or “Search Engine Your Site Name.”
Save and publish the page but do not make it private yet because the easiest way for a newbie to get the url for the page - this is also called the permalink is to click on “view this page” and to copy the url from your browser. See the next image below.
Creating a Private Page in Wordpress
You will see the address / url / permalink for this page in the browser. Put your curser in the middle of the address and click “control A” this will highlight the entire url. Then right click for the “copy” function.
The second option is to make it private, go to your dashboard click on “manage” and then “pages” and find your page by it’s title. Under the “status” column it will say “published.” Right click with your mouse and choose “copy link location.”
Step Two:
Go back to the Google Custom Search Control Panel and click on the “code” label. Then click on “Host results on your website” and the “iframe” option. In the box that states “specify search result details” paste the permalink from above. Also choose “top and bottom” for the “advertising” preference.
Scroll down on this page. You will see two boxes with codes. Move your cursor into the bottom box that states “search results code” and click “control” and “a” keys which will highlight all of the code. Right click on your mouse and choose “copy.” Leave this page open as you will be coming back to it in the next step.
Now go back to your blog dashboard. Click on “manage” and “pages” and then select the page you created above for your Search Engine Results. Open the page.
Before you paste your custom search engine code into the page be sure to switch the view to the “html” tab.
Paste your custom search engine code into the page.
There is one small tweak you must do so that your results fit in the width of your page. Look for the line that says: var googleSearchFrameWidth = 600 (this is the default). Change it to fit the width of your blog page - I changed mine to 500 which you will see in the image below.
Click the option to “keep this page private.” What this means is that the title of this page will not show up on the template of your blog. You only want this page to show once someone has completed a search. Save and republish your page.
Step Three:
In this step we will be adding the code and / or widget to one of the side columns of your site.
Go back to the Google custom search control panel page which you left open above. This time we want to copy the code from the “search box code.” Put your cursor in the box and click “control” “a” to select text. Right click on your mouse and select “copy.”
From your blog’s dash board select “design” and then “widgets.”
Select the “google custom search” widget and click on “add.” Since I already selected it the “add” is not showing. Widgets add functionality to your blog and generally show up in the left or right column.
The widget that you are using on your blog will appear on the left side of your screen and will have an edit feature so you can customize them. Now click on “edit” to the Google custom search widget.
Now I want you to create a title for your widget - you could use any thing from “search here” to creating a question like I did “”Looking for something on Your Shortest Path?” Then put your cursor into the box labeled “Google Custom Search Code” and right click your mouse and then “paste.” To keep these changes click “change.” Now it’s time to see how it looks on your blog.
You should see some thing that looks similar to my example below. Now try out your search box.
Final Result for your Custom Search Box
Ta Da…the results will show up on the private page you just set up. Remember that I added Adsense and choose the option to have adds on the top and bottom. Your page may look different if you choose a different option.
That’s it.
{ 1 comment… read it below or add one }
Hi Michelle, excellent tutorial.
I have set up the search results page, I can add the custom searchbox to the whole site as a widget but what I cannot do is to make the older searchbox disappear as I cannot find it in the wp theme´s files.
Do you know how can I find the included searchbox code in order to erase it ?
Regards,