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!

Answer 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)