How to: Replace search bar with google search bar
I am trying to replace the default search bar with a googlel search bar. I was give this code:
<div id="cse" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {language : 'en'}); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl('009450143332839 663346:gxn25vyt8tnd'); customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET); customSearchControl.draw('cse'); }, true); </script> but I don't know where to put it. I tried adding it to the CSS/HTML inserts in ATO, but nothing changed. Can anyone help me? |
Where do you want it to show? If you want it in the sidebar put the code in a text widget. In which one of the fields in CSS/HTML inserts did you try to put this code?
|
I just asked this at 'search box on the menu bar' forum: what do I need to do, where, and how to put a search box either at the right end of the menu or, keeping the menu centered, put the search box in the upper right corner?
|
Took me a few hour of reading and playing around (I dont know PHP) but I finally replaced the default searchbox in the header with a google searchbox
This is what i did: 1. access your theme folder using an FTP client, open the functions folder there. 2.find the file bfa_header_config.php and transfer a copy of it to my computer then renamed the original on the site server to oldbfa_header_config.php 3. opened the copy on my computer with a text editor and scroll to line 284 (// search box) This is what displays the search box when its turned on in the theme option screen. PHP Code:
deleted this: PHP Code:
PHP Code:
PHP Code:
PHP Code:
and the ' at the start of this line PHP Code:
code should now look like this: PHP Code:
PHP Code:
at this point you can insert your code for the google searchbox on the line after PHP Code:
PHP Code:
for mine, I changed the action="" in the form tag to match the 'action=' string in my google code; "http://www.google.ca/cse" id="cse-search-box" target="_blank" and move this HTML Code:
<script type="text/javascript" src="http://www.google.ca/cse/brand?form=cse-search-box&lang=en"></script> 4. save then upload file to themefolder/functions/ 5.the result is here 6. will also have to adjust the style settings in the theme option header section scroll down to search box and adjust the width, bottom margin, and right margin position where you want it. hopes this help anyone who is trying to do the same PS:make notes of all changes and keep a copy of the modified file so you can make the needed changes again if and when the theme is updated it would have been nice if this was kept in the searchform.php so you could simply replace/mod that file. |
Or you could do something like the following so you won't have to deal with it after an upgrade to the theme.
I put the Google search code in ATO>Style & edit Header Area at the top of the Configure Header Area box. Mine looks like this. HTML Code:
<div id="cse" style="width: 100%;">Loading</div> HTML Code:
#cse .gsc-control-cse .gsc-search-box {width:250px;position:relative;top:21px;left:360px;z-index:99;} |
anything that works, as i said I know little or no php and is just fumbling my way through.
The thing I like about my approach, while messy compared to your's is that I dont have to worry about the Css because its using the same default styling class and div, and you can still turn it on and off via the theme option settings. But I'll have the greater headache when the theme gets updated. Do you think the theme creator would consider moving this subroutine back to the standalone file searchform.php so it would be easier to create custom search boxes without poking around in the main code. |
I am not sure. You can always try sending a PM.
|
btw
Would you mind a quick "walk through" your solution it seem it might be useful for other application as well. wouldn't you need to wrap the entire script in the <div></div> tag? and cant see where the class tag references are; thanks in advance |
I was originally thinking I would have to wrap the script in a div and give it a class but I decided to see what happened if I didn't. You can see the ID in the code but when I looked at it with Firebug I saw the .gsc-control-cse .gsc-search-box classes as well and decided to try and use them for positioning and it worked.
|
My version is a bit simpler, perhaps...
I wrapped the code for the Google search box (form) in a div and added this to the header: HTML Code:
<div id="cse"> HTML Code:
#cse {position:relative;top:-50px;right:15px;z-index:99;} |
Hi All
I'm struggling with adding google custom search... Running Atahualpa 3.6.7 on WP 3.1.2 I tried the google custom search plugin, but the pop-up doesn't work and returning results inside my only widget area (left side) is far too narrow. I see it has an option to send results to another place, but the directions for this seem limited. I think WP 3.1.2 broker the pop-up option in this plugin because others have complained of the same. Ideally, I'd like to use the theme's default search box in the header, but have it return google custom search results (either in a pop-up or inside a WP page) I tried lmilesw directions earlier in this thread, but I don't think they apply to ATO 3.6.7 because in ATO -> Style & Edit Header Area -> Configure Header Area, there is no place to enter code. Does anyone have directions that might help with WP 3.1.2 and ATO 3.6.7 ? Thanks for taking the time to help |
In post #5 I put the code in the Configure Header Area box and it should work fine in 3.6.7. Make sure you have all bug fixes installed as well.
|
Thanks for the guidance on this... I didn't realize you could paste all that code into the Configure Header box..
This did add a search box to the top in the header.. And it functions. However, the search results are returned inside the header itself (looks pretty funky). Is this the results I should expect? |
I ended up pasting the form code into a text widget.
And I setup a page for search results, following this article: http://digwp.com/2010/10/google-cust...-in-wordpress/ This will work for me.. I like the look and placement of the ATO searchbox better though... so if I can figure out a way to have that search box work and output to my search results page- that would be the best of all worlds.. but then I'm happy with search being a widget too.... Thanks for help! |
For anyone else looking...
This solution works until you modify your header with the theme settings... But it does work an produces good results. 1. Create a page (/search-results) 2. In google custom search, setup custom search. In look & feel, set type to iFrame. Then hit Save and Get Code. Enter your search results URL, the page you created in step 1 (domain.com/search-results). I followed this guide: http://digwp.com/2010/10/google-cust...-in-wordpress/ 3. In bfa_header_config.php, replace the searchbox code with the google search box code (first box). My bfa_header_config.php search box section looks like this now: Note, I removed the line from google code which creates a button (so it looks like the default ATO search) // Search box if ( $bfa_ata['show_search_box'] == "Yes" ) { echo '<td valign="bottom" class="search-box" align="right"> <div class="searchbox"> <form action="http://domain.com/search-results" id="cse-search-box"> <div> <input type="hidden" name="cx" value="003549174757344825068:9-p0hc4e7o4" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="31" /> </div> </form> </div> </td>'; } 4. Add the Search Results code from google to your search-results page (paste into html view). The end result should be a working google search box in place of the default. Take good notes. It will be replaced when you edit some theme settings. If it's possible to put this code somewhere where it isn't replaced by changing settings, I'd love to know. (I'm still new at this) |
All times are GMT -6. The time now is 05:26 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.