SearchWP

Version 4 Documentation

Using Divi Visual Page Builder and SearchWP

Table of Contents

Divi is a market leading visual page builder powering countless WordPress websites.

Screenshot of Divi website

Divi not only allows you to visually structure and build your entire website, it allows you to use all of its tools to customize your search results template as well!

Even better: SearchWP automatically integrates with Divi’s customized search results template! ?

Note: You should use Divi’s Search Form Module for search forms

Set up Divi Search Results Template

Creating a Search Results Template in Divi follows the same steps as creating other Templates:

Screenshot of creating search results template in Divi

Once you have created your Search Results Template it will appear alongside any other Templates you’ve created. We can customize the display of search results by clicking Add Custom Body in our Search Results Template:

Screenshot of Add Custom Body to Search Results Template in Divi
Screenshot of Divi Start Building

You can then use all of the familiar tools in Divi to set up your Search Results Template. In this example we’ve set up:

  1. Text Module in a Row
  2. Search Module in a Row
  3. Blog Module in a Row (Important: this is what displays search results!)

The most important part of your Divi Search Results Template is to ensure you are using a Blog Module — it is responsible for displaying SearchWP’s results.

Further, you must enable Posts For Current Page:

Divi Blog Module screenshot

Once your Blog Module has been added to your Search Results Template, you can customize it in any way you’d like using the options available in Divi. Here’s an example:

Screenshot of Divi Blog Module Search Results Template

Once you’ve finished customizing your Search Results Template you can ensure that your SearchWP Engine is set up how you’d like, and results from SearchWP will be shown in your Divi Search Results Template! ?

Customize Engine used

By default SearchWP will use its default Engine to perform the search. If you’d like to use a supplemental Engine instead you can use this hook:

All hooks should be added to your custom SearchWP Customizations Plugin.

<?php
// Use `supplemental` Engine for Divi Search Results Templates.
// @link https://searchwp.com/documentation/knowledge-base/divi/
add_filter( 'searchwp\integration\pagebuilder\engine', function( $engine, $params ) {
if ( 'divi' === $params['context'] ) {
$engine = 'supplemental';
}
return $engine;
}, 10, 2 ),
[wpforms id="3080"]
[wpforms id="3080"]