Welcome to another Oxygen Builder video tutorial. In this video tutorial, I’ll show you how to create a simple custom search form in your blog post template, as well as a search results template in Oxygen Builder.
Note: If you’re searching for my custom HTML and CSS search page tutorial using Oxygen, click here.
OK, let’s get started. You can follow the instructions below, or watch the short video tutorial below.
Step One: Drop a search form element into your template
The first step is to find the search form element. You can use the search feature in the Oxygen editor to find it. Once you’ve located the search form element, you can drop it anywhere in your template.
If you’re adding a search form to your blog archives template, you can add this to your sidebar, as shown in the video above.
Step Two: Customize the form
Next, you can add some customization to the form. In the video, I did not add a custom class to the element. Some things that are worth customizing are:
- Margin space
- Form border-color
- Form field text color
- Submit button text color
- Button background-color
- Border radius
Once you’re done, hit save.
Step Three: Add search results page template
Next, we need to create the search results page template. This is very easy to do. Go to Oxygen > Templates > Add New Template.
Name your template something like ‘Search Results Template’.
Next, under ‘Inherit Design From Other Template,’ select the main global template you created that should include your header and footer sections. If you haven’t completed the main template yet, click here to watch the tutorial on how to do this.
Under ‘Where does this template apply,’ select ‘other,’ and then check the search results box. Once you’re done, hit the Publish button, and you’re done. See the image below.
Step Four: Customize your search results page template design
OK, now you can click on the Edit With Oxygen button on this page to begin styling your template. I recommend watching the video above to see how I was able to customize my search results template.
You’ll need to add a blog post grid element called ‘Easy Posts,’ and under Primary > Query > select Default. If you want to learn how to customize the Easy Posts element, check out my blog post template tutorial.
OK, that’s it. Make sure you test your search results form and page to ensure it’s working as it should be. If you run into any problems, you can leave me a comment on my video. If I’m not able to answer immediately, someone else in my community might be able to help.
Tools you need to start your own website
- Siteground Hosting (Affiliate link)
- WordPress: https://wordpress.org
- Thrive Suite (Affiliate link)
More Oxygen Builder tutorials?
If you’re interested in checking out more WordPress and Oxygen Builder tutorials, here are some links to the most popular videos and tuts on my channel –
- How To Create A Custom Search For Page In Oxygen Using HTML and CSS
- How To Create A Beautiful Custom Blog Archives Page Template In Oxygen
Don’t forget to head over to my YouTube channel and subscribe for future updates.
Need help with your Oxygen and WordPress website?
I provide WordPress website design and development services. I have over ten years of experience working with WordPress and two years working with Oxygen Builder. Click here to learn more.
Affiliate Disclaimer: This page contains affiliate links. This means if you click on one of these links and make a purchase of a product or service, I will be paid a small commission, at no additional cost to you. Thanks for your support.
