[ Kinh nghiệm wordpress ]

How To Use Frontity To Create A Headless WordPress Theme With React


Checkout Frontity:

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:

🧠 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:
My Courses:

⏱️ 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

Nguồn: https://grenadesandwich.com/

Xem thêm: https://grenadesandwich.com/kinh-nghiem-wordpress/

Tags: ,,,,,,,,,,,,,,,,,,,,,,,

Web Dev Simplified

29 Bình luận

  1. They’ve been acquired by Automattic

  2. High level but helpful. How about another video showing the backend with WP?

  3. unfortunately Frontity is dead now.

  4. I have a question: I can't find the public folder as we have in react for static elements like images.

  5. ok … good tutorial but was hoping to see this working along with wordpress…. how come you did not show that functionality???

  6. I am sure we cant use this framework for custom customer panel in our wp

  7. Honestly, great video!

  8. Its like Chisel/Twig, but sexy…

  9. Can this work with page builders like elementor?

  10. Bro, I have install frontity chakra theme but not displaying any images

  11. How much do you love saying Frontity a bunch of times, hahaha!

  12. Why this guy always bashes older tech stacks ??

  13. Frontity is honestly underrated…

  14. This channel deserves 5M subscribers

  15. Seems complicated, why not just stick with a WP theme?

  16. 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


    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, {


    const transitions = useTransition(toggle, {

    Call transitions instead of mapping it:

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


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

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


    Great video man. Thanks for your work.

  17. how do you import this theme into WordPress?
    i mean – how do you make your custom themes appear in the list of themes in WordPress dashboard?

  18. 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

  19. I wonder if this is sponsored video by vercel or Frontity .

  20. Do you recommend using this headless cms architecture with wordpress+woocommerce?

  21. Wow Kyle! you have content for many areas, bravo!

  22. Adding my wordpress to the source section just leads to a 404… In fact, adding wp-json to to the end of my website doesn't lead anywhere. Help!

  23. I just had one doubt, using frontify we can deploy react apps to WordPress but can we use the drag and drop feature of WordPress to modify the UI?

  24. Make a wp theme with acf and cpt

  25. Do you have availability for building a Gatsby + WordPress theme for me? I want a solution for mass building small websites using Airtable data.

  26. 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).

  27. Honestly, great technology.

  28. Do you have to deploy the project every time a user adds or changes content in the wp backend?

  29. 2:02 On a Frontity sponsored video*
    Frontity: "Do you want to see updates about Frontity?"
    Kyle : "No"
    Frontity: "Am I a joke to you?"

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *