8th Jan 2021

How to start a project with Frontity

Wordpress

Written By, Kinnari Vasavda

Overview

In this article, we will learn how to get started with frontity. If you have good knowledge about WordPress and React, then you should start with Frontity which is an open-source framework and it enables you to create a frontend for a headless WordPress site based on React. It receives the data via WordPress REST-API to generate HTML displayed in the frontend, which you can configure and style according to your requirements.

Introduction:

To get started with frontity, firstly you need to install WordPress locally on a web server, or else you can use the site hosted on wordpress.com

After the installation of WordPress, you need to install Node.js. If you have not installed it earlier in your system, then install it from here and along with it npm and npx will also be installed.

It is necessary for running frontity commands during the setup and development of the project in frontity.

To check whether Node.js is installed in your system, open your terminal and run the following commands:-

Frontity setup – Theme setup

To create a new Frontity project let’s say “frontity-project” with a single command, run the below command in your terminal:

After creating the project, you need to choose among 2 Default themes i.e “Mars Theme” and “TwentyTwenty Theme”.

After Selecting the theme you need to change the directory with:

Now you are good to start a development server:

How to add custom style in frontity

We can also add a custom stylesheet in frontity project and for that, you need to create your stylesheet as given below:
frontity
Now include this custom CSS “style.css” in the src/index.js file.

How to Style Css in Js

With the help of Javascript, you can style the components in each page, with much less code and also it loads the minimum CSS required for each page which helps in improving the overall performance.

How to use Image and Background Image

Add Image:
You can add an image to your project by importing the image in the src/index.js file.

Add Background Image:
We can use background images in our project by adding background properties in styled “Css in Js”.

Conclusion

I hope this article will give you a better understanding of how to use React and WordPress together with the help of Frontity Framework. Stay connected to know more about Frontity.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd