Neighborhood theme

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

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

Replacing search bar

Open functions.php file in the child theme and add there following code:

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
} );