👋Welcome

⚠️ Frontity Framework is not under active development anymore.

The team is now working on the WordPress Interactivity API. This unblocks the same UX Frontity framework enabled but directly in WordPress Core, fully compatible with the new Site Editor.

Learn Frontity step-by-step

Welcome to the Frontity step-by-step tutorial

Hi, and a very warm welcome to the Frontity step-by-step tutorial. We're thrilled that you're interested in learning Frontity.

The tutorial that you're about to embark on is a progressive sequence of lessons that will take you from first steps to mastery.

Via a practical example project it will provide you with a solid foundation in developing websites with Frontity and give you the knowledge you need to work with Frontity on your own projects. It will also arm you with the concepts and knowledge you need to better understand the other documentation resources:

Since this is a progressive tutorial we recommend that you follow the lessons in sequence, as each lesson builds on what was learned earlier.

Prerequisites

Frontity is built on React. You should therefore feel comfortable working with JavaScript, and have at least some familiarity with React and also with ES6.

If you need to get up to speed, or if you need a refresher, there are introductions to the basics of both JavaScript and React in the documentation. If you've worked through those guides, or if you're already comfortable with the concepts explained there, then you're good to go. 👌

An understanding of HTML and CSS is also assumed, as is a familiarity with the command line.

You will need to have node.js installed on your development machine. You will, of course, also need a web browser and a code editor/IDE.

No previous knowledge or understanding of Frontity is required. This step-by-step tutorial starts you off with the very basics.

The project

Our project for this step-by-step tutorial will be to build a fully working Frontity theme, starting from scratch.

Frontity provides two themes to get you started, mars-theme and twentytwenty, and there are a host of third party themes on npmjs.com that you can install into your Frontity project.

One of these could well fit your needs, but the best way to really gain an understanding of Frontity and how it works is to build your own theme.

We'll start at ground level by installing Frontity, then go on to create a theme package which we will then develop into a fully working and functional theme.

Along the way we'll cover a number of different topics, from listing posts, to displaying posts and pages, to styling our project and adding interactivity. We'll even make our project SEO friendly, refine it with some finishing touches, and make it work with Custom Post Types.

We will be there by your side guiding you through every step, right through to ultimately deploying our finished project to a live server.

👀 We'd really like you to see the project develop as you progress through the tutorial, so we're certainly not encouraging you to do this, but if you really do want to take a sneak peak at the finished project the final version can be seen in this CodeSandbox.

By the end of this tutorial you'll be a Frontity ninja! 🥷

Let's go! 👉

NextChecking your progress

Last updated