Wordpress Search Results Page Template

Posted onby admin
  1. Wordpress Search Page Template
  2. Wordpress Custom Search Results Page Template
  3. Wordpress Website Templates
  4. Wordpress Search Results Page Templates

The Search Template and The Page Template are vital to any complete WordPress Theme. And they’re both really easy to code.
For both of these Templates, we’ll start with our template-template, single.php, again. As a refresher, here’s single.php.

  • The changes you make to the Custom Search Results Layout could be as little as adding a Custom Page Title Bar section, or it might be a reworked Content Section (where the Search Results show), or Footer, or any combination of the three. Read on to learn how to build a Custom Search Results Layout in Avada, and watch the video for a visual.
  • In your WordPress admin panel go to Appearance - Editor. From the right-hand side of the Edit Themes page look for the one called Search Results (serach.php) and click on it. The search.php is a template file that represents a template that displays the search results.

But, of course, each one is going to take its own path.

The Search Template

In search.php we’re going to wrap our loop inside an IF statement—in case we don’t have any posts to loop through.

Theme Form If you do have searchform.php in your theme, it will be used instead. Keep in mind that the search form should do a GET to the homepage of your blog. The input text field should be named s and you should always include a label like in the examples above. With Toolset Blocks, you can do both of these at the same time. To get started, create a regular WordPress page (Pages → Add New). Then, add a View block and give it a name: Then, choose how you want your search results page to look and which layout you want to use. Click Add New in the upper right corner of the Search Results Site Part screen. Once you’ve created at least one Search Results Template, you will be able to manage them here. Edit An Existing Search Results’ Design. To edit an existing Search Results Template, click the Search Results label in the sidebar. This will open the Search Results Template’s details dashboard.

Wordpress Search Results Page Template

Here’s how it’ll work: IF we have posts, or, in other words, if there are posts that match the terms we’re searching for, THEN loop through them, sorta just like in index.php, but IF we don’t have posts to loop through, or, if there aren’t any posts that match our search terms, give our searchers another chance at this searching business.

In code, it would look like this:

Pretty straightforward, right? Let’s cover a few areas in the code.


First, take a look at everything between if ( have_posts() ) : (line 14) and shape_content_nav( 'nav-below' );. If there are search results, this is the markup that controls how the search results page will look. We’ll get a nice title at the top that includes the search term, followed by a listing of the posts returned in the search.

Also, shape_content_nav() works the same way here as it does in index.php.

You’ll remember get_template_part() from earlier lessons. It’s loading the file containing the actual markup for the posts returned in the search. It’ll first look for a file called “content-search.php”, but since we are not creating that file, it’ll use content.php instead. If you wanted to format your search results posts differently (just like we did for Aside posts), feel free to create a “content-search.php” file and go wild!

Next, let’s look at the code between else : (line 31) and endif; (line 35). If there are no search results to display, we want to let our visitor know, nicely. To do that, we load the same no-results.php file that we created in the index.php lesson. It sure feels great when we can resuse code without needing to actually paste it into each file.

The Search Form Template
Back in WordPress Theme Template & Directory Structure, we added searchform.php. If you want to customize the markup of your theme’s search form, this is the file you’d use to make that happen. Otherwise, searchform.php is optional. If your theme doesn’t have a searchform.php, then WordPress displays the search form with its own built-in markup.

Here’s the code to paste into searchform.php.

The Page Template

Wordpress Search Page Template

You know what the Page Template is for. WordPress thinks of it as a post out of chronological order. We think of it as, well a page. But largely, it’s defined by what it doesn’t have: all of the usual metadata (such as navigation, timestamps, categories, and tags) included a blog post.

Our Page template file will look very much like single.php. We will also place the contents of the Page loop inside content-page.php.

Wordpress Custom Search Results Page Template

First, let’s set up the Page template. Open page.php and add the following code.

Now, let’s place the markup for the actual Page inside content-page.php. Paste the following into content-page.php.

Wordpress Search Results Page Template

It’s a stripped-down version of content-single.php. We’ve omitted all of the metadata that’s associated with posts.

And with that, you’re done with this lesson. Enjoy your new Page and Search templates.

How To Create a WordPress Theme

Wordpress Website Templates

This post is part of the The ThemeShaper WordPress Theme Tutorial: 2nd Edition that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

Wordpress Search Results Page Templates

  1. Distributing Your WordPress Theme