[Tutorial #25] Search in WordPress -1: Templates

[Tutorial #25] Search in WordPress -1: Templates


In this turorial we implement the search pages in wordpress. Search is now a must feature for most well-built websites, especially for content-rich blogging sites.


There are three components for wordpress search:

  1. Getting search input with a search form.
  2. Executing search.
  3. Displaying search results.

In ModernBlackHand we will customize #1 and #3 without touching #2. (Customizing #2 requires advanced WP_Query usage).

For #1, our implementation is to display the search form as a modal (popup. See this tutorial for modal usage). The modal codes are in footer.php as below:

Line 7’s wordpress function get_searchform() includes partial template searchform.php that shows search form.

In a later tutorial we will show how to display the modal search form through menu tab.


The codes of searchform.php are as follows:

Line 1-7: language switch statement.

These codes display different search prompt languages based on the user’s browser.

Line 9-23: wordpress search form

The search form, like a typical web form, contains two components:

  1. Input area (line 11-16): place to type search term.
  2. Input button (line 18-20): button to press and execute search.

This search form follows the “User Contributed Notes” in Code example (surprisingly I couldn’t find a good documentation about it). Explanation about the syntax is:

  1. action="<?php echo home_url( '/' ); ?>" (line 9) makes the form to access the home url when the button is pressed.
  2. value="<?php echo get_search_query() ?>" (line 14) gets the user search term via function get_search_query().
  3. (line 14) name="s" together with value=search_term  tells wordpress to add the home url in #1 with parameters “s=search_term“.
  4. #1,#2,#3 together tells wordpress to access the url http://your_home_url/?s=search_term  when the button is pressed. This triggers wordpress to do the search and display search results by template search.php.
  5. Line 19 and 22 is an HTML trick to use a button and an icon as the submit button for the form.

Search Listing

As described above, after the wordpress executes the search it uses the template search.php to display results. The codes are as follows (you can also find the file on my Github):

Line 1-9: theme file description & inlude header.php

Line 10-15:  multi-language header string format

This creates a string format based on browser’s language and stores it in paramater $my_search_txt. A string format is used by functions like printf(...) in line 20 to create strings by combining a string format and paramaters.

Line 17-23: Parallax image header

See this tutorial for using parallax image effect.

Line 20 displays the header title by a string format, the PHP function printf(...) and user’s search query (via function get_search_query() ).

Line 25-40: WordPress’ the Loop

Here we again use the Loop to display search results: for search wordpress automatically puts the resulting pages and posts into the Loop.

Unlike category.php , the default wordpress search behavior looks for both pages and posts that contain our search term.

Since we only want the posts, we skip displaying the page content via line 31: <?php if( $post->post_type=='page' ) continue; /*ignore page */ ?>.  

Other codes in this loop are similar to that in category.php. See this tutorial for using various wordpress template tags.