Using Divi Visual Page Builder and SearchWP
Table of Contents
Divi is a market leading visual page builder powering countless WordPress websites.
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:
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:
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:
- Text Module in a Row
- Search Module in a Row
- 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:
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:
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 ); |