Updated on June 24, 2020

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!

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: