Back to Home

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 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 displaying at the http://localhost:3000

Alternatively

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

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

mua

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

"packages": [ 

  {      

"name": "frontity-chakra-theme"

}

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 here

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

  menu: [

["Home", "/"],           

  ["Contact", "/contact-form-7-demo"]          

],

mua

You can style your Contact page to look more better to match your theme.

Tags

Published 02 Jun 2020