0

My sincere apologies for asking this question as I am quite certain that this is a relatively easy topic, unfortunately my many hours of searching got me no satisfying results. I do not mind researching this further so any links to relevant posts are much appreciated!

The problem

I want my users to land on a specific archive page after using the search form on my home page. Example; when the user uses the search form on mysite.com they are redirected to all results in the archive of a specific custom post type; mysite.com/customposttype/?s=search-therm

I am using Elementor Pro to style the search form and would therefore like to keep this functionality.

Attempts

I built a new search form with a hidden input with the name of my custom post type. This unfortunately still lead to the standard archive (mysite.com/?s=search-term) and not the custom post type archive.

How can I adapt the search form in such a way that I can have multiple search forms on my website that all redirect to a specific custom post type directory?

Thanks!

4
  • Using Elementor may complicate getting answers here. You'll need to see if you can adjust the URL it posts data to, which is specified in <form action="urlishere"> - that's where you need to have <form action="example.com/customposttype/. Then, create a custom template for that archive so if $_POST['s'] is not empty, it searches and displays search results instead of just the normal archive.
    – WebElaine
    Commented May 5, 2020 at 17:41
  • Thanks for the reply WebElaine! Where can I find <form action="urlishere"> ?
    – Martijn
    Commented May 5, 2020 at 18:18
  • View the source of the page on the front end. You could also check with Elementor support to determine where you find that and whether it's editable.
    – WebElaine
    Commented May 5, 2020 at 19:22
  • Thanks again! I will check it with support and in the mean time use a set of plugins to deal with the issue. This kind of feels like a defeat but hey, I will revisit the issue later. For any other users trying to figure out the same functionality; WPTuts made an amazing tutorial on using JetEngine and JetSmartFilters to achieve a similar effect. youtube.com/watch?v=-z8d2jTQ1vQ&pbjreload=10
    – Martijn
    Commented May 5, 2020 at 20:35

1 Answer 1

0

Simply make an HTML form in Elementor on the archive page where you want to search.

Code:

<form class="zohaib-search-form" role="search" action="/courses" method="get">
<input placeholder="Search.." name="s" type="search">
<button type="submit"><i class="fas fa-search"></i></button>
**Note:** name property of input should be 's' because the search query is looking for key 's' to get and run it.

Replace the action property with your custom post type. It will only work if the action link will be an archive page. After submit the search the filter result will also show on the same archive page like mine courses archive page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.