Porto theme

This article explains how to replace the native search bar in the Porto theme by p-themes.

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

Replacing search bar

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

add_filter('porto_search_form_content', function ($html) {

    $html = do_shortcode('[wcas-search-form]');

    return $html;
});

add_filter('dgwt/wcas/scripts/mobile_breakpoint', function () {
    return 768;
});

add_action('wp_head', function () {
    ?>
    <style>
        .header-center .dgwt-wcas-search-wrapp {
            width: 440px;
        }

        @media screen and (max-width: 991px) {
            #header .searchform-popup .search-toggle {
                display: none;
            }
        }

        @media screen and (max-width: 767px) {
            #header .searchform-popup .search-toggle {
                display: block;
            }

            .header-center .dgwt-wcas-search-wrapp {
                display: none !important;
            }
        }
    </style>
    <?php
});

add_action('wp_footer', function () {
    ?>
    <script>
        (function ($) {

            $('.search-toggle').on('click', function (e) {

                var $wrapp = $(this).closest('.header-center');
                var $mobileHandler = $wrapp.find('.js-dgwt-wcas-enable-mobile-form');


                if ($mobileHandler.length > 0) {
                    $mobileHandler[0].click();
                }

            });

        }(jQuery));
    </script>
    <?php
});