Search Templates
Table of Contents
The SearchWP Template is used alongside Search Forms to display search results on a customized results page. With the Template Options, you can fully control how your results look and feel, ensuring they match your website’s design and provide a great user experience.
This documentation explains how to use the Template Options page, choose layout themes, apply custom styling, and embed your SearchWP template anywhere on your website.
Note: Template customisation can only be used with the SearchWP Template option in Search Forms. If you wish to customize the Site Default template, you will need to edit the default search template of your theme.
Getting Started with Templates
To create a new template for displaying SearchWP results:
- Go to your WordPress Dashboard.
- Navigate to SearchWP > Templates.
- Click on the “Add New” button to create a new template design.
On the next screen, you’ll find two main sections for customization:
- Choose a Layout Theme
- Custom Styling
Let’s walk through what each section offers.
1. Choose a Layout Theme
This section allows you to choose the layout style for how your search results will appear on the front end of your website. You can easily switch between different layout themes and preview each one before saving.
Available Layout Themes:
- Minimal: A clean, simple list layout showing only the title and description of each result.
- Compact: A list layout with title, description, and a small image thumbnail.
- Columns: A grid layout displaying results in multiple columns, with a title, description, and a small image.
- Medium: A list layout with a medium-sized image, along with the title and description.
- Rich: A visually appealing list layout with a large image, title, and description.
- Combined: This option allows you to design a fully custom layout by mixing and matching settings from the Custom Styling section.
Choosing a theme is a good starting point, and you can fine-tune the design further using the styling options described below.
2. Custom Styling
Once you’ve selected a layout theme, use the Custom Styling section to fine-tune the look and behavior of your search results.
Layout Style: You can choose how the results are arranged:
- Grid: Displays results in a multi-column layout.
- List: Shows each result one below the other in a list format.
Basic Styling Options
The Basic Styling Options allow you to adjust the visual appearance of your search results to better fit your website’s design. These options provide flexibility to control how each result is displayed, ensuring a consistent and professional look.
Description: You can enable or disable the description field in the search results, depending on your preference. If enabled, the description will display a brief excerpt from the content. Additionally, you have the option to highlight the search keywords within the excerpt. To generate a custom excerpt that contains the highlighted keywords, simply enable the Highlighting option in the SearchWP settings.
Image: The Image option allows you to choose the size of the image displayed alongside the search result. You can select from various predefined sizes such as small, medium, and large.
Title: You can customize the color and font size of the results title to match your site’s typography.
Price: The Price option becomes available if an eCommerce plugin, such as WooCommerce or Easy Digital Downloads, is active on your site. It allows you to customize the color and font size of the product price displayed in the search results.
Button Style: The Button Style section lets you customize the appearance of the “Read More” button, which appears at the end of each result excerpt.
You can customize the button label text to something more contextual or inviting, such as “View More” or “Learn More”. Additionally, you can change the background color, font color, and font size of the button to make it stand out or blend seamlessly with your results layout.
Results Per Page: This setting allows you to specify the maximum number of search results displayed on a single page.
Note: You can also set the number of results per page programmatically using the searchwp\results\per_page filter. This is useful if you want to dynamically adjust the result count based on specific criteria or page types.
Pagination Style: The Pagination Style option allows you to control how users navigate through multiple pages of search results.
Available Pagination Types:
- AJAX Load More
This option dynamically loads additional search results without refreshing the page. This method provides a seamless browsing experience, as users can view more results without leaving the current page. You can customize the button label and styling (background, font color, and size). - Default Pagination (Number-Based)
The Default Pagination method displays traditional page numbers, allowing users to navigate through result pages manually. You can select from the following styles:- No Box: This style presents the page numbers alongside previous/next links without any box or circular styling. You also have the option to customize the labels for the Previous and Next buttons.
- Boxed: Displays page numbers with box styling.
- Circular: Displays page numbers with circular border styling.
Embedding Your Template
Just like Search Forms, your SearchWP Template can be embedded into any page of your WordPress site using one of the following methods:
1. Gutenberg Block
The Gutenberg Block method allows you to easily embed SearchWP results directly into any post or page on your WordPress site. This method is particularly useful for users who prefer working with the Gutenberg editor and want to place search results within their content seamlessly.
- While editing any post or page, search for the “SearchWP Results” block.
- Insert the block where you want your results to appear.
- The results are displayed according to the engine and template assigned in the Search Form settings. Under the block settings, you have the option to choose a different template and the engine to display the results. This is not typically required and should be used only if necessary to override the setting set by the search form.
2. Shortcode: Each template provides a unique shortcode. Copy and paste it into any page, post, or widget area to display the results.
3. PHP Code: Use the provided PHP snippet to insert your search results directly into your theme files or via a code snippet plugin.
4. Embed Terms: You can easily add a Results Template block to an existing page by choosing it from the dropdown menu, or you can opt to create a new page specifically for the block.
Tips for Using Templates
- You can create multiple templates for different sections of your website. For example, one layout for your blog search and another for your product search.
- You can also reuse a single template across multiple pages.
- Each template is completely customizable, giving you full control over layout, colors, styles, and content display.
