In this tutorial, we’ll look at how to add how to create a custom search results page using Zion Builder Pro‘s theme builder.
Our header search element makes it easy to add site wide search to your site, but if you’re building your entire site with Zion builder (and not relying on a theme) you may need to build the search results page also.
One cool feature of Zion Builder Pro, is the repeater functionality, where any container or section can be used to dynamically add content from a query. Ideal for creating custom archive templates, including for search results pages.
Create a new template
From the theme builder screen, add a new template that will be applied to all search pages.
Adding a new ‘body’ component in that template
We just want to swap out the body, keeping the same header and footer. So we can just add a body component.
Editing the Search results body component
Inside the Search results body component, we can just add a heading (we’ll change this later) and create an area for the search results to populate.
The important step is to enable the repeater provider on a container for where the posts are going to need to appear inside. We aren’t creating a custom query, we want to rely on the main WP query to take care of adding the search results for us so it needs to be set to active page query.
Set the Dynamic Data Preview Source
To be able to actually see posts inside the builder, so we can view the layout better we can change the Dynamic Data Preview Source to be a post archive. Then we’re looking at the latest posts while finishing the template.
Design the Post Layout
Obviously what you put into the posts is up to you. Adding a heading, adding text and an image will allow you to use the dynamic data options to populate with Post title, post excerpt, featured image, etc.
Add search query to heading
It can be useful on search pages to include the search term in the header. Instead of a static ‘Search Results‘ we’d want something like Search results for: Zion Builder Tutorials
A quick way to do this is to use a code block for the heading instead of a heading element and add this PHP code..
<?php
echo '<h1>Search results for: ' . esc_html( get_search_query( false ) ) . '</h1>';
?>That’s it
Now when a user searches the site, the correct search results will be shown using this template with their search term inside the page header.
