Overriding Template

Overriding the template allows you to change things of the output for your autocomplete or instant search design as you need to.

• Plugin base folder: search-with-typesense/templates

The templates are in the plugin search-with-typesense/templates and you can override it by copying it to your child theme.

To override, copy files from wp-content/plugins/search-with-typesense/templates/ folder to wp-content/themes/your-theme/search-with-typesense/,

Then you can make the changes as you need. For example if you want the filters to show up on the right instead of the left. Copy the file instant-search.php from wp-content/plugins/search-with-typesense/templates/ to wp-content/themes/your-theme/search-with-typesense/instant-search.php. And change the div structure so that main-panel is first and filter-panel is second.

End Result:

Below is sample of code - please change the template by copying from parent

    <div class="main-panel">
        <div class="cm-typesense-search-results-wrapper">
            <div class="cm-typesense-search-posts-pages-results-wrapper">
                <?php
                foreach ( $args['post_types'] as $post_type ) {// echo '<pre>'; var_dump( $config ); echo '</pre>';
                    ?>
                    <div class="cm-typesense-shortcode-search-heading">
                        <h2 class="cm-typesense-shortcode-search-title">
                            <?php
                            $title = ( isset( $config['config']['post_type'][ $post_type ]['label'] ) && $config['config']['post_type'][ $post_type ]['label'] != '' ) ? $config['config']['post_type'][ $post_type ]['label'] : $config['available_post_types'][ $post_type ]['label'];
                            echo esc_html( $title ); ?>
                        </h2>
                        <div class="cm-typesense-shortcode-search-<?php echo esc_html( $post_type ); ?>-sortby cm-typesense-sortby"></div>
                    </div>

                    <div class="cm-typesense-shortcode-search-<?php echo esc_html( $post_type ) ?>-result"></div>
                    <div class="cm-typesense-pagination cm-typesense-shortcode-search-<?php echo esc_html( $post_type ); ?>-pagination"></div>
                <?php } ?>
            </div>
        </div>
    </div>
    <?php if ( $args['filter'] === 'show' && 1 === count( $args['post_types'] ) ) { ?>
        <div class="filter-panel">
            <?php
            foreach ( $facet as $filters ) {
                foreach ( $filters as $filter ) { ?>
                    <div class="cm-typesense-shortcode-search-<?php echo esc_html( $filter ); ?>-filters"
                         data-title ="<?php  esc_html_e( sprintf( 'Filter by %s', ucwords( esc_html( $filter ) ) ), 'search-with-typesense' ); ?>"
                    ></div>
                <?php }
            }
            ?>
        </div>
    <?php } ?>