❤
npm
Sign UpSign In

gatsby-wordpress-search

1.0.9 • Public • Published

Gatsby Wordpress Search

Add search functionality (powered by Lunr.js) to your Gatsby site based on Wordpress data.

The plugin filters post title, post content and all ACF fields.

Requirements

Gatsby plugin: gatsby-source-wordpress

Instructions

  1. Upload the PHP file inside the plugin folder (see GitHub) as a plugin into Wordpress. Once this is done you should be able to see the json output at "/wp-json/wp/v2/searchResults".

  2. Include the route in your gatsby-config.js

{
      resolve: "gatsby-source-wordpress",
      options: {
        ...
        includedRoutes: ["**/searchResults"]
      }
    }
  1. Install the search component
yarn add gatsby-wordpress-search
 
or
 
npm i gatsby-wordpress-search
  1. Import the component and style it.
import React from "react";
import { StaticQuery, graphql, navigate } from "gatsby";
import styled from "styled-components";
import Search from "gatsby-wordpress-search";
 
<Wrapper>
  <StaticQuery
    query={graphql`
      {
        allWordpressWpSearchResults {
          edges {
            node {
              id
              post_title
              searchData
              pathname
            }
          }
        }
      }
    `}
    render={data => {
      return (
        <Search
          data={data}
          minCharacters={4}
          contentCharacters={300}
          maxResults={10}
          placeholder='Search'
          onSelect={object => navigate(o.pathname)}
        />
      );
    }}
  />
</Wrapper>;
 
const Wrapper = styled.div`
  .container {
  }
 
  .input {
  }
 
  .suggests {
  }
 
  .suggest {
  }
 
  .suggestTitle {
  }
 
  .suggestContent {
  }
`;

Readme

Keywords

Package Sidebar

Install

npm i gatsby-wordpress-search

Repository

github.com/robinzimmer1989/gatsby-wordpress-search

Homepage

github.com/robinzimmer1989/gatsby-wordpress-search#readme

Weekly Downloads

2

Version

1.0.9

License

MIT

Unpacked Size

7.31 kB

Total Files

5

Last publish

Collaborators

  • robinzimmer1989
Try on RunKit
Report malware