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

To replace the search bar, add the following code to your website:

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

ⓘLearn how to add this snippet to your WordPress.