Migrating your Wordpress Blog to Frontity
Frontity is an Open Source Front-end Framework to build super fast headless Wordpress sites using React, which serves its data through the Wordpress REST API.
What will you Learn in this article
I will explain few things about REST API, What headless wordpress site means, Frontity and how to get started with it.
What do you need to know for this Course.
You need to know about Wordpress and be familiar with it.
You might to understand some basics of React to help you sync the information here.
Programming Knowledge/little coding experience
Nodejs installed on your machine. If you don't have it, you can check it here to get started
Open mind to learn
What is the REST API
The acronym REST API stands for Representational State Transfer Application Programming Interface. So, we will take it one after the other in other to make you understand the terminologies much better. REST is a set of rules (constraints ) or basically an architectural style to which is used in building web services. When a web service meets the demands of REST is considered a RESTful web service
you can read about REST here
API is a computer interface which allows communication and interactions between two machines or software applications. APIs are more of like a messenger which delivers a request to a specific provider and in return bring back the responses from the provider back to where the initial request was made.
Headless Wordpress Site, what is that?
This is simply the approach which uses the Wordpress database and backend but not the frontend user interface.
So, the headless there means that the site does not make use of the Wordpress end user interface. The site frontend can be built with any frontend technology then use the Wordpress as Backend.
Why do you need Frontity
Frontity can not be over emphasized on what you can achieve using it without knowing much about Bundling, Transpiling, Routing, Server rendering, State Management, CSS management and so on.
Frontity help you build wordpress sites using React without having to do a lot of configuration to get started as a developer.
Many Wordpress Developers before now have to go through the pain of configuration REST API in order to use React, now Frontity came in to bridge that gap and offer a seamless connection between Wordpress Developers trying to use React and React developers trying to use Wordpress so everybody wins. Frontity is purely focused on Wordpress.
Frontity have themes you can actually jump into or you can create yours by yourself if you know how to write React codes. It will also amaze Frontity have it's own Frontity's Twenty Nineteen Theme and Twenty-Twenty theme which is very similar to the Wordpress 2019/2020 themes respectively.
Let's get right into Migrating our blog to Frontity
So, i this tutorial i won't be going in details of how to create Frontity theme rather we will be using one of the Frontity created theme called Chakra
Note: you can use any of frontity theme of your choice by simply going to npm website and search using the
Go to your command line, locate your preferred directory and type
npx frontity create your-app-name
You will be asked to choose a starter theme (on the Cli frontity only provide 2 options), It is recommended that you use the
mars-theme as you are starting frontity for the first time.
? Pick a starter theme to clone:
After the project is completely created, you will have to run this code below on you Command line
cd frontity-tutorial && npx frontity dev
your site will be displaying at the http://localhost:3000
If you have used frontity before and just want to go straight using Chakra theme, you will have to clone the repository on Github then run
git clone https://github.com/chakra-ui/frontity-chakra-ui-theme
npm install && npx frontity dev
If you are attempting Frontity for the first time i would suggest you follow the first step and skip the alternative method, in other to understand how it all works.
So after your project is fully completed, you will see the whole files like in the image below in your text editor
We can now go straight to using our chakra-theme to make our blog look more great with nice feel.
Go to you Command line (if you are using VsCode, you can open your Vscode terminal there) and install the Chakra-theme
npm install frontity-chakra-theme
Then add frontity-chakra-theme to your frontity.settings.js as similar to the code below
then run your server again with
npx frontity dev
Awesome!! Your new blog is running on the Frontity Chakra theme, looking gorgeous and amazing.
Now the Frontity allows you to further redesign your site to your personal look and feel by going to the codebase and redesign your site, but we won't go much into that.
Let's add Contact form to our blog and see how it works.
We will be making use of the Frontity Contact Form 7, you won't need much configuration because frontity already handles that behind the scene.
Let's get started by first, going to our Wordpress Dashboard which serves as our backend and install the Contact form 7 in order to get the shortcode there and then use it for our frontity contact form 7.
1. Go to your wordpress Dashboard and install the Contact Form 7 plugin and activate it
2. Go to the Contact and copy the shortcode there
3. Create a Contact Page and paste the code you've copied there
After you are done with this, let us move over to our terminal and install frontity Contact Form 7 plugin so the form can actually work on our Frontity site.
Quickly go to your terminal and type
npm install frontity-contact-form-7 which you can as well check out
Setting this up requires zero configuration which frontity have already helped us get rid of.
Locate your frontity-settings.js again and add your package name which is
npm install frontity-contact-form-7 there
Then we have to add the Contact page in our frontity.settings.js
You can style your Contact page to look more better to match your theme.