How to add a custom search vertical to your search results page in SharePoint 2013

This is a blog post in the series, “How to set up a Search Center in SharePoint 2013”. 
In the previous blog post, I showed you how to add and configure refiners to you search results page.  In this post you’ll learn:


Using a search vertical in an everyday situation
You might not have heard the term “search vertical” before, but I’m pretty sure you’ve used them several times.  So let me show you what we mean by the term "search vertical."

I like to ski, so I often search for ski-related content. When I enter the word “ski” in a search engine, I get a wide variety of search results.

Search for ski on

I am glad to see that there is much information out there on the topic of skiing, but many times I am just looking for great ski-pictures. And this is where search verticals come into play.

On the same search results page, I just click IMAGES, and in an instant my screen is filled with images of people in colorful clothing, racing down white slopes while bathing in sunshine from a clear blue sky.

IMAGES search vertical on

When I click on IMAGES, I am using a search vertical. Bing has five search verticals: WEB, IMAGES, VIDEOS, MAPS and NEWS.

All search verticals on

A search vertical filters search results so that only a certain type of search results are displayed. When I clicked on the IMAGES search vertical, the search results were filtered so that only images were displayed.


About search verticals in SharePoint 2013
In SharePoint 2013, search verticals are displayed in the Search Navigation Web Part.  There are four default search verticals: Everything, People, Conversations and Videos.

Default search verticals in SharePoint 2013

When users click on one of these search verticals, they are in fact navigating to a new page. For example, the default search results page, the Everything search vertical, uses the results.aspx page.

The Everything search vertical in SharePoint 2013

 When users click on the People search vertical, they are in fact navigating to the peopleresults.aspx page.

The People search vertical in SharePoint 2013

These are the default pages that are used for the four search verticals:

Search vertical Use this page
Everything results
People peopleresults
Conversations conversationresults
Videos videoresults

To view these pages, from the Site settings menu, select Site contents --> Pages.

Search vertical pages in Pages library

The default vertical pages all use these Web Parts:

  1. Refinement Web Part
  2. Search Box Web Part
  3. Search Navigation Web Part
  4. Search Results Web Part

Default Web Parts on search vertical page

The difference between these pages is how the Search Results Web Part is configured. To be specific: the Web Parts are configured to use different result sources.


Result sources - why setting limits is a good thing
As I explained in an earlier blog post, a result source specifies the source from where your search results can come from. For example, imagine that your search index is the cube in the image below, where you have four result sources:

  • Result source 1: search results can come from the entire cube.
  • Result source 2: search results can come only from the Bs.
  • Result source 3: search results can come only from the Cs.
  • Result source 4: search results can come only from the Ds.

Search index represented as a cube

So, by limiting from where search results can come from, you can make it easier for your users to find what they’re looking for.

In my internal search center scenario, all search results are list items that represent a type of media file, for example an article, an image or a video. I wanted to create three custom search verticals for three specific types of media files:

  • Art: list items that represent images
  • Video: list items that represent videos
  • Interop: items that represent interop articles (interop articles are a specific type of articles that we produce)

However, before I could start to create these search verticals, I had to create one result source for each custom search vertical. I showed you how to create a result source in an earlier blog article.

 This is how I defined the Art result source.

Query for Art search vertical

Remember, {searchTerms?} (contentclass:sts_listitem) path:http://<path> was the query text of the Article result source that I created earlier. To this, I added AND ContentType:Art

In our lists, we use the site column Content Type to specify the different media files. For example, all images have the value Art for Content Type.

List item with Content Type:Art

 So, by adding AND ContentType:Art  to the query text, only list items that have the value Art for Content Type will be returned in search results.

 Here are the three new result sources I created.

The three search verticals in my internal scenario

Now that I had three new result sources, I could move on to creating the custom search verticals.


How to create a custom search vertical
When you create a custom search vertical, the first thing you have to do is to create a page that the search vertical will use. To create a new page, here’s what you should do:

  1.  From the Site Settings menu, select Site contents.

Site contents

  1. Select Pages.
  2. In the Pages library, select the FILES tab --> New Document --> Page.

Select to create a new page

  1. On the Create Page page, enter a Title and a URL Name.

    In my scenario, I entered Art and art.

Enter new page properties

  1. Click Create.

Your new page is displayed in your Pages library.

New page in Pages library

Now that you have a page for your custom search vertical, you can start to create the actual search vertical. Here’s what you should do:

  1.  On the Site Settings page, click Search Settings.

Search Settings

  1. On the Search Settings page, in the Configure Search Navigation section, click Add Link.

Add Link

  1. In the Navigation Link dialog box, in the Title field, enter the search vertical title. This text will appear as the “tab” name on your search results page.

    In my scenario, I entered Art.

Enter Title for search vertical

  1. In the URL field, select Browse and select a page for your search vertical.

    In my scenario, I selected the art page I just created.

Enter URL for search vertical page

  1. Click OK to close the Navigation Link dialog Box.

  2. On the Search Settings page, in the Configure Search Navigation section, select the search verticals that you don’t want to display, and click Delete.

    In my scenario, I deleted the People, Conversations and Videos verticals, so that I was only left with the Everything and the Art search vertical.

Two search verticals

  1. Click OK to save all changes.

  2. In your Search Center, enter a query. On your search results page, your newly created search vertical is displayed.

    On my search results page, the Art vertical was displayed.

Verify that new search vertical is displayed

  1. On your search results page, click on your newly created search vertical, and verify that the URL is the same as you specified in step 4.

    In my scenario, I clicked Art, and verified that the URL was <site>/articles/Pages/art.aspx. I also noticed that 13 search results were displayed.

Verify that new search vertical page is used

  1. On your new search vertical page, select to edit the page, and then to edit the Search Results Web Part.
  2. In the Web Part tool page, click Change query. This will open a dialog box.

Change Query in Search Results Web Part

  1. In the Build Your Query dialog box, from the Select a query menu, select the result source that you created for this search vertical (what we did in the previous section).

    In my scenario, I selected Art result source (Site Collection).

Select result source

  1. Click OK and save the page.

On your new search vertical page, enter a query to verify that the correct search results are displayed.

In my scenario, I entered united airlines again, and noticed that only 11 search results were displayed.  Remember, before I changed the result source in the Search Result Web Part, 13 results were displayed. So my new vertical was working. Nice!

Verify that correct search results are displayed

In my scenario, I added two more search verticals, Video and Interop. And with that, I had completed the Search Center set up.

All search verticals in my internal scenario


What you can do after you have successfully set up a Search Center
When you have successfully set up a Search Center, the first thing you should do is to congratulate yourself on a job well done. Nice job!

However, the job usually doesn’t end there. To make the Search Center even more user-friendly, you can change the way search results are displayed, for example to display information that is specific to your company or business. You can read about how to do that in the blog series How to change the way search results are displayed in SharePoint Server 2013.