Welcome
Last updated
Last updated
⚠️ Frontity Framework
The team is now working on . This unblocks the same UX Frontity framework enabled but directly in WordPress Core, fully compatible with the new Site Editor.
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:
- Introduction, concepts and guides
- API Reference
Since this is a progressive tutorial we recommend that you follow the lessons in sequence, as each lesson builds on what was learned earlier.
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.
An understanding of HTML and CSS is also assumed, as is a familiarity with the command line.
You will need to have 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.
Our project for this step-by-step tutorial will be to build a fully working Frontity theme, starting from scratch.
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.
By the end of this tutorial you'll be a Frontity ninja! 🥷
Let's go! 👉
Frontity provides two themes to get you started, mars-theme and twentytwenty, and there are a host of third party themes on that you can install into your Frontity project.
👀 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 .