This tutorial is continued from Part 1.
Create a Search Results Page Template
A new WordPress page template is created to display the Google Custom Search Results. The standard page.php template is formatted with a center column to display the page content that’s designed for a sidebar; and therefore too narrow for the 600 pixel wide Google search results. Therefore, a new search results page template is created to display the full screen width.
Before you begin, make a full backup of your WordPress site … just in case.
Step 1: Copy the page.php template file to make a new search.php file
- This creates a search results page template.
- Use File Manager in cPanel to copy and rename the file.
- Place the search.php file in the /public_html/wp-content/themes/freshnews directory with the other page templates (e.g. header.php, footer.php, etc).
Step 2: Edit search.php file
Log in as the Site Admin to your WordPress blog.
Use the Theme Editor in the WordPress Admin Panel to edit the search.php Template File as shown in the following image.
- Add a Template Name Comment at the top, call it ‘Search Results’
- Comment out the centercol div element
- Delete the call to get_sidebar()
- When done, click Update File in the Theme Editor to save the changes.
Edits to search.php page template
The edits are generic and you should be able to reuse my search.php page template without modifications. You can get my file here: search.php
Create a Search Page to Display the Google Custom Search Results
- Create a new page named Search via the Page → Add New command on the left menu in the Admin panel.
- Edit the post slug if needed to ensure Permalink is http://your_domain_name/search/
- Click the HTML tab in the post editor.
- Paste the Google Search result code.
- Save and publish the page. This will create the Page ID.
- Edit the page again.
- Write down the Page ID as given in the URL of the web browser because it will be needed later. The Page ID is the number after the “post=” argument. In my case, the Search Page ID is 7 in the URL:
http://www.handymanhowto.com/wp-admin/page.php?action=edit&post=7 - Assign the Search Results page template in the drop down menu as shown (lower left in the image below).
- Save and publish the page.
Click on the image below for a full size view.
Search Page for Google Custom Search
Next, the Google Custom Search box will be added to the page header.
Changes to header.php
Now we’ll add the Google Custom Search Control to the page header and make a cosmetic change suppress the Search page from showing in the main menu.
Cosmetic Change
The Search page is shown by default in the menu bar at the very top of the web page. If a visitor to your site clicks on the Search menu item, an empty Search page will be displayed, which is confusing.
To remove the Search page from the header menu:
- Edit the header.php file in the freshnews theme directory (e.g. /public_html/wp-content/themes/freshnews/header.php). You can make the changes to header.php using the WordPress Theme Editor.
- Add the code &exclude=<your Search Page ID> to the wp_list_pages() function as shown in the image below.
→ Recall the Search Page ID was written down when the Search page was created (see above). The Page ID for my Search page is 7.
header.php - Exclude the Search page from Main Menu
continue to the next step…
Add the Google Custom Search Box to the Page Header
While still editing header.php, replace the default search box code as highlighted:
header.php - Default Search Code
with the Google Search box code as shown below. Also add the <br> HTML code as indicated to move the Search box submit button below the text input control.
header.php - Google Custom Search code
The modified Fresh News v2.0.7 header.php file for my site is here: header.php
Remember:
Your Search page URL, Page ID and Adsense Publisher ID values will be different from mine and should be changed in your version of header.php. Or you can use mine if you like giving me your Adsense revenue. (smile)
Save and test your new Google Custom Search Engine.
Remember, to re-edit the header.php and possibly the search.php templates if you install a Fresh News theme update.
Customize the Google Search Box Look & Feel
If you want to customize the Google Search Box look and feel to better match your site, see this article that explains how to add CSS style rules to the custom.css file.
Hope this helps,
Bob Jackson
[ad#468x15 Link Unit Post End]
Copyright © 2013 HandymanHowTo.com Reproduction strictly prohibited.
[...] This tutorial is continued in Part 2. [...]
Oops…forgot to say great post! Looking forward to your next one.
Thank you so much for this. I have been looking for a fix for this for a bit of a while and making the change was so easy thanks to you. By the way, this plugin: http://wordpress.org/extend/plugins/exclude-pages/ will make the job of excluding pages from navigation a lot easier.