Big Search

Let the user search for a major, alumni group, etc. from a curated set of content with defined keywords.

Find a bug? Create an issue.

Have an idea for a new component? Tell us.

Standard Big Search

Introduced in Version 1.0.0

Big Search Header

Type your search term below.

Not sure what to search for? Browse our categories.

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

Add a wvu-big-search partial to a template.
Add content_keys the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
- content_keys:
  title: Content Keys for Big Search
```
Add enable_keywords the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
- enable_keywords:
  type: checkbox
  title: Enable keywords?
```
Add search_action to the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
- search_action:
  title: Search action
```
Add an action to the Search Action field i.e. {directory-of-results-page}/{slug-of-search-results-page}#anchor-results in your page’s custom data.
Create a template that will display your search results using the Big Search Results component.
For your results page, list editable regions to be searched (in addition to the keywords region) in the Content Keys for Big Search field in your page’s custom data.
For each page that you want to search, check the Enable keywords box in the page’s custom data.
List keywords in the Keywords editable region at the bottom of each page to be searched.

Include the following code in your default.htm layout after your footer:

  
<r:if v1="{$enable_keywords}" v2="1" op="=">
  <r:edit_mode_only>
    <div class="container py-4">
      <h2>Keywords</h2>
      <r:editable_region name="keywords" />
    </div>
  </r:edit_mode_only>
</r:if>

When Using the Super Template

Add a big-search component to a slot.
Add content_keys the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
- content_keys:
  title: Content Keys for Big Search
```
Add enable_keywords the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
  
- enable_keywords:
  type: checkbox
  title: Enable keywords?
```
Add search_action to the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
  
- search_action:
  title: Search action
```
Add an action to the Search Action field i.e. {directory-of-results-page}/{slug-of-search-results-page}#anchor-results in your page’s custom data.
Create a page that will display your search results using the Big Search Results template.
For your results page, list editable regions to be searched (in addition to the keywords region) in the Content Keys for Big Search field in your page’s custom data.
For each page that you want to search, check the Enable keywords box in the page’s custom data.
List keywords in the Keywords editable region at the bottom of each page to be searched.

Include the following code in your default.htm layout after your footer:

  
<r:if v1="{$enable_keywords}" v2="1" op="=">
  <r:edit_mode_only>
    <div class="container py-4">
      <h2>Keywords</h2>
      <r:editable_region name="keywords" />
    </div>
  </r:edit_mode_only>
</r:if>

Element Styles

If you want to add a background image, upload your image to Files and label the image with {page-slug}-big-search-{instance-number}-background.

If you need help customizing your theme, check out our tutorials for creating a CleanSlate theme, creating a CleanSlate template using a WVU Design System component, and using the Super Template. We also have a Beginner’s Guide.

Standard Big Search

Introduced in Version 1.0.0

Another Big Search Header

Type your search term below.

Not sure what to search for? Browse our categories.

CleanSlate Implementation Notes What’s this?

When Using a Shared Partial

Add a wvu-big-search partial to a template.
Add content_keys the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
- content_keys:
  title: Content Keys for Big Search
```
Add enable_keywords the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
- enable_keywords:
  type: checkbox
  title: Enable keywords?
```
Add search_action to the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
- search_action:
  title: Search action
```
Add an action to the Search Action field i.e. {directory-of-results-page}/{slug-of-search-results-page}#anchor-results in your page’s custom data.
Create a template that will display your search results using the Big Search Results component.
For your results page, list editable regions to be searched (in addition to the keywords region) in the Content Keys for Big Search field in your page’s custom data.
For each page that you want to search, check the Enable keywords box in the page’s custom data.
List keywords in the Keywords editable region at the bottom of each page to be searched.

Include the following code in your default.htm layout after your footer:

  
<r:if v1="{$enable_keywords}" v2="1" op="=">
  <r:edit_mode_only>
    <div class="container py-4">
      <h2>Keywords</h2>
      <r:editable_region name="keywords" />
    </div>
  </r:edit_mode_only>
</r:if>

When Using the Super Template

Add a big-search component to a slot.
Add content_keys the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
- content_keys:
  title: Content Keys for Big Search
```
Add enable_keywords the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
  
- enable_keywords:
  type: checkbox
  title: Enable keywords?
```
Add search_action to the custom data attributes of any page template that will be used on pages that will get searched, like this:
```
  
- search_action:
  title: Search action
```
Add an action to the Search Action field i.e. {directory-of-results-page}/{slug-of-search-results-page}#anchor-results in your page’s custom data.
Create a page that will display your search results using the Big Search Results template.
For your results page, list editable regions to be searched (in addition to the keywords region) in the Content Keys for Big Search field in your page’s custom data.
For each page that you want to search, check the Enable keywords box in the page’s custom data.
List keywords in the Keywords editable region at the bottom of each page to be searched.

Include the following code in your default.htm layout after your footer:

  
<r:if v1="{$enable_keywords}" v2="1" op="=">
  <r:edit_mode_only>
    <div class="container py-4">
      <h2>Keywords</h2>
      <r:editable_region name="keywords" />
    </div>
  </r:edit_mode_only>
</r:if>

Element Styles

Apply these utility classes to component container:
bg-wvu-neutral--black text-white text-center wvu-bg-blend-mode-luminosity
If you want to add a background image, upload your image to Files and label the image with {page-slug}-big-search-{instance-number}-background.