Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   How to: Replace search bar with google search bar (http://forum.bytesforall.com/showthread.php?t=10299)

frugalmommytoday Oct 14, 2010 06:51 AM

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?

lmilesw Oct 14, 2010 07:58 AM

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?

aravere Oct 14, 2010 09:40 AM

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?

gaidin Nov 6, 2010 01:14 AM

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.

lmilesw Nov 6, 2010 06:17 AM

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.

gaidin Nov 6, 2010 10:11 AM

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.

lmilesw Nov 6, 2010 02:24 PM

I am not sure. You can always try sending a PM.

gaidin Nov 6, 2010 03:01 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

lmilesw Nov 6, 2010 11:17 PM

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.

jankph Mar 17, 2011 05:31 AM

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

uptimejeff May 19, 2011 09:55 AM

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

lmilesw May 19, 2011 10:02 AM

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.

uptimejeff May 19, 2011 10:13 AM

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?

uptimejeff May 19, 2011 10:47 AM

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!

uptimejeff May 19, 2011 11:23 AM

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 12:48 AM.

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