Skip to main content

WP: 3. Custom Search Results With Search and Filter Pro Plugin In Wordpress

Did you stuck in customizing the Search Results of the Plugin "Search and Filter Pro"? Well, Here is a good news for you I can save you a lot of effort and timing for the research you are going to do on this. Just follow the steps and you are done for the day, It's that easy.

Step 1: Download and Install the Plugin "Search and Filter Pro"

Step 2: Create a form for the post or custom post by just drag and drop.

Step 3: In the Settings box, under the Display Results tab select “Using a Shortcode” 

Step3: Once done creating the form, Paste the shortcodes for the form and results on your page or template.

Step4: Copy the Full URL of this page from the address bar and paste into the the S&F form, in the Results URL option and update (this can be found in the Display Results tab).

Customizing the Results

Step1: Override the plugin template by just creating a folder(search-filter)in your current theme.

Step2: Make a File(results.php) inside the search-filter folder and paste the following code.

<?php
if ( $query->have_posts() )
{
?>
 <div class="faq-grid" >
<?php
while ($query->have_posts())
{
$query->the_post();
?>
<h3 class="accordion-toggle"><span>01.</span><?php the_title(); ?> </h3>
<div class="accordion-content"><?php the_content(); ?></div>
<?php
}
?>
 </div>
<?php
}
else
{
echo "No Results Found";
}
?>
Now Cheers !😊

Note:- It's a basic template you can customize it more by adding pagination and etc. I have keep it simple to kick this thing get started for you.

Labels:

Comments

Post a Comment

Popular posts from this blog

React: Remember me functionality with React

Want to know how can you easily integrate Remember me on your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the react-cookie in your project    npm install react-cookie Step2: Add the following code in index.js import { CookiesProvider } from "react-cookie"; ReactDOM.render(      <CookiesProvider>           <App />      </CookiesProvider>,      document.getElementById('root') ); Step3: Add the following code in your component    import React, { useState } from 'react'; import { useCookies } from 'react-cookie'; const App = () => { const [name, setName] = useState(''); const [pwd, setPwd] = useState(''); const [cookies, setCookie] = useCookies(['user']); const handle = () => {      setCooki...
Post a Comment
Read more

JS: Cheatsheet

   Datatypes Difference Between Var, Let and Const Functions and its types Asynchronous operations in JS
3 comments
Read more

React: Print Specific Section of the page with - ReactToPrint

  Want to know how can you easily print specific section of your website just follow the steps below and I am sure you will find this pretty easy. There is no rocket science to crack it you just need basic code knowledge only. Step 1: Add the ReactToPrint in your project    npm install --save react-to-print Step2: Add the following code in your component   import React, { useRef } from 'react'; import ReactToPrint from 'react-to-print'; const Example = () => {      const componentRef = useRef();      return (           <div>                <ReactToPrint                     trigger={() => <button>Print this out!</button>}                     content={() => componentRef}    ...
Post a Comment
Read more