How to create a Search Results page in Oxygen
Updated on January 07, 2019
This tutorial provides the steps to create an Oxygen template for displaying the search results.
We are going to display the search string that the user searched for, the results and a search form so the user can perform another search.
Create a template in Oxygen and make sure to apply it to “Search Results” under “Other”.
Set a template priority (or order) higher than what’s set for your Archives template (if present) so this template gets used vs the Archives one.
You might want to inherit from a “Main” template that contains your header, an Inner Content element and the footer.
Edit the template.
Add a Section containing a Heading element.
Add another Section having Easy Posts, a Heading and a Search Form (under WordPress).
Select the first Section and apply your desired background, text color and make any other styling adjustments.
In my test site, I’ve assigned a class of
page-header to the Section, and to this class set Text Color as
#fff, the Background Color as
#5c258d, and added this Custom CSS:
background: -webkit-linear-gradient(to right, #5c258d, #4389a2); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #5c258d, #4389a2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
for the gradient.
Select the Heading element inside this Section.
I’ve changed the Font Size to 36px.
Double click the text and click on “Insert Data” button near the top. Click on “PHP Function Return Value”, then in the “Function Name”, paste
Double click on the heading text again and add your desired prefix text of say,
Search results for: at the left of the inserted shortcode.
Note: If you want to show the number of search results returned (screenshot), use a Code Block instead of the Heading having this.
Select the Easy Posts element in the second Section. You may want to change the preset to your desired layout. I’ve left everything at default. Make sure that WP Query is set to
Select the Heading element in the second Section and change the text to something like “Make another search:”.