Google CSE Malfunctions via Chrome/Safari on Mobile When Clicking on Either Sear

  • tips4gamersteamg · Member ·

    Let me briefly go over the issue we are having with the search in the header. While on our website via Google Chrome/Safari for mobile or Google Chrome incognito for desktop and you touch the search icon or the menu icon in the header a highlight animation happens but the search box will not populate. Instead, it adds a hashtag to the end of the URL and jumps you to the top. To fix this issue, you have to refresh the page. In addition, once you submit your search and you are on the search results page, then click on the menu or search icon, it adds a hashtag, clears the search results, and jumps you to the top. A refresh of the page will fix the issue but your search results will not be there. I cannot replicate the issue via Mozilla Firefox or Webroot Secure Anywhere Browsers for mobile or desktop. With that being said, I have narrowed it down to two specific browsers. I also want to mention that the search results page itself has no issues. The search box and results function as they should.

    Moreover, my goal is to replace our theme’s search in the header with Google Custom Search, and I believe I can accomplish this with the searchform.php file? I believe strongly that it has to do with the searchform.php and/or the search.php file (both original codes listed below). I have done some research on how to change the searchform.php file to add Google CSE and all I can find are outdated articles.

    We use WordPress, hence why I am here, and set up Google CSE with the Layout set to Compact using their Default Theme and have added CSS to style the search box and results. I have run several tests and only one result prevailed. Also, one thing I want to note in doing all of my tests is I cleared my cache via browser and Supercacher for my website. Changing the theme worked. There was no issue via Google Chrome for mobile or incognito for desktop. Our theme, BuddyBoss, has a search.php file and a searchform.php file. The theme I switched to only has a searchform.php file (not sure if that matters at all). I deleted the PHP in the searchform.php file and added the following code (using my Child Theme): 

    
<script>
(function() {
    var cx = 'CSE ID';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only resultsUrl="https://www.example.com/"></gcse:searchbox-only>

    I contacted Google regarding the issue and they told me I was using a deprecated code and gave me a link giving details about the Element Control API https://developers.google.com/custom-search/docs/element. That is when I found out that the above code that is in my searchform.php file is the previous version. Then, I followed Google’s instructions:

    
<!-- Put the following javascript before the closing </head> tag
and replace 123:456 with your own Custom Search engine ID. -->
https://cse.google.com/cse.js?cx=123:456

<!-- Place this tag where you want both of the search box and the search results to render -->
<div class="gcse-search"></div>

    I then tried keeping the searchform.php code the same way our theme developers have it:

    
<?php
/**
 * The template for displaying search form
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package BuddyBoss_Theme
 */

?>

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label>
        <span class="screen-reader-text"><?php esc_html_e( 'Search for:', 'buddyboss-theme' ); ?></span>
        <input type="search" class="search-field-top" placeholder="<?php echo esc_attr( apply_filters( 'search_placeholder', __( 'Search', 'buddyboss-theme' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
    </label>
    <input type="submit" class="search-submit" value="<?php echo esc_attr_e( 'Search', 'buddyboss-theme' ); ?>" />
</form>

    Then, I created my own search.php in my child theme and filled it out with the “Get Code” code from Google CSE:

    
https://cse.google.com/cse.js?cx=My%20ID
<div class="gcse-search"></div>

    Here is our theme’s search.php file if anyone can find it useful:

    
/**
 * The template for displaying search results pages
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#search-result
 *
 * @package BuddyBoss_Theme
 */

get_header();

$blog_type = 'standard'; // standard, grid, masonry.
$class = 'bb-standard';
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <?php if ( have_posts() ) : ?>
            <header class="page-header">
                <h1 class="page-title">
                <?php
                    /* translators: %s: search query. */
                    printf( esc_html__( "Showing results for '%s'", 'buddyboss-theme' ), '<span>' . get_search_query() . '</span>' );
                    ?>
                    </h1>
            </header><!-- .page-header -->

            <div class="post-grid <?php echo esc_attr( $class ); ?>">
                <?php
                /* Start the Loop */
                while ( have_posts() ) :
                    the_post();

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/content', apply_filters( 'bb_blog_content', get_post_format() ) );

                endwhile;
                ?>
            </div>

            <?php
            buddyboss_pagination();

        else :
            get_template_part( 'template-parts/content', 'none' );
            ?>

        <?php endif; ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php get_sidebar('search'); ?>

<?php
get_footer();

    Implementing that code into the search.php file did not work. At this point, I am just trying different things and testing them out. I am now trying to familiarize myself with WordPress’ get_search_form( array $args = array() ) so I can see how I can implement my own Google CSE on our website https://developer.wordpress.org/reference/functions/get_search_form/.

    I am new at the coding aspect and would love any feedback on what I can do or if anyone can point me in the right direction! I appreciate the time you give me as well as any help I get. Hopefully, it will be an easy thing to fix.

    This was super long, but I tried to be as descriptive as I could. I hope I was clear, easy to follow, and answered all of your questions. Thank you!

    Thanks and regards,

    Josh

    The blog I need help with is: (visible only to logged in users)

  • fstat · Staff ·

    Hi there,

    It looks like you’re in the wrong forum. Your site is using the open-source WordPress software and you need to seek help at these forums:

    https://wordpress.org/support/forums/

    These forums are for WordPress.com hosted sites only. If you want to know more about the differences between WordPress.com and the WordPress software you can read this document:

    WordPress.com vs. WordPress.org

  • tips4gamersteamg · Member ·

    Sorry about that. You have a good rest of your week.

  • The topic ‘Google CSE Malfunctions via Chrome/Safari on Mobile When Clicking on Either Sear’ is closed to new replies.