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
-
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".
-
Include the route in your gatsby-config.js
resolve: "gatsby-source-wordpress" options: ... includedRoutes: "**/searchResults"
- Install the search component
yarn add gatsby-wordpress-search or npm i gatsby-wordpress-search
- Import the component and style it.
;;;; <Wrapper> <StaticQuery query=graphql` { allWordpressWpSearchResults { edges { node { id post_title searchData pathname } } } } ` render= { return <Search data=data minCharacters=4 contentCharacters=300 maxResults=10 placeholder='Search' onSelect= /> ; } /></Wrapper>; const Wrapper = styleddiv` .container { } .input { } .suggests { } .suggest { } .suggestTitle { } .suggestContent { }`;