Welcome, guest!

Feel free to read the blog, browse for themes, or join the club.

how to add google custom search to child theme?

  1. Hello, this is a question about installing the custom google search form on my child theme. I know there is a plugin for this, but I'd really rather learn a full-fledged install. The sandbox website is http://www.tod7.com

    I've inserted the search form in the primary widget, but I can't get the results to post regardless of the current page. Right now, it only works in the 'google search' page (created at the direction of this tutorial. Any idea on how to post results on all pages?

    These are the steps I took:

    1) created the empty files: googlesearch.php & searchform.php in my child theme.

    2) copied the 'google search form script' & pasted it into searchform.php.
    I named this template -------> /* Template Name: google search */

    3) created a page called 'google search'. (I'll figure out how to hide this page from the menu later.) From the page attributes, I selected the 'google search' template I created and published the page.

    4) copied the 'google search results code' & pasted it into googlesearch.php.

    --- searchform.php looks like this:

    <?php
    /**
     * Search Form Template
     *
     * The search form template displays the search form.
     *
     * @package Hybrid
     * @subpackage Template
     */
    
    	global $search_num;
    	++$search_num;
    ?>
    
    <!-- begin google search form script -->
    
    <div id="cse-search-form" 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('004434025131216544725:bdr6-epupe8');
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.setSearchFormRoot('cse-search-form');
        customSearchControl.draw('cse', options);
      }, true);
    </script>
    <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
    <style type="text/css">
      .gsc-control-cse {
        font-family: Arial, sans-serif;
        border-color: #336699;
        background-color: #FFFFFF;
      }
      input.gsc-input {
        border-color: #BCCDF0;
      }
      input.gsc-search-button {
        border-color: #666666;
        background-color: #CECECE;
      }
      .gsc-tabHeader.gsc-tabhInactive {
        border-color: #E9E9E9;
        background-color: #E9E9E9;
      }
      .gsc-tabHeader.gsc-tabhActive {
        border-top-color: #FF9900;
        border-left-color: #E9E9E9;
        border-right-color: #E9E9E9;
        background-color: #FFFFFF;
      }
      .gsc-tabsArea {
        border-color: #E9E9E9;
      }
      .gsc-webResult.gsc-result {
        border-color: #FFFFFF;
        background-color: #FFFFFF;
      }
      .gsc-webResult.gsc-result:hover {
        border-color: #FFFFFF;
        background-color: #FFFFFF;
      }
      .gs-webResult.gs-result a.gs-title:link,
      .gs-webResult.gs-result a.gs-title:link b {
        color: #0000CC;
      }
      .gs-webResult.gs-result a.gs-title:visited,
      .gs-webResult.gs-result a.gs-title:visited b {
        color: #0000CC;
      }
      .gs-webResult.gs-result a.gs-title:hover,
      .gs-webResult.gs-result a.gs-title:hover b {
        color: #0000CC;
      }
      .gs-webResult.gs-result a.gs-title:active,
      .gs-webResult.gs-result a.gs-title:active b {
        color: #0000CC;
      }
      .gsc-cursor-page {
        color: #0000CC;
      }
      a.gsc-trailing-more-results:link {
        color: #0000CC;
      }
      .gs-webResult.gs-result .gs-snippet {
        color: #000000;
      }
      .gs-webResult.gs-result .gs-visibleUrl {
        color: #008000;
      }
      .gs-webResult.gs-result .gs-visibleUrl-short {
        color: #008000;
      }
      .gsc-cursor-box {
        border-color: #FFFFFF;
      }
      .gsc-results .gsc-cursor-page {
        border-color: #E9E9E9;
        background-color: #FFFFFF;
      }
      .gsc-results .gsc-cursor-page.gsc-cursor-current-page {
        border-color: #FF9900;
        background-color: #FFFFFF;
      }
      .gs-promotion.gs-result {
        border-color: #336699;
        background-color: #FFFFFF;
      }
      .gs-promotion.gs-result a.gs-title:link {
        color: #0000CC;
      }
      .gs-promotion.gs-result a.gs-title:visited {
        color: #0000CC;
      }
      .gs-promotion.gs-result a.gs-title:hover {
        color: #0000CC;
      }
      .gs-promotion.gs-result a.gs-title:active {
        color: #0000CC;
      }
      .gs-promotion.gs-result .gs-snippet {
        color: #000000;
      }
      .gs-promotion.gs-result .gs-visibleUrl,
      .gs-promotion.gs-result .gs-visibleUrl-short {
        color: #008000;
      }
    </style>
    
    <!-- end google search form script -->

    And googlesearch.php looks like this:

    <?php
    /*
    Template Name: google search
    */ 
    
    get_header(); ?>
    
    	<div class="hfeed content">
    
    		<?php hybrid_before_content(); // Before content hook ?>
    
    		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
    			<div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">
    
    				<?php hybrid_before_entry(); // Before entry hook ?>
    
    				<div class="entry-content">
    
    <!-- begin google search results code -->
    
    				<div id="cse" style="width:100%;"></div>
    
    <!-- end google search results code -->
    
    			</div><!-- .entry-content -->
    
    				<?php hybrid_after_entry(); // After entry hook ?>
    
    			</div><!-- .hentry -->
    
    			<?php hybrid_after_singular(); // After singular hook ?>
    
    			<?php comments_template( '', true ); ?>
    
    			<?php endwhile; ?>
    
    		<?php else: ?>
    
    			<p class="no-data">
    				<?php _e( 'Sorry, no page matched your criteria.', 'hybrid' ); ?>
    			</p><!-- .no-data -->
    
    		<?php endif; ?>
    
    		<?php hybrid_after_content(); // After content hook ?>
    
    	</div><!-- .content .hfeed -->
    
    <?php get_footer(); ?>

    Thank you.

  2. You must be a logged-in exclusive member to view this reply.

  3. The problem isn't as big as it sounds.
    It boils down to where to put this snippet of code: <div id="cse" style="width:100%;"></div> This is the anchor div for the search results. I figure needs to be embedded on every page, so I don't know why the tutorial said to use a static page.

    With the default wp theme, I'd open index.php and stick it in the 'content' div. But because hybrid calls many things w/ hooks, and index.php is just a place holder, and I'm using a child theme.. I'm at a loss as to where to put it.

    Where would you put it if you wanted it to dynamically appear at the top of the main content?

  4. History of attempts:
    I pasted a copy of page.php into my child theme and added the snippet inside the 'hfeed content' div. The problem with this, is that the content still exists below the search results. And it doesn't work on the blog page.

  5. You must be a logged-in exclusive member to view this reply.

  6. I've read in a few places that the native wp search function doesn't perform well. Also attended a wp lecture just the other day - one of his highlight suggestions was install google search.

    Thank you for the add_action! I'll give it a try - also take a closer look at the available plugins.

  7. This is a hybrid/child/template question.

    I've gotten the google search to work. This is how I did it:
    1) put the search box code in the primary sidebar, in a text/html widget.
    2) opened "about" page, and pasted the search results code there.
    BAM. When I search, it auto-loads the about page.

    According to all the tutorials out there, this is how I'm SUPPOSED to do it:
    1) put the search box code in the primary sidebar, in a text/html widget.
    2) create a tempate, ie: "gsearch.php". paste the search results code there w/ calls for header & footer.
    create a page called "gsearch". leave the content blank. open the page attributes template dropdown and select "gsearch". make sure the page-slug says "gsearch". publish.

    When I do the latter, it gives me "404 page not found".

    This proves that the code works - it's just a matter of where to put it. I've tried putting the gsearch.php in the child theme root and even in hybrid root.

    Why isn't "gsearch.php" dynamically loading when selected as a template for a page?

  8. Wait. I think I got it.
    When I stated the location of the search results in the code, I said "gsearch.php".
    Perhaps what I should have said is simply "gsearch", as I'm linking to the page, not the tempate. (!)

    I'll test this and post my findings.

  9. Got a winner! That fixed the problem.

  10. You must be a logged-in exclusive member to view this reply.

Reply

You must log in to post.

Limited Access

If you have an account, please take a moment to log in.

Non-exclusive members have limited access to the support forums.

To enjoy the full range of support, sign up for an exclusive membership in the theme club.

Support Forums

  • Bliss Theme (202 posts)
  • Hybrid Theme (17,116 posts)
  • Options Theme (10,322 posts)
  • Structure Theme (2,626 posts)
  • Visionary Theme (767 posts)
  • bbPress Themes (293 posts)
  • WordPress Plugins (1,619 posts)
  • General Discussion (4,011 posts)