OceanWP theme

This article explains how to replace the native search bar in the OceanWP theme by oceanwp.

Replacing is based on editing the OceanWP child theme. Make sure you have installed the OceanWP child theme. If not, install it. Here is documentation on how to do it.

Replacing the search (overlay style)

1. Set overlay search in OceanWP settings

Go to Apperiance -> Customize -> Header -> Menu -> Search icon (section) and select “Overlay”.

2. Create the following file in the child theme:

partials/header/search-overlay.php

3. Add there the following code:

<?php
/**
 * Site header search overlay
 *
 * @package OceanWP WordPress theme
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Post type
$post_type = get_theme_mod( 'ocean_menu_search_source', 'any' ); ?>

<style>
    #searchform-overlay a.search-overlay-close {
        top: 40px;
    }
    #searchform-overlay form {
        position: static;
        margin-top: 0;
    }

    #searchform-overlay .dgwt-wcas-search-wrapp {
        max-width: none;
        position: absolute;
        top: 92px;
        text-align: left;
        max-width: none;
    }
    .dgwt-wcas-details-wrapp {
        z-index: 9999!important;
    }
</style>

<div id="searchform-overlay" class="header-searchform-wrap clr">
	<div class="container clr">
        <a href="#" class="search-overlay-close"><span></span></a>
        <?php echo do_shortcode('[wcas-search-form]'); ?>
	</div>
</div><!-- #searchform-overlay -->