Inserting Google’s search script is quite easy but how do you insert the actual search results into your WordPress custom page? I have created this simple easy to understand guide on how to insert google search results into your WordPress page. It also includes the first step which is to have a Google AdSense account. Please leave comments if you think there’s something wrong with the guide.

Steps:

1.) The first thing you need to do is register for an AdSense Google Account here.

2.) After registering into Google Adsense, login with your account, go to the “AdSense Setup” tab, select “AdSense for Search” as your product. The next page is just a layout setup of how your search will look on site, you may modify these values to fit in anyway you choose. Click “Continue >>” when you are done customizing.

3.) Before we proceed to the next page we need to create a page for our results in our WordPress blog, So go to your administration page and select “Write” then select “Write Page” and create a page like you normally would and preview it in your browser. You will need to remember the URL in the address bar when you preview it. Copy this in your computer’s clipboard or store it in a text file.

4.) Going back to Google: In the next page, customization continues but in the “More Options” area be sure to select “Open results within my own site”, and keep not of the URL wherein the search results will be displayed. In the text box where its says “Enter URL where search results will be displayed” write here the URL that you have just saved in the clipboard or text file. In the “Enter width of results area:” text box key in the width of your page content space. E.g. “545”. After this click “Continue >>”.

5.) In the next page, you will be presented with two codes, The first code “Your search box code:” will be the search box and the search button. So copy this to where ever you want the search box to appear. The second one is the search results code which you need to place in your page. This is one is diffiicult to place in a page because as you can see it has div tags not only script tags and WordPress by default replaces div tags with p tags. I have added three steps below on how to change this:

Example of “Your search results code:”

<!-- Google Search Result Snippet Begins -->
<div id="googleSearchUnitIframe"></div>
<script type="text/javascript">
var googleSearchIframeName = 'googleSearchUnitIframe';
var googleSearchFrameWidth = 545;
var googleSearchFrameborder = 0 ;
var googleSearchDomain = 'www.google.com';
</script>
<script type="text/javascript"
src="http://www.google.com/afsonline/show_afs_search.js">
</script>
<!-- Google Search Result Snippet Ends -->

a.) First thing to do would be to optimize this code so that it won’t be easily replaced by WordPress, It should look a little like this, notice the apostrophe have been replaced with double quotes and I’ve added comment markers on the first block of script tags:

Optimized example of “Your search results code:”

<!-- Google Search Result Snippet Begins -->
<div id="googleSearchUnitIframe"></div>
<script type="text/javascript">
<!--
var googleSearchIframeName = "googleSearchUnitIframe";
var googleSearchFrameWidth = 545;
var googleSearchFrameborder = 0 ;
var googleSearchDomain = "www.google.com";
-->
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
<!-- Google Search Result Snippet Ends -->

b.) The next thing to do would be to temporarily disable the visual editor, To do this go to “Users” then go to the “Authors & Users” tab find and open the user name that you are currently using and uncheck the box that says “Use the visual editor when editing”

c.) The last thing you need to do would be to modify a file called “tiny-mce.config.php”, this is not too complicated if you know how to access and download the file via FTP, the file is located at “../wp-includes/js/tinymce/tiny_mce_config.php”. After downloading this file into your computer, open it up with “notepad.exe” and edit this line:

$valid_elements = ‘p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]’;

Modify that line to look exactly like this:

$valid_elements = ‘-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]’;

Note: If in some way you find it difficult to modify this file, you can use the “Disable WPAutoP Plugin” located here. Just install the plugin and enable it.

6.) Now that we have disabled the WordPress’ auto replacement of div tags, We can now add the optimized script tag into our page, Open up the page you have recently added in step 3 and copy the optimized code into the editor. Then click “Publish”, and we are done!:

Additional Tips:

1.) To hide the search results page from displaying a tab in your main page, categorize it under another page such as the “About” page show below:

Please leave comments below if you encounter any problems at all in using this guide. It took a lot of time just to narrow it down to the basics.