Neighborhood theme

This article explains how to replace the native search bar in the Neighborhood theme by SwiftIdeas.

Replacing is based on editing the the Neighborhood child theme theme. Make sure you have installed the Neighborhood child theme. If not, install it now.

Replacing search bar

Open the functions.php file in your child theme and add the following code at the beginning of this file after the <?php tag.

add_action( 'wp_head', function () {
    ?>
    <style>
        .ajax-search-wrap .dgwt-wcas-search-wrapp {
            width: 500px;
        }
    </style>
    <?php
} );

add_action( 'neighborhood_before_page_container', function () {
    echo '<div class="js-dgwt-wcas-neighborhood" style="display: none">';
    echo do_shortcode( '[wcas-search-form]' );
    echo '</div>';
    ?>
    <script>
        (function ($) {
            $(document).ready(function () {

                $('.ajax-search-wrap').html('');
                $('.js-dgwt-wcas-neighborhood > div').appendTo(".ajax-search-wrap");
                $('.js-dgwt-wcas-neighborhood').remove();

                $('.mobile-search-form').remove();

                $('.mobile-search-link').on('click', function () {
                    if ($('.js-dgwt-wcas-enable-mobile-form').length > 0) {
                        $('.js-dgwt-wcas-enable-mobile-form')[0].click();
                    }
                });
            });
        })(jQuery);
    </script>
    <?php
} );