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 a few things about REST API, What a 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 will need to have understood 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 that allows communication and interactions between two machines or software applications. APIs are more like a messenger that delivers a request to a specific provider and in return brings 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 that 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 Wordpress as Backend.
Why do you need Frontity
Frontity can not be overemphasized on what you can achieve using it without knowing much about Bundling, Transpiling, Routing, Server rendering, State Management, CSS management, and so on.
Frontity helps 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 has 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 has its 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 into details about how to create a Frontity theme rather we will be using one of the Frontity created theme called Chakra
Note: you can use any of the frontity theme of your choice by simply going to *npm * website and search using the
frontity-theme
tag
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.
npx: installed
? Pick a starter theme to clone:
@frontity/mars-theme (recommended)
@frontity/twentytwenty-theme
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 displayed at the http://localhost:3000
Alternatively
If you have used frontity before and just want to go straight using the Chakra theme, you will have to clone the repository on Github then run
git clone https://github.com/chakra-ui/frontity-chakra-ui-theme
cd 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 greater with a nice feel.
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 a 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.
- Go to your wordpress Dashboard and install the *Contact Form 7 * plugin and activate it.
The Contact creates a tab called Contact on your Wordpress Dashboard
Go to the Contact and copy the shortcode there
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 the 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 here
Setting this up requires zero configuration which frontity has already helped us get rid of.
Locate your frontity-settings.js again and add your package name which is frontity-contact-form-7
there
"packages": [
"frontity-contact-form-7"
]
Another thing you should do is to add your contact menu on the frontity-settings.js
const settings = {
name: "chakra-react",
state: {
frontity: {
url: "https://test.frontity.io",
title: "Test Frontity Blog",
description: "WordPress installation for Frontity development"
}
},
packages: [
{
name: "frontity-chakra-theme",
state: {
theme: {
menu: [
["Home", "/"],
["Nature", "/category/nature/"],
["Travel", "/category/travel/"],
["Japan", "/tag/japan/"],
["About Us", "/about-us/"],
["Contact Us", "/contact-form-7/"]
],
socialLinks: [
["pinterest", "https://www.pinterest.com/frontity/"],
["facebook", "https://www.instagram.com/frontity/"],
["twitter", "https://www.twitter.com/frontity/"]
],
featured: {
showOnArchive: true,
showOnPost: true
}
}
}
},
{
name: "@frontity/wp-source",
state: {
source: {
api: "https://test.frontity.io/wp-json"
}
}
},
"@frontity/tiny-router",
"@frontity/html2react",
"@frontity-contact-form-7"
]
};
export default settings;
These easy steps create your frontity contact page, and you can as well further style your Contact page to look better to match your theme and looks.
Having issues with this, comment below
Top comments (0)