Render page template interface on Gatsby – Learn WordPress from a to z

In the previous post, I and everyone practiced using custom fields from WordPress to render the news section to Gatsby. Then today I continue to guide more deeply about page templates in Gatsby.

Initialize page and page data

I go to the dashboard in WordPress and create an About page. To aggregate information related to the website. But with this article, it’s not just about rendering data from WordPress to Gatsby like before. Which we have to make a page template. Let when the WordPress dashboard create a new page. Then on Gatsby will automatically render that page. And we don’t need to create a separate file for it.

Create page templates in Gatsby

First, I will go to the src/templates/ folder and create a file called page.js to create a layout that renders default pages from WordPress .

<code>import React from "react"
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">Page</span><span class="token punctuation">(</span><span class="token parameter punctuation">{</span><span class="token parameter"> pageContext:{edge.node}}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">  return</span> <span class="token punctuation">(
     <layout><seo title="{&lt;span" class="token parameter">pageContext.title</seo></layout></span>} /&gt;
       <h1>Hi people</h1>
     
  )
}</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span>
</div>

Then you go to the file gatsby-node.js to write a function to automatically initialize the page on gatsby

<code>exports.createPages = ({ graphql, actions }) =&gt; {
  const { createPage } = actions
}</code><div>
<span>1</span><span>2</span><span>3</span>
</div>

Surely looking at the following code, you can partly understand the structure of this function’s page creation. And you can see that on the function I have passed graphQL. That’s right, we will get the information as well as the page data using GraphQL. You start Gatsby and go to GraphQL.

gatsby develop

We test the following query with the following query, and the results returned are the data of the pages available in the WordPress dashboard.

<code>query MyQuery {
  allWordpressPage {
    edges {
      node {
        title
        slug
        content
      }
    }
  }
}
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span>
</div>

Then we go back to the file to put the data into the createPages function.

<code>const _ = require(`lodash`);
const Promise = require(`bluebird`);
const path = require(`path`);
const slash = require(`slash`);
exports.createPages = ({ graphql, actions }) =&gt; {
  const { createPage } = actions
 return new Promise((resolve, reject) =&gt; {
   graphql(
      `
        {
          allWordpressPage {
            edges {
              node {
                slug
                title
                content
              }
            }
          }
        }
      `
    ).then(result =&gt; {
        if (result.errors) {
          console.log(result.errors);
          reject(result.errors);
        }
        const pageTemplate = path.resolve("./src/templates/page.js");
        _.each(result.data.allWordpressPage.edges, edge =&gt; {
          createPage({
            path: `/${edge.node.slug}/`,
            component: slash(pageTemplate),
            context: edge.node
          });
        });
      }) 
     }
 }
}</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span><span>33</span><span>34</span><span>35</span><span>36</span><span>37</span><span>38</span>
</div>

Here I use promise mechanism to get data from graphQL. After getting the data from graphQL, each element in the array edge will be created into a page through the page.js template we created earlier. With the path is the slug of the pages created in the WordPress dashboard.

summary

That’s it, I have completed the instructions for creating a page template. You can add pages and Gatsby will automatically create the page through the template we created earlier. In the next post I will be with you. Make detailed layout for page template.

Thank you for watching