Implementing Custom Search Functionality in WordPress Themes
Posted on 21st June 2023
Custom search functionality is one of the most important features of a WordPress site. It allows your visitors to find the content they’re looking for quickly and easily.
In this article, we’ll show you how to add custom search functionality to your WordPress site. We’ll cover the following topics:
What is a custom search?
Why you should add custom search to your WordPress site.
How to add custom search to your WordPress site.
What is a custom search?
A custom search is a search engine that is specifically designed for a particular website or group of websites. It indexes the content of the site (or sites) and allows users to search for specific terms.
Why you should add custom search to your WordPress site.
There are a few reasons why you might want to add custom search to your WordPress site:
It makes it easier for your visitors to find the content they’re looking for.
It can help you to improve your site’s search engine optimization (SEO).
It can help you to monetize your site by adding ads to the search results.
How to add custom search to your WordPress site.
There are a few ways to add custom search to your WordPress site. We’ll cover two of the most popular methods: using a plugin, and adding the code to your theme.
Using a plugin
There are a number of plugins that you can use to add custom search to your WordPress site. We recommend using the WP Custom Search plugin. It’s easy to use and it’s free.
To use the WP Custom Search plugin, follow these steps:
Install and activate the plugin.
Configure the plugin settings.
Adding the code to your theme
If you’re comfortable working with code, you can add the custom search code to your theme. We’ll be using the Google Custom Search engine for this example.
To add the code to your theme, follow these steps:
Create a Custom Search engine.
Get the code for your Custom Search engine.
Add the code to your theme.
We hope this article has helped you to learn how to add custom search to your WordPress site.
A good rule of thumb is to use 1
Creating a Custom Search Form
The first thing you’ll need to do is create a custom search form. This can be done by creating a file called “searchform.php” in your theme’s directory.
The code for your search form will vary depending on the structure of your theme, but a basic search form might look something like this:
<form role="search" method="get" class="search-form" action="”>
<input type="search" class="search-field" placeholder="” value=”” name=”s” />
Once you have your search form created, you’ll need to add it to your theme. The easiest way to do this is to add the following code to your theme’s “header.php” file:
This will output your search form wherever you place it in your “header.php” file.
Creating a Custom Search Page
The next thing you’ll need to do is create a custom search page. This can be done by creating a file called “search.php” in your theme’s directory.
The code for your search page will again vary depending on the structure of your theme, but a basic search page might look something like this:
<?php printf( __( 'Search Results for: %s', 'textdomain' ), '‘ . get_search_query() . ‘‘ ); ?>
twentyseventeen_get_svg( array( ‘icon’ => ‘arrow-left’ ) ) . ‘‘ . __( ‘Previous page’, ‘textdomain’ ) . ‘‘,
‘next_text’ => ‘‘ . __( ‘Next page’, ‘textdomain’ ) . ‘‘ . twentyseventeen_get_svg( array( ‘icon’ => ‘arrow-right’ ) ),
‘before_page_number’ => ‘‘,
) );
else :
get_template_part( ‘template-parts/post/content’, ‘none’ );
endif; ?>
<?php
get_sidebar();
get_footer();
As you can see, the code for your custom search page will vary depending on the structure of your theme.
Adding Custom Search Functionality to Your Theme
Once you have your custom search form and search page created, you can add custom search functionality to your theme by adding the following code to your theme’s “functions.php” file:
function my_theme_search_filter( $query ) {
if ( !is_admin() && $query->is_main_query() ) {
if ( $query->is_search ) {
$query->set( ‘post_type’, array( ‘post’, ‘page’ ) );
}
}
}
add_action( ‘pre_get_posts’,’my_theme_search_filter’ );
This code will tell WordPress to search for posts and pages when a user performs a search on your site.
Customizing the Display of Search Results
Once you have added custom search functionality to your theme, you can customize the display of search results by editing your “search.php” file.
For example, if you want to display your search results in a different order than they appear on your site, you can add the following code to your “search.php” file:
‘date’,
‘order’ => ‘DESC’
);
$query = new WP_Query( $args );
?>
If you want to display your search results in a different order than they appear on your site, you can add the following code to your “search.php” file:
‘date’,
‘order’ => ‘DESC’
);
$query = new WP_Query( $args );
?>
You can also customize the number of search results that are displayed on each page by adding the following code to your “search.php” file:
10
);
$query = new WP_Query( $args );
?>
Adding Custom CSS to Your Search Results Page
If you want to add custom CSS to your search results page, you can do so by adding the following code to your “search.php” file:
.search-results {
/* Your CSS goes here */
}
Conclusion
That’s all there is to adding custom search functionality to your WordPress site. By following the steps in this article, you can easily add a custom search form and search results page to your theme.
