How to Customize Search Results Page in WordPress: A Guide

The average website visitor spends 4 minutes and 24 seconds per visit across all industries. If potential customers on your WordPress website cannot find what they’re looking for within a few minutes of their arrival, they might assume you don’t carry that product, service, or information. And inevitably, they may halt browsing and bounce off for a competing site.

Visitors will stay on your site longer if they’re able to find what they want quickly. Unfortunately, the WordPress search form doesn’t come with many customization options. However, you have other ways to customize the search feature.

In this post, we help you understand how you can create custom WordPress search results pages in the easiest way possible, even if you don’t have a technical background.

Why customize WordPress search results?

When website visitors land on a page and cannot find what they’re looking for, they perform a search. Up to 30% of eCommerce site visitors use internal site search. Allowing visitors to search using different types of information speeds up discovery and provides a better search experience.

However, the default WordPress search form isn’t very good at finding relevant content. Here’s how you can improve it with some custom tweaks:

• Make results more relevant: Customizing search lets you rank results based on what actually matters to the query, so users find the most important content first, not buried under a pile of old posts.
• Search custom fields: Make custom fields searchable. Whether it’s extra details, metadata, or critical info, users will actually find what matters.
• Add filters and sorting: Give users the tools to refine their search. Filters and sorting make it faster and easier to find exactly the content they’re after without endless scrolling.
• Handle typos and approximations: Don’t let simple mistakes stop users. Fuzzy matching catches misspellings and near-hits, so they still land on what they’re looking for.
• Control how results are displayed: Take charge of the search experience by prioritizing key content and customizing how results appear, putting your best foot forward.

You can work around this limitation using a plugin that creates and changes WordPress custom search results pages. Doing so will:

• Enhance user experience
• Increase site engagement
• Improve site navigation
• Optimize site search
• Boost SEO
• Increase conversions

Methods to customize search results in WordPress

Changing your WordPress search results pages can greatly enhance the usability of your website. The good news is that there are a few ways you can create a custom search results page in WordPress without a lot of technical knowledge:

1. Using the site editor

The WordPress Site Editor lets you customize your site’s templates and layout directly, using a block-based interface. It’s part of Full Site Editing (FSE), giving you control over headers, footers, and content areas without coding.

Here’s how to use it to customize the WordPress search results page:

1. Open the editor from the admin dashboard by going to Appearance > Editor.

2. From the Design menu on the left, click on Templates.

3. Scroll down to the Search Results template and click on it.

💡 You can switch between editing the styles and editing individual blocks using the icons on the top right of the page.

You can customize individual blocks by clicking the relevant block, clicking the Settings icon on the top right corner, then moving between its Settings and Styles tab.

For example, here’s what it looks like when we give the header block a different and italicized font, background color, and a colored border with rounded edges.

This method mainly involves visual edits to aspects like colors, typography, and layout. There are some advanced customizations you can do with custom CSS classes on each block, but that’s about it.

2. Plugin solutions

WordPress search plugins like Relevanssi and SearchWP focus on enhancing search functionality rather than full-page design. Unlike the Site Editor, these tools have a narrower scope, letting you customize the search form, add live search features, or determine which results are prioritized.

Their strength lies in improving how users find content, not in designing the overall search results page. Pair them with the Site Editor for a perfect balance: tailored search performance alongside a visually polished layout that matches your site’s style.

SearchWP, for instance, has Ajax search baked right in, so results pop up as you type – no more typing out the whole query, hitting submit, and waiting around for the page to reload.

You can customize the live search results in the following ways:

• A Layout Theme that dictates how much information accompanies the live search results, i.e. titles, images, and descriptions. There’s a Custom setting where you can choose a custom image size as well as style the titles with a font size and color.

• Minimum number of characters the user needs to type before the search starts. It’s set at three by default, but you can take it down to one or as high as you want!

• Result-specific customizations such as positioning relative to the search form, how many results are shown, and a custom message when no results are found.

3. Page builders

Technically, page builders like Elementor and Divi are plugins, sure, but calling them that undersells how much more powerful they are.

They bring a level of customization to WordPress search pages that standalone plugins like Relevanssi and SearchWP just can’t match, and they deserve their own spotlight.

Here’s how to create and style a custom search results page using Divi:

1. With the plugin installed and activated, go to Divi > Theme Builder.

2. Click on Add New Template then Build New Template.

3. From the Use On list that pops up, scroll down to the Other section and check the Search Results box.

4. When the template is ready, click on Add Custom Body then Build Custom Body.

5. Add a new row and insert a Heading module to it.

6. Hover over the box that says Your Title Goes Here to reveal additional otpions, and click the stacked discs icon on the right that says Use Dynamic Content.

6. Select Post/Archive Title from the list that appears.

7. Next, add a new section and insert a Blog module into it. Toggle the Posts For Current Page option to Yes.

💡 Check the Design tab to ensure the Layout is set to Grid rather than Fullwidth.

Now, when you run a search, the results page should look something like this:

4. Manual customization

Customizing the WordPress search results manually offers unparalleled control over how users interact with your site. Even without a plugin, you can tailor the experience to surface the most relevant content, prioritize specific post types, or even design a completely unique layout.

However, this approach requires working directly with PHP, HTML, and CSS, so it’s best suited for those comfortable diving into code or working alongside a developer.

If you’re ready to build a search experience that’s truly your own, here’s how to do it step by step:

💡 You should create backups of WordPress core and theme files before editing them so you always have something to fall back on if you make a mistake.

1. Modify the query in functions.php: Add this snippet to control which posts appear in search results. For example, to include only posts and pages:

function customize_search_query($query) {
if ($query->is_search && !is_admin()) {
    $query->set('post_type', ['post', 'page']);
    $query->set('posts_per_page', 10); // Limit results
}
}
add_action('pre_get_posts', 'customize_search_query');

2. Create a custom search template: Duplicate search.php in your theme folder. Add custom fields or reorder elements. For instance, to highlight post titles:

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>

3. Style results with CSS: Target the .search-results class in your stylesheet. For example, to add padding and a bottom border:

.search-results {
padding: 20px;
border-bottom: 1px solid #ccc;
}

4. Enhance usability with AJAX: Enqueue a custom script to load results dynamically:

wp_enqueue_script('ajax-search', get_template_directory_uri() . '/js/ajax-search.js', ['jquery'], null, true);

5. Optimize performance: Cache results by integrating the Transients API:

$search_cache = get_transient('search_results_' . $search_query);
if (!$search_cache) {
// Query results and set transient
}

This is just the beginning. If you’ve got the skills, the possibilities for customization are practically limitless. And if you don’t, hiring a WordPress developer can bring your vision to life.

Common WordPress search result page customizations

Here are some of the most interesting, impactful customizations you can make to give your users a search experience that’s actually useful – and, dare we say, delightful.

Change result layout

Customizing how search results are laid out in WordPress is one of the easiest changes to make. Here’s how to do it right from the Site Editor:

1. Open the search results template editor from the dashboard via Appearance > Editor > Templates > Search Results.

2. Click on the search results block, the one right below the header that says Search results for: “search term”, to select it.

3. Click the Settings icon at the top right, switch to the Block tab if necessary, then the Settings tab.

4. Edit the layout by changing the Grid item position setting to Auto or Manual. With Auto, you can set the minimum column width using relative values, while Manual lets you set how many columns you want on each line.

Add filters and sorting

As far as filters and sorting in your WordPress search results, the built-in options aren’t great, so you’ll need to turn to plugins or, frankly, a lot of custom code.

When using plugins, the exact options vary depending on which one you’re running, but Relevanssi allows you to do it by adding the following line of code to your search results page:

<?php echo '<p><a href="' . get_bloginfo('url') . '?s=' . get_search_query() . '&orderby=post_date&order=desc">Order results by date<a></p>'; ?>

This feature enables your visitors to sort search results by date, but you can easily adjust it to sort by other values from the wp_posts database table columns. For example, you could allow sorting by post title (alphabetically) or post author.

There are also dedicated options like FacetWP and Search & Filter that are targeted specifically towards allowing users to fine-tune their searches., useful for, say, a bustling WooCommerce store.

Of course, you could do this yourself with a fair amount of custom code if you’re up to it:

1. Open your theme’s search.php file and add the following code to create a custom search form using a function:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<input type="search" class="search-field" placeholder="Search..." value="<?php echo get_search_query(); ?>" name="s" />
<select name="category">
    <option value="">All Categories</option>
    <?php
    $categories = get_categories();
    foreach ($categories as $category) {
        echo '<option value="' . $category->slug . '">' . $category->name . '</option>';
    }
    ?>
</select>
<button type="submit">Search</button>
</form>

2. Add this code to your functions.php file to modify the query based on the filter inputs:

add_action( 'pre_get_posts', 'custom_search_filter' );
function custom_search_filter( $query ) {
if ( $query->is_search() && !is_admin() && $query->is_main_query() ) {
    if ( isset( $_GET['category'] ) && !empty( $_GET['category'] ) ) {
        $query->set( 'category_name', sanitize_text_field( $_GET['category'] ) );
    }
    if ( isset( $_GET['orderby'] ) ) {
        $query->set( 'orderby', sanitize_text_field( $_GET['orderby'] ) );
    }
    if ( isset( $_GET['order'] ) ) {
        $query->set( 'order', sanitize_text_field( $_GET['order'] ) );
    }
}
}

3. Finally, use the code below to add a dropdown for sorting in your custom search form:

<select name="orderby">
<option value="date">Newest</option>
<option value="title">Title</option>
<option value="relevance">Relevance</option>
</select>

Modify result appearance

There are endless ways to go about customizing the appearance of search results in WordPress. We’ve already talked about using SearchWP for things like positioning relative to the search form, but let’s really get into design.

You can dive into the code – custom templates, CSS, the works – or you can just use the Site Editor. It’s packed with tools to tweak layouts, adjust styles, and make things look exactly the way you want, without touching a single line of PHP.

For instance, here’s how to customize how featured images appear in search results:

1. Open the search template editor via Appearance > Editor > Templates > Search Results and click on the block where featured images would appear.

2. Click on its Settings button, go to the Block tab, then Styles.

3. First, we’re going to add a color overlay to the images. From the Color section, click on the 🚫 icon next to Overlay and select a color then raise its opacity to 30.

4. Next, we’ll add a rounded border around the images. Scroll down to the Borders & Shadow section, choose a border color via the 🚫 icon next to Border and change the px value to make it thicker or thinner. Change the Radius px value to determine how rounded the border’s corners are.

Save your changes, run a search, and your results should look something like this:

The Site Editor lets you control individual elements of your search results pages as blocks, so you should definitely play around and see what you come up with. Anything you can’t tweak there is probably just a plugin or a little custom code away.

Add images to results

The ability to add images to your search results is usually available as a premium feature in plugins like SearchWP and Ivory Search. These tools index your media library, allowing images to appear in search results alongside posts and pages.

It’s an upgrade that can dramatically enhance the usability of your site, especially for visual or media-heavy content, like:

• Photography sites streamlining access to specific photos or collections.
• Educational platforms quickly surfacing charts, diagrams, and other visuals.
• WooCommerce stores letting users search for products by image.
• Design platforms making assets easily searchable.

Best practices for customizing your search results page

When the goal is to make search better for your audience, adopting the best practices of creating a custom search results page in WordPress goes a long way. Here’s a look at some proven ways to speed up and refine the search process on your site:

• Enable keyword stemming: Let users find what they mean, not just what they type. Match related terms like “run,” “running,” and “ran” to surface more useful results they might otherwise miss.
• Exclude irrelevant content: Not everything needs to show up. If it’s a product search, don’t clutter results with blog posts. Keep it focused, keep it relevant.
• Highlight search terms: Bold or highlight keywords in the results. It’s a small touch that makes a big difference for users scanning the page.
• Prioritize important pages: Give your key pages – like product listings or FAQs – a higher ranking in search results. Review often to make sure you’re still surfacing what users care about.
• Feature sticky posts: Pin must-see posts to the top of search results, whether it’s a crucial update or the answer to your most asked question.
• Use plugins for customization: Plugins are a quick win for customizing search. But if you’re looking for real control, be ready to dive into advanced tools or coding tweaks.
• Modify safely with a child theme: Make search-related changes within a child theme. It keeps your edits intact while keeping future theme updates from breaking your customizations.
• Enhance with WP_Query: WP_Query is the power user’s tool for shaping search results. It’s not beginner-friendly, but it’s your best friend for custom behavior if you know your way around the code.

Need help with your custom WordPress search results page?

Fast and relevant internet site searches tie into people’s overall experience of using your website. As WordPress search is quite limited, you can use the Site Editor, a plugin, or make code changes to create WordPress custom search results pages.

The Site Editor is the simplest route to customizing WordPress search. Plugins like Ivory Search and Relevanssi take you a level higher, but they can be insufficient when you need to make detailed modifications to the search feature. In this case, coding the required search parameters can deliver the desired results.

Codeable easily meets this need and helps you shape your website’s search experience exactly how you envision it.

Why struggle with the heavy lifting or spend time hunting for WordPress developers when you can tap into Codeable’s network of experienced WordPress developers?

Advanced customization calls for specialized talent, and our developers have what it takes to help you deliver a simple, fast, and seamless site search experience.

Codeable has transparent pricing and a secure escrow payment system. All work by developers is backed by an industry-leading 28-day warranty.Find a Codeable developer to create WordPress custom search results pages quickly. Submit a project today!