OceanWP theme

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

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

Replacing the search (overlay style)

1. Set overlay search in OceanWP settings

Go to Appearance → 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 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 -->