WordPress Divi header search bar

Add search bar to Divi header with code.

The Divi theme is a popular WordPress theme that comes with a built-in search bar in the header. However, if you want to customize the search bar in the Divi header, you can use the following code snippet.

function wpsnippets_custom_divi_header_search() {
    ob_start();
    ?>
    <div class="custom-search-bar">
        <?php get_search_form(); ?>
    </div>
    <?php
    return ob_get_clean();
}
add_filter( 'et_search_form_container', 'wpsnippets_custom_divi_header_search' );

This code snippet creates a custom search bar by using the get_search_form() function, which generates the HTML markup for the search form. The ob_start() and ob_get_clean() functions are used to capture the output of the search form and return it as a string.

To use this code snippet, you need to add it to your theme’s functions.php file or a custom plugin file. Once added, it will replace the default search bar in the Divi header with the custom search bar defined in the wpsnippets_custom_divi_header_search() function.

You can further customize the appearance of the search bar by adding CSS styles to the .custom-search-bar class.

Examples

Example 1: Adding a Search Bar to the Divi Header

This use case demonstrates how to add a search bar to the header of a Divi theme using a custom PHP function. The code example below adds a search bar to the right side of the header.

function wpsnippets_add_search_bar_to_divi_header() {
    echo '<div class="et_search_outer">';
    echo get_search_form(false);
    echo '</div>';
}
add_action('et_header_top', 'wpsnippets_add_search_bar_to_divi_header');

The wpsnippets_add_search_bar_to_divi_header function is hooked to the et_header_top action, which is responsible for displaying content at the top of the Divi header. The function echoes the HTML markup for the search bar, including the et_search_outer class and the get_search_form function to display the search form.

Example 2: Styling the Divi Header Search Bar

This use case demonstrates how to style the search bar in the Divi header using CSS. The code example below adds custom CSS to change the background color, text color, and border of the search bar.

.et_search_outer {
    background-color: #f2f2f2;
    color: #333;
    border: 1px solid #ccc;
}

The .et_search_outer selector targets the search bar container and applies the specified styles. You can modify the values to match your desired design.

Example 3: Modifying the Divi Header Search Placeholder Text

This use case demonstrates how to modify the placeholder text of the search bar in the Divi header. The code example below uses the gettext filter to change the default placeholder text.

function wpsnippets_modify_divi_header_search_placeholder($translated_text, $text, $domain) {
    if ($text === 'Search &hellip;') {
        $translated_text = 'Type your search here';
    }
    return $translated_text;
}
add_filter('gettext', 'wpsnippets_modify_divi_header_search_placeholder', 10, 3);

The wpsnippets_modify_divi_header_search_placeholder function is hooked to the gettext filter, which allows you to modify translated text. In this example, the function checks if the original placeholder text matches 'Search …' and replaces it with 'Type your search here'.