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.

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 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 get_search_query.

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 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

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • Awesome tutorial Sridhar! Just what I was looking for! I appreciate also that you demonstrated gradient backgrounds with CSS.

    Quick question.. Is there a way to modify the number of entries per page? The default 5 is not enough for me, and when I start to use custom or manual, it goes pear shaped for me.

    What’s the best way to modify the number of entries per page?

  • Hi Sridhar,

    I’m using Relevanssi and have set it to index my CPT which contains information about scientific publications.

    When a search is performed, say on a keyword I know exists in a title I am taken to the search results page

    http://atrc.org.au/?s=baseline

    But the Easy Post seemed to display a lot of unrelated content. Even though I set it to the CPT of ‘Publications’. Ideally I don’t really want to limit the search results to a single CPT so I would want this page to display any type of results.

    Do you have any thoughts on this?

    Regards,

    John.

  • Namaste dear Sridhar!
    Please provide us a Search results page for PAGES (or for pages and posts together), because this way the search string is searched only in the posts which is not enough for my projects.
    Thank you in advance!

      • Dear Sridhar!

        It’s OK that WP searches across both posts and pages, but the search result page I created with the help of this tutorial shows only results found in posts…
        Mat wrote about the same wish below on October 5, 2018.

          • I contacted the support as you advised and when they logged in to my admin, it turned out that I entered all the headings and texts directly to Oxygen which WordPress search doesn’t index. So the solution was very simple, I had to copy-paste all the texts from Oxygen to WordPress editor for all my pages and Update them.

          • Yes.

            It is recommended to have the main Page and Post content in the WordPress editor, if possible.

  • Thank you for this! I tried it and had to eliminate the “inner content” from the template and just put in the search parameters because leaving the “inner content” seems to call up inner content from pages or posts I don’t want there depending on what I “search for.” If I search for x, then perhaps innercontent from a page associated with that term comes up. If I search for “y” which has maybe one word use throughout my site, it will bring up the entire page (header builder, post content, footer) that has that one word in it, followed by the search results. If I eliminate the inner content section, of course I can’t use the template as a page builder but the search function works perfectly. Admittedly, I’m probably NOT using WordPress and Oxygen the way they supposed to be used if I’m getting this odd behavior. Furthermore, while I’m fairly confident in my HTML and CSS, I’m often stuck when it comes to wrapping my head around the WP functions and writing in php which often has me searching the web for quick code fixes or plugins for what i need. So in the end, thank you for this!

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: