Wordpress Custom Search Page

How to build a WordPress search page for your WordPress website that visitors can use to search for content inside your website? In this article, we will see how you can create a custom WordPress custom search page using two different methods-

• by changing the search.php file
• and without coding, using a plugin.

Make sure that you have also read the best search engines for WordPress before following the instructions below.

Create a WordPress custom search page

Edit the search.php and searchform.php method

1. Using a text editor, open the page.php and save it as searchpage.php. If you do not have a page.php, you can create one based upon your Theme’s index.php template file.
   Note: The filename search.php is reserved as a special template name, so avoid its usage; the suggested searchpage.php just makes it easy to recognize in the list of files.
2. After saving it, edit the file:
   1. Delete The Loop (i.e. basically everything within your content div), leaving the div tags intact.
   2. Add a heading such as “Search Posts” or something similar. You can use an existing class from your CSS stylesheet, or create a new one.
   3. Copy the following into the content div or any other div that contains the content of your Page:

      <?php get_search_form(); ?>
      

   4. At the top of your searchpage.php, before anything else, add this to give your Search Page a heading WordPress will recognize in the Administration Screens:
      

      <?php 
      /**
       * Template Name: Search Page
       */
      ?>

3. Save the file
4. Upload the file to your theme directory (if you made changes to your style.css style sheet file, upload that, too). If you create searchpage.php from page.php in Twenty Seventeen, it would be as follows:

   <?php
   /**
    * Template Name: Search Page
    */
   
   ?>
   <?php get_header(); ?>
   
   <div class="wrap">
       <div id="primary" class="content-area">
           <main id="main" class="site-main" role="main">
           <?php get_search_form(); ?>
           </main><!-- #main -->
       </div><!-- #primary -->
   </div><!-- .wrap -->
   
   <?php get_footer();

   Based on the Search Page Template, we will create the search page.

5. In the Administration Screen, go to Pages > Add New.
6. In the title, field enter Search.
   Do not write anything in the content area.
7. While still on the same page, look for Page Attributes on the right side menu.
8. Select the drop-down menu in Template, and select Search Page.
9. Click the Publish button.

Add WordPress custom search page using ExpertRec site search

Here we will visit the steps required to add the ExpertRec Custom search engine to your website. This is one of the easiest setup processes of all the available options out there and is highly recommended.

1. Navigate to https://cse.expertrec.com/newuser?platform=cse and signup with your Google ID.
2. Enter your website’s URL when prompted. You can select a server location near you and add the URL of your sitemap if you wish to. These will be auto-detected otherwise.
3. You can play around with the settings and customize the UI as the crawl runs. Once it is complete, you can check out a fully functional demo before taking the search to your website.
4. You can take the search to your website with little to no effort. All you need to do is to paste the code snippet available on the dashboard on your website.

ExpertRec comes with more customization options that you can explore. You can read this article to find a more detailed guide on the installation and configuration.

Create a WordPress custom search page

By adding this to your website you not only get a fully customizable WordPress custom search page, but also a search result page out of the box without any additional configuration required. If you wish to make any changes, it can be done via the ExpertRec control panel without any coding.