Using Oxygen Visual Site Builder and SearchWP
Oxygen is an extremely popular and well built WordPress page builder with fans across the world. The plugin is very well built, has a polished user interface, and is powering tons of sites.
One of its greatest features is the ability to customize your search results page using all of Oxygen’s features!
Even better: SearchWP automatically integrates with Oxygen’s search results template! ?
Note: You should use Oxygen’s Search Form component for your search form
Add Search Results Template to Oxygen
To customize your Oxygen-powered search results template, navigate to Oxygen > Templates in your WordPress Admin and click Add New Template:
After giving your template a title (e.g. Search Results) you can then tell Oxygen that this is your search results template by toggling Other and ticking the checkbox for Search Results:
Once published, you can customize your Oxygen-powered search results template by clicking the familiar Edit with Oxygen button:
Customizing Oxygen Search Results Template
Now that Oxygen knows which template to use for your search results, let’s add the search results to the template. There are two methods to go about this:
- Using Easy Posts (simple)
- Using a Repeater (full customization)
Oxygen Easy Posts
The most straightforward way to output SearchWP’s search results in Oxygen’s Search Results template is to use the Easy Posts component:
With that component added to the template, be sure to tell Oxygen (using the Query
segment of the Easy Posts settings) to use the default WP_Query
and Easy Posts will display search results provided by SearchWP:
Oxygen Repeater
If you would like more control over the way you SearchWP search results are displayed in Oxygen you can use a Repeater component instead of Easy Posts.
As is the case with Easy Posts, be sure to click through to the Query settings for the Repeater and tell Oxygen to use the default WP_Query
:
You can then proceed to customize your Repeater in any way you’d like, using Oxygen’s powerful tooling to fully customize your search results page.