Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

How to: Replace search bar with google search bar


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Oct 14, 2010, 06:51 AM
frugalmommytoday
 
71 posts · Oct 2010
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?
  #2  
Old Oct 14, 2010, 07:58 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Oct 14, 2010, 09:40 AM
aravere's Avatar
aravere
 
56 posts · Sep 2010
rural Virginia, US
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?
__________________
I am using WP 3.5.1 and ATA 3.4.6
  #4  
Old Nov 6, 2010, 01:14 AM
gaidin
 
21 posts · May 2010
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:
if ( $bfa_ata['show_search_box'] == "Yes" ) { 
            echo 
'<td valign="bottom" class="search-box" align="right"><div class="searchbox">
                <form method="get" class="searchform" action="'
bloginfo'url' ); echo '/">
                <div class="searchbox-form">' 

                    
// Check for WP 2.2 which doesn't know get_search_query
                    
(function_exists('get_search_query') ? '
                    <input type="text" class="text inputblur" onfocus="this.value=\''
.
                    (
get_search_query() ? get_search_query() : '' ).'\'" 
                    value="' 
. (get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ) . 
                    
'" onblur="this.value=\''.(get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ).
                    
'\'" name="s" />' :
                    
'<input type="text" class="text inputblur" name="s" />') .
                
'</div>
                </form>
            </div>
            </td>'
;
        } 

    echo 
'</tr></table>'

deleted this:
PHP Code:
'; bloginfo( 'url' ); echo '
in line 287;

PHP Code:
<form method="get" class="searchform" action="'; bloginfo( 'url' ); echo '/"
deleted all of this:
PHP Code:
// Check for WP 2.2 which doesn't know get_search_query
                    
(function_exists('get_search_query') ? '
                    <input type="text" class="text inputblur" onfocus="this.value=\''
.
                    (
get_search_query() ? get_search_query() : '' ).'\'" 
                    value="' 
. (get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ) . 
                    
'" onblur="this.value=\''.(get_search_query() ? get_search_query() : $bfa_ata['searchbox_text'] ).
                    
'\'" name="s" />' :
                    
'<input type="text" class="text inputblur" name="s" />') . 
deleted the " '." at the end of this line
PHP Code:
<div class="searchbox-form">' . 
(line 288)

and the ' at the start of this line
PHP Code:
'</div> 
(line 297)

code should now look like this:

PHP Code:
if ( $bfa_ata['show_search_box'] == "Yes" ) { 
            echo 
'<td valign="bottom" class="search-box" align="right"><div class="searchbox">
                <form method="get" class="searchform" action="">
                <div class="searchbox-form">
                    
                </div>
                </form>
            </div>
            </td>'

removed
PHP Code:
method="get" 
from <form method="get" class="searchform" action="">


at this point you can insert your code for the google searchbox on the line after
PHP Code:
<div class="searchbox-form"
and before
PHP Code:
</div
you might have to play around with it a bit to get it to work as I don't have the code for all the google search box.

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&amp;lang=en"></script>
to below the closing form tag </form>

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.
  #5  
Old Nov 6, 2010, 06:17 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});
  google.setOnLoadCallback(function() {
    var customSearchControl = new google.search.CustomSearchControl('002026836158716381777:n-bljc1k7zk');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
%pages %logo %bar1 %image %bar2
Then I added the following to ATO>Add HTML/CSS Inserts>CSS Inserts which you would tweak to get the positioning right.
HTML Code:
#cse .gsc-control-cse .gsc-search-box {width:250px;position:relative;top:21px;left:360px;z-index:99;}
I also played with the Google Custom Search which has a nice popup window option for the results.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; Nov 6, 2010 at 06:47 AM.
  #6  
Old Nov 6, 2010, 10:11 AM
gaidin
 
21 posts · May 2010
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.

Last edited by gaidin; Nov 6, 2010 at 10:17 AM.
  #7  
Old Nov 6, 2010, 02:24 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
I am not sure. You can always try sending a PM.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Nov 6, 2010, 03:01 PM
gaidin
 
21 posts · May 2010
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
  #9  
Old Nov 6, 2010, 11:17 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Mar 17, 2011, 05:31 AM
jankph
 
92 posts · Jul 2009
ATA 3.6.4 and WP 3.1
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">
<form style="text-align:right" action="http://www.google.com/cse" id="cse-search-box">
<div><input type="hidden" name="cx" value="partner-pub-xxxxxxxxxx:yyyyyyyy" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="33" />
<input type="submit" name="sa" value="Search" /></div></form>
<script type="text/javascript" 
src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script></div>
Then, in CSS/HTML Inserts I positioned it according to my particular reader elements, %logo%, %pages% and %cats%

HTML Code:
#cse {position:relative;top:-50px;right:15px;z-index:99;}
It works well: husdal.com
  #11  
Old May 19, 2011, 09:55 AM
uptimejeff
 
9 posts · May 2011
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
  #12  
Old May 19, 2011, 10:02 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old May 19, 2011, 10:13 AM
uptimejeff
 
9 posts · May 2011
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?
  #14  
Old May 19, 2011, 10:47 AM
uptimejeff
 
9 posts · May 2011
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!
  #15  
Old May 19, 2011, 11:23 AM
uptimejeff
 
9 posts · May 2011
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)

Last edited by uptimejeff; May 19, 2011 at 11:25 AM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to: Delete Comments Tab; Move Search Bar; Move RSS icon to Menu Page bar frugalmommytoday Header configuration & styling 1 Oct 14, 2010 07:50 AM
Is there a way to add a search bar? jaemart Sidebars & Widgets 1 Jul 1, 2010 06:09 AM
How do you add the search bar into the top menu bar? brownkidd Page & Category Menu Bars 3 Mar 1, 2010 06:40 AM
[SOLVED] google search bar in header area phryedrice Header configuration & styling 1 Nov 5, 2009 11:10 PM
Add Google Search to Search box? ldaily Header configuration & styling 0 Jul 21, 2009 09:12 AM


All times are GMT -6. The time now is 12:56 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.