๐Ÿšจ IMPORTANT:

Checkout Frontity: https://bit.ly/frontity-webdevsimplified

Frontity is an incredible tool for creating headless WordPress sites using React. It takes all the pain of dealing with PHP and WordPress directly and wraps it up into a nice and easy to use container. In this video I will show you how to use Frontity to create a simple WordPress theme with React and also how to use React Spring to add custom page transitions to your WordPress site.

๐Ÿ“š Materials/References:

GitHub Code: https://github.com/WebDevSimplified/Frontity-Blog

๐Ÿง  Concepts Covered:

– How to create a Frontity site
– How to add page transitions in Frontity
– Why React is so much nicer to work with for WordPress themes

๐ŸŒŽ Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

โฑ๏ธ Timestamps:

00:00 – Introduction
00:41 – Demo
01:13 – Create Initial Project
04:50 – Frontity Packages Explained
08:45 – Most Important Components
09:44 – Modifying Styles
10:43 – Page Transitions
15:19 – Deployment
18:22 – Outro

#Frontity #WDS #HeadlessWordPress

source

49 Comments

  1. I'm guessing Frontity is not a good choice for headless WordPress anymore since the team was bought out by Automattic? I'm also guessing that this was a strategic move to not only acquire a great development team, but to quench the push towards headless WordPress? Are there other tools like Frontity?

  2. Cool, if you don't have a life just sitting in code, wordpress is supposed to speed up and not slow down development. Unfortunately their seems to be a block editor and theme.json going the way of clutter.

  3. If you are getting Internal Server Error on the React Spring section is it because React Spring released a new version and the code in this video no longer works for the page animations part.

    I found the answer to solve this on the React Spring GitHub:

    "Yzrsah commented 27 days ago

    @tim-soft

    The API for useTransition changed in V9 but it's not documented on react-spring.io.

    If you make these changes, it will resolve the issue.

    Remove the key selector from useTransitions(), as it's now automatic:

    const transitions = useTransition(toggle, null, {

    to

    const transitions = useTransition(toggle, {

    Call transitions instead of mapping it:

    transitions.map(({ item, key, props }) => …)

    to

    transitions((props, item, key) => …)

    @joshuaellis The issue is just a documentation issue.Yzrsah commented 27 days ago

    @tim-soft"

    Great video man. Thanks for your work.

  4. I hope you have time to reply. I have a set of users. And their data stored in my db. I want to offer a way to create a uniqe one pager . So basicly they just press a button. That then gets the info from the database, and then automaticly generates a new wordpress site. Is this possible with this? How would i get started ? Im at a loss , since there is not much info about this

  5. dude I'm so excited to use this, but it seems fairly new so I'm still worried about stability and bugs…
    after doing freelance work for a while I've just come to accept there's no faster and better value/time platform to use other than wordpress, but I just really hate the custom theme process and working with PHP, it's a big pain in the ass for me. A theme in WordPress that takes me 3 days to make would take me half a day with React because I'm much more used to it (and used it a lot with Nextjs too).

  6. This is one time following instruction that I can build it successfully on my localhost. Thanks Kyle so much. Last time I spent a bund of time to watch a series of videos of another guy. But I couldn't build it successfully and I saw my comments from his channel said them same. Kyle, you did a great job. I am a WordPress developer and I am learning React. This topic attracted me so much. So I decided to learn Mastering React course from Mosh Hamedani. Thanks a lot for your video!!!

Leave A Reply

Please enter your comment!
Please enter your name here