# Wordpress

### Get started

Follow the [get started guide for websites](https://docs.search.io/documentation/guides/content-websites). Once your collection is up and running, you are ready to install Search.io onto your Wordpress website.

Head over to the [search interface builder](https://app.search.io/collection/integrate/app) in your console and customise the search interface to suits your needs.

For this demonstration we are going to be using the results page configuration. If you're looking to use the overlay configuration, we have a guide [here](https://www.search.io/blog/wordpress-site-search) you can checkout.

Click install and keep the two code snippets handy!

### Installation

#### Header template

The two code snippets we generated before need to be added to our theme's template files.

The first snippet will be added to our global `header.php` template file. This snippet will show the search input in the header area on every page of our site.

{% hint style="info" %}
Note that we are using a child theme for the Twenty Twenty Wordpress theme.
{% endhint %}

At the moment our header looks like this:

![](https://3882858970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVeIbtsTcQaqaNeKzLbbU%2Fuploads%2FPRHXoMW4HMHJ8ssyR1zS%2Fwordpress-header.png?alt=media\&token=b68aff51-45d3-4e0b-a895-56e5bfa50b96)

We're going to be replacing the default Wordpress search function with Search.io search.

In `header.php` place the [search input](#get-started) snippet you copied from before where you would like it. In our example we are removing all mentions of the default Wordpress site search and placing our search-input snippet after the `has_nav_menu()` function and before the `</header>`:

<details>

<summary>Click to expand example</summary>

```php
<?php
  if ( has_nav_menu( 'primary' ) || ! has_nav_menu( 'expanded' ) ) {...
?>
<div data-widget="search-input">
	<script type="application/json">
		{
		"account": "1583472911415671216",
		"collection": "searchio-wordpress",
		"endpoint": "//jsonapi-us-valkyrie.sajari.net",
		"pipeline": "website",
		"preset": "website",
		"variables": {},
		"mode": "suggestions",
		"redirect": {
			"url": "/search"
		},
		"theme": {
			"color": {
			"primary": {
				"base": "#667eea",
				"text": "#ffffff",
				"active": "#5a67d8"
			    }
			}
		}
		}
	</script>
	<noscript>This page requires JavaScript</noscript>
</div>
<script async src="https://cdn.sajari.com/embed/1/loader.js"></script>
</div><!-- .header-navigation-wrapper -->
</div><!-- .header-inner -->
</header><!-- #site-header -->
<?php
// Output the menu modal.
get_template_part( 'template-parts/modal-menu' );
```

</details>

{% hint style="info" %}
Take note of the redirect url in the above code snippet, as this will be important later.
{% endhint %}

Now we have the search input up and running in our global `header.php` template file and on every page on our site:

![](https://3882858970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVeIbtsTcQaqaNeKzLbbU%2Fuploads%2FIkErASPRNlEUm8Vbi4BA%2Fwordpress-header-installed.png?alt=media\&token=1c2e0233-ceb6-4b85-bc9b-ba1e6a83e6a4)

#### Search results page template

Our next step is to install the search results on our results page. To do this we will create a new page in our Wordpress dashboard and call it 'search' so it has the slug **/search**.

We can then create a new template file in our theme directory for our search page and call it `page-search.php`, following the [Wordpress template hierarchy](https://developer.wordpress.org/themes/basics/template-hierarchy/).

We'll then take our second code snippet, and place it in the `page-search.php` template file where we want the search results to render. In our example we are placing it right after the `get_header()` function in the main body of our page template.

<details>

<summary>Click to expand example</summary>

```php
<?php
/**
 * The template for the /search page
 */
get_header();
?>
<main id="site-content" role="main">
	<div class="section-inner">
	<h2 style="text-align:center; margin-bottom: 2rem;">
	<?php global $post;
	echo get_the_title($post->ID);
	?>
	</h2>
	<div data-widget="search-results">
		<script type="application/json">
			{
			"account": "1583472911415671216",
				"collection": "searchio-wordpress",
				"endpoint": "//jsonapi-us-valkyrie.sajari.net",
				"pipeline": "website",
				"preset": "website",
				"variables": {},
				"filters": [],
				"options": {
					"sorting": {
					"options": [
						{
						"name": "Most relevant",
						"value": ""
						},
						{
						"name": "Alphabetical: A to Z",
						"value": "title"
						},
						{
						"name": "Alphabetical: Z to A",
						"value": "-title"
						},
						{
						"name": "Date: Oldest to Newest",
						"value": "created_at"
						},
						{
						"name": "Date: Newest to Oldest",
						"value": "-created_at"
						}
					]
					},
					"results": {
					"viewType": "list",
					"showVariantImage": false,
					"imageAspectRatio": {
						"grid": 0.563,
						"list": 1
					},
					"imageObjectFit": {
						"grid": "cover",
						"list": "cover"
					}
					},
					"showViewType": true,
					"input": {
					"hide": true,
					"position": "aside"
					}
				},
				"theme": {
					"color": {
					"primary": {
						"base": "#667eea",
						"text": "#ffffff",
						"active": "#5a67d8"
					}
					}
				},
				"customClassNames": {
					"results": {
					"template": {
						"container": "list"
					}
					}
				}
				}
			</script>
			<noscript>This page requires JavaScript</noscript>
		</div>
	</div>
</main><!-- #site-content -->
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>
```

</details>

Because we set the redirect url to **/search** in our `search-input` code snippet any search from the site's header will take us to our new search page:

![](https://3882858970-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVeIbtsTcQaqaNeKzLbbU%2Fuploads%2FI2EZRhkH3F9kQMU2AdTH%2Fwordpress-search-results.png?alt=media\&token=eea5e8f1-1f78-41f4-baed-3759c0eb1772)

:tada: **That's it! You now have powerful search up and running on your Wordpress site**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.search.io/documentation/integrations/wordpress.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.