In the previous post, I and everyone made a sidebar for the page template on Gatsby. Then with this article we will learn how to actually create an archive template from WordPress to Gatsby.
Archive templates on Gatsby
First, go to the templates folder , create an archive.js file and then initialize the component template .
<code>
import React from 'react'
const Archive = () =>{ return()}
export default Archive;
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
Then you create a custom post type in WordPress. I will take an example to create a Blog in WordPress with the following code:
<code>
function theme_products(){
$label = array(
'name' => 'Blogs',
'singular_name' => 'Blogs' ,
'add_new' => __( 'Thêm blog', 'textdomain' ),
'add_new_item' => __( 'Tên blog', 'textdomain' ),
'new_item' => __( 'Blog mới', 'textdomain' ),
'edit_item' => __( 'Chỉnh sửa blog', 'textdomain' ),
'view_item' => __( 'Xem blog', 'textdomain' ),
'all_items' => __( 'Tất cả blog', 'textdomain' ),
'search_items' => __( 'Tìm kiếm blog', 'textdomain' ),
'featured_image' => _x( 'Hình ảnh blog', 'textdomain' ),
'set_featured_image' => _x( 'Chọn hình ảnh blog', 'textdomain' ),
'remove_featured_image' => _x( 'Xóa hình ảnh blog', 'textdomain' ),
);
$args = array(
'labels' => $label,
'description' => 'Phần blog theme',
'supports' => array(
'title',
'editor',
'thumbnail',
'custom-fields'
),
'hierarchical' => false,
'order' => 'DESC',
'orderby' => 'date',
'posts_per_page' => 30,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'show_in_rest' => true,
'rest_base' => 'blogs',
'menu_position' => 5,
'menu_icon' => 'dashicons-book-alt',
'can_export' => true,
'has_archive' => true,
'publicly_queryable' => true,
'capability_type' => 'post'
);
register_post_type('theme_products', $args);
}
add_action('init', 'theme_products');
</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><span>39</span><span>40</span><span>41</span><span>42</span><span>43</span><span>44</span><span>45</span><span>46</span>
</div>
What I know here is that I added the line
<code>'show_in_rest' => true</code><div><span>1</span></div>
This line helps to put the newly created custom post type into the default WordPress api, you can check it by enabling GraphQL in Gatsby
<code>gatsby develop</code><div><span>1</span></div>
Then you query as follows:
<code> {allWordpressWpBlogs(sort: {fields: date, order: DESC}) {
edges {
node {
id
title
slug
content
date(formatString: "DD,MMMM, YYYY")
featured_media {
source_url
}
}
}
}
}
</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>
</div>
After adding the show-in-rest line on GraphQL , the components related to the custom post type blog in the query above have an additional attribute of sorting descending by time. That is, the most recent blog post will be ranked at the top. Next, I add the date formate attribute to the date field of the Blog . There are many types of date format in GraphQL you can refer to here . The next step we will go to the file gatsby-node.js to pass Blog posts to archive.js :
<code>
.then(()=>{
graphql(`
{
allWordpressWpBlogs(sort: {fields: date, order: DESC}) {
edges {
node {
id
title
slug
content
date(formatString: "DD,MMMM, YYYY")
featured_media {
source_url
}
}
}
}
}
`).then(result =>{
if (result.errors) {
console.log(result.errors);
reject(result.errors);
}
const webPageTemplate = path.resolve('./src/templates/archive.js');
Array.from({length: numberOfPages}).forEach((page, index) => {
_.each(result.data.allWordpressWpBlogs.edges, edge => {
createPage({
path: `/${edge.node.slug}`,
component: slash(webPageTemplate),
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>
</div>
You add this paragraph after the .then() section of the page creation section in the previous post. So we have finished the first step, the rest is that you go back to archive.js , pass the pageContext and render the interface as you like.
summary
So I have finished guiding you to create an archive page for custom post type Blog . Through the next article, I will guide you to insert pagination.
Thank you for watching
