Updated on Feb 13, 2023
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.
Step 1
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.
Step 2
Edit the template.
Add a Section containing a Code Block.
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 Code Block element inside this Section.
PHP & HTML:
<h1>Search results for:
<?php echo esc_html( get_search_query( false ) ); ?>
</h1>If you want to show the number of search results returned, use this code: https://pastebin.com/raw/C0T5LMVD (Source).
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 default.
Select the Heading element in the second Section and change the text to something like “Make another search:”.
That’s it!
Update: If you want to conditionally output a Section when there are no search results, follow this tutorial.
Leave a Reply to WooCommerce in Oxygen – WPDevDesign Cancel reply