Optimizing Search in Total Theme

Hi,

I’m not sure what you mean by ”search from that page only”.

If you just want your search bar to search standard posts (so not pages, portfolio, staff…etc) you can simply edit the search bar to set it so it only searches for posts like this: https://a.cl.ly/kpue6BY1

But if you what you really want is to have the search bar search on the same page and return results only found in the grid placed on the page it’s possible with a little code/

I have an example on this doc page here – https://total.wpexplorer.com/docs/filters/ (second search bar). This works by linking to the same page for the Action URL and passing a custom input parameter – https://a.cl.ly/nOuJ5EBd – in my case I’m using “_search” so when you try searching it will refresh the page with that added parameter.

Then I use a little code to modify the current Query based on if this filter exists:

add_filter( 'vcex_query_args', function( $args, $atts ) {
    if ( isset( $_GET['_search'] ) ) {
        $args['s'] = sanitize_text_field( $_GET['_search'] );
    }
    return $args;
}, 10, 2 );

If you instead want an AJAX search (sorts items without a page refresh). There isn’t any built-in element you can use, but there is a JS API already that can be used with some custom code. I have an example here: https://gist.github.com/wpexplorer/e95f2bc43c82a227787e8ae0d8a87432

So if you just want a search you could create your own shortcode like such:

function plusvision01_ajax_search( $atts ) {
    if ( empty( $atts['target'] ) || ! function_exists( 'totalthemecore_call_non_static' ) ) {
        return;
    }

    // Load ajax scripts.
    totalthemecore_call_non_static( 'Vcex\Ajax', 'enqueue_scripts' );

    // Get target grid.
    $target = $atts['target'];

    // Render filter HTML.
    ob_start();
    ?>
        <div data-vcex-="">ajax-filter="1" data-vcex-ajax-filter-target="#<?php echo esc_attr( str_replace( '#', '', $target ) ); ?>" data-vcex-ajax-filter-multiple="1" data-vcex-ajax-filter-relation="AND">
            <input type="text" data-vcex-type="search" placeholder="search items">
        </div>
    <?php
    return ob_get_clean();
}
add_shortcode( 'plusvision01_ajax_search', 'plusvision01_ajax_search' );

Add then use the shortcode like this:

[plusvision01_ajax_search target="YOUR_GRID_ID"]

Where “YOUR_GRID_ID” is the unique ID added to the Post Cards element you are trying to filter: https://a.cl.ly/P8uw8v9W

– AJ

ps: I will look into adding a new ”Search Parameter” field to the post cards element in the next update so that this can be done without custom code as well as adding the ability to the Search Bar to be able to search a Post Cards element. I have a big 6.0 update coming out hopefully early next month and I’ll try and get these 2 things added as well. For the meantime the code above should work well, but if you have any issues or questions let me know!

Via