In previous tutorials on Headless WordPress, we have covered several parts of using Gutenberg components, editing a profile and also logging using JWT tokens and social media. In this separate tutorial, we will start a new series of tutorials. In this first one, we will see how to load the posts and paginate them.
To start, open your terminal (command prompt) and place yourself in a folder where your app will reside. It can be anywhere. I’ll call my app
npx create-react-app wp-posts
Now, I’ll also add the support for SASS (SCSS) so you can style the articles yourself with ease, Axios to perform requests on our blog and Bootstrap to have a CSS Framework for quick prototyping.
Place yourself inside of the
wp-posts folder to continue.
npm install node-sass --save
Once installed, rename the
App.scss and be sure to do that as well inside of
App.js so it calls the SCSS file.
npm install axios --save
npm install bootstrap –save
Once installed, open
App.scss, delete everything and just put this:
Now, we can start working on loading the posts.
Loading and Retrieving Posts
Before we start working on our new Headless WordPress app, let’s be sure to understand how to approach this. We will try creating this app using React Hooks so we can both learn something new.
We will store articles in the state. Once we get to a page, we will load articles for that page. Since we are storing articles, we don’t want to fetch articles from the same page again.
To be sure we don’t do that, we will also store pages and articles IDs associated to each page. Then, when we get to a page, we will check if we have articles for that page.
If we do, we will just get those articles from the state. Otherwise, we will fetch new articles from our blog.
Creating the App Skeleton
Let’s now create the App Skeleton for our Headless WordPress app. This will contain all functions and the main one that we need. Then, we will go over each part and add the appropriate code.
getArticlesForPage will be used to get the articles for a page that we have already visited. We will create the logic behind it in the next code snippet.
Articles presents a React component that will show all the loaded articles and the pagination.
Inside of the
App, we are rendering the component
Articles where we are passing the current page, the articles for the current page that we got by using
getArticlesForPage, the method to set the current page and the total pages.
If you want, for practice, you can create a separate
Pagination component where you will pass the current page, method to set the current page and total pages. That way, you can separate some logic even more and make it much less complex.
Retrieving Cached Articles for a Page
Let’s now define the function
We first check if the page we request articles from is cached. If it is not, we return an empty array. The same output is in case there are no articles provided.
If we have some cached articles, we will go over the IDs that are cached for the requested page, find the articles by that ID and push it in the array of articles.
At the end, we return an array with filled articles objects.
Displaying Articles and Pagination
Let’s now define the function/component
Articles which is used to show the articles and the pagination.
We check the TotalPages property and create a button for each page. This button will call the method (state method) to set the current page to that page.
After that, we iterate through the array of articles and create an
article for each of them with some information. To see most of the data you can get, you can check the schema here.
Then, we render both the articles and the pagination.
Fetching the Posts from our Blog
To fetch the posts from our blog, we will use the
useEffect hook. We will provide dependencies to that hook so when one of those change, it will process the code again.
First, we have to check if we are already loading the posts. If we are, we won’t go further. The same goes if we already have the articles for the current page.
If we load the posts, we check for the headers. If we did not already set the total pages, we read the headers and set that to the state as well.
After that, we are merging the newly loaded articles with the old ones. We are also saving article IDs to the new page for caching purposes.
Now, if you try to go to a different page, you will see a show loading. But if you go back to another page and come back to the same page, there will be no loading.
The code here is the same as in the above examples. Once you unzip it, be sure to place yourself inside of the folder with the terminal (command prompt) and run
Loading the posts is really easy since WordPress REST API does the most work for you. But in case you wanted shortcodes to be run as well, you would need to create a custom REST API for loading posts that have shortcodes processed.
In the next tutorial, we will add the React Router and display each Article on its own page.Become a Sponsor