[Docs][Recipes]Sourcing from Wordpress (#17374)

* [Docs][Recipes]Sourcing from Wordpress * Update docs/docs/recipes.md Co-Authored-By: Michael <184316+muescha@users.noreply.github.com> * Update docs/docs/recipes.md Co-Authored-By: Michael <184316+muescha@users.noreply.github.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * Update directions for Sourcing from WordPress * Include code for post.js * Update docs/docs/recipes.md Co-Authored-By: Marcy Sutton <marcy@gatsbyjs.com> * chore: format * remove extra character for consistency * remove unneeded query fields and set html
gatsbyjs · Oct 25, 2019 · 9ab461c · 9ab461c
1 parent e35e08d
commit 9ab461c
Showing 1 changed file with 128 additions and 0 deletions.
diff --git a/docs/docs/recipes.md b/docs/docs/recipes.md
@@ -985,6 +985,134 @@ export const pageQuery = graphql`
 - [Guide to creating pages from data programmatically](/docs/programmatically-create-pages-from-data/)
 - [Example repo](https://github.com/gatsbyjs/gatsby/tree/master/examples/recipe-sourcing-markdown) for this recipe
 
+### Sourcing from WordPress
+
+#### Prerequisites
+
+- An existing [Gatsby site](/docs/quick-start/) with a `gatsby-config.js` and `gatsby-node.js` file
+- A WordPress instance, either self-hosted or on Wordpress.com
+
+#### Directions
+
+1. Install the `gatsby-source-wordpress` plugin by running the following command:
+
+```shell
+npm install gatsby-source-wordpress --save
+```
+
+2. Configure the plugin by modifying the `gatsby-config.js` file such that it includes the following:
+
+```JS:title=gatsby-config.js
+module.exports = {
+  ...
+  plugins: [
+    {
+      resolve: `gatsby-source-wordpress`,
+      options: {
+        // baseUrl will need to be updated with your wordpress source
+        baseUrl: `wpexample.com`,
+        protocol: `https`,
+        // is it hosted on wordpress.com, or self-hosted?
+        hostingWPCOM: false,
+        // does your site use the Advanced Custom Fields Plugin?
+        useACF: false
+      }
+    },
+  ]
+}
+```
+
+> **Note:** Refer to the [`gatsby-source-wordpress` plugin docs](/packages/gatsby-source-wordpress/?=wordpre#how-to-use) to know more about configuring your plugins.
+
+3. Create a template component such as `src/templates/post.js` with the following code in it:
+
+```JS:title=post.js
+import React, { Component } from "react"
+import { graphql } from "gatsby"
+import PropTypes from "prop-types"
+
+class Post extends Component {
+  render() {
+    const post = this.props.data.wordpressPost
+
+    return (
+      <>
+        <h1>{post.title}</h1>
+        <div dangerouslySetInnerHTML={{ __html: post.content }} />
+      </>
+    )
+  }
+}
+
+Post.propTypes = {
+  data: PropTypes.object.isRequired,
+  edges: PropTypes.array,
+}
+
+export default Post
+
+export const pageQuery = graphql`
+  query($id: String!) {
+    wordpressPost(id: { eq: $id }) {
+      title
+      content
+    }
+  }
+`
+```
+
+4. Create dynamic pages for your Wordpress posts by pasting the following sample code in `gatsby-node.js`:
+
+```JS:title=gatsby-node.js
+const path = require(`path`)
+const slash = require(`slash`)
+
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions
+
+  // query content for WordPress posts
+  const result = await graphql(`
+    query {
+      allWordpressPost {
+        edges {
+          node {
+            id
+            slug
+          }
+        }
+      }
+    }
+  `)
+
+  const postTemplate = path.resolve(`./src/templates/post.js`)
+  result.data.allWordpressPost.edges.forEach(edge => {
+    createPage({
+      // `path` will be the url for the page
+      path: edge.node.slug,
+      // specify the component template of your choice
+      component: slash(postTemplate),
+      // In the ^template's GraphQL query, 'id' will be available
+      // as a GraphQL variable to query for this posts's data.
+      context: {
+        id: edge.node.id,
+      },
+    })
+  })
+}
+```
+
+5. Run `gatsby-develop` to see the newly generated pages and navigate through them.
+
+6. Open the `GraphiQL IDE` at `localhost:8000/__graphql` and open the Docs or Explorer to observe the queryable fields for `allWordpressPosts`.
+
+The dynamic pages created above in `gatsby-node.js` have unique paths for navigating to particular posts, using a template component for the posts and a sample GraphQL query to source WordPress post content.
+
+#### Additional resources
+
+- [Getting Started with WordPress and Gatsby](/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/)
+- More on [Sourcing from WordPress](/docs/sourcing-from-wordpress/)
+- [Live example on Sourcing from WordPress](/examples/gatsby-sourcing-wordpress/)
+
 ### Sourcing data from Contentful
 
 #### Prerequisites