Updating Google Custom Search CSE on custom Wordpress theme

Question

I don't have much experience in php but I'm trying to update my website's custom theme code to use the new Google CSE. The website is set up so that the header has a search bar that redirects you to a search results page. The search bar code in header.php is as follows:

<form method="get" action="<?php bloginfo('url'); ?>" class="ui-form dark search">
                            <label for="f-search"><i class="icon-search"></i> <span class="alt">Search</span></label>
                            <input type="text" name="s" id="f-search" placeholder="Search" />
                        </form>

The search results page:

<script src="https://www.google.com/jsapi"></script>
                <script type="text/javascript">
                    google.load('search', '1');
                    google.setOnLoadCallback(function() {

                        var SEARCH = new google.search.CustomSearchControl('010282947182076583221:xjxtd-etbp0');
                        SEARCH.draw('search-results');
                        SEARCH.execute("<?php the_search_query(); ?>");
                    });
                </script>

This is the new CSE code from Google:

<script>
  (function() {
    var cx = '015983680008294815385:py6fsnsv2fc';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Any help with this is much appreciated! Thanks!

Ajmal PraveeN · Accepted Answer · 2017-09-11 23:15:46Z

1

Just replace the Old html code

<form method="get" action="<?php bloginfo('url'); ?>" class="ui-form dark search">
                            <label for="f-search"><i class="icon-search"></i> <span class="alt">Search</span></label>
                            <input type="text" name="s" id="f-search" placeholder="Search" />
                        </form>

WITH

<script>
  (function() {
    var cx = '015983680008294815385:py6fsnsv2fc';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

That's all now it will start working.. (Now you have replaced default Search with the Google custom search)

answered Sep 11, 2017 at 23:15

Ajmal PraveeN

4238 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Christian O'Rourke Over a year ago

Thanks so much! That functionally works perfectly but completely covers the entire header. Do you know of a way to do custom stylization for Google CSE? I'll look through the documentation and see what I can find, but because you're more experienced than I am with php/Google CSE I was hoping you could point me in the right direction.

Ajmal PraveeN Over a year ago

Thank you.. If my answer is usefull Kindly Vote the Answer UP ⬆️ and to Customize the Google CSE you need visit google.com/cse and Login to your Google cse created account and you can customize the Colors of the input, size, output , etc.. lot of features there.

Ajmal PraveeN Over a year ago

So Christian, Do you any more Questions let me know!! :)

Ajmal PraveeN Over a year ago

Christian If you need Further Help you can add me On FB Kindly search my name on Ajmal Praveen

Ajmal PraveeN Over a year ago

Let us continue this discussion in chat.

|

Collectives™ on Stack Overflow

Updating Google Custom Search CSE on custom Wordpress theme

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related