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.
Hello ,I am new to frontity and i want to build site in react with back-end is wp, when i am using frontity which default provides the twentytwenty theme and mars theme, but i want use other theme for example https://github.com/chakra-ui/frontity-chakra-ui-theme
So, How can i use this theme after done frontity set up with default theme in local computer ,
and i have one more question is that their are many wp react themes are available can that theme also possible to use in frontity.
Pablo2
You can find the installation instructions of the Chakra UI theme in the README.md of the repo. Please let us know if you can make it work.
If they are made with React it shouldn’t be complicated to port them to Frontity or at least re-use the components and styles.
yudiz3
@Pablo Thank you for response.
Following the readme.md installation instructions i have install theme and it working fine. But the problem is that how can i modify this theme , like mars-theme which you can find in packages but i can’t find Chakra UI theme in packages folder. so can you please tell me how and where can i find this Chakra theme in my frontity project folder for changes which i like to made in theme.
I have this theme link which is wp react theme please can you confirm that this kind of theme is supported in frontity.
Pablo6
Glad to hear that you have been able to install the Chakra theme. I asked the team to provide better guidance on what’s the best way to modify the theme, we will get back to you.
That theme is not supported by Frontity. As I said, you should be able to re-use its React components or styles, but you will have to port them yourself to a Frontity theme.
mburridge7
Hi @yudiz
Move (not copy!) the frontity-chakra-theme folder from node-modules and into the packages folder, so it will be alongside mars-theme.
Next you need to create a symbolic link with the same name in the node-modules folder pointing to the new location. So you would run the following command in the root of your project:
Then change the name of the theme in frontity.setting.js:
"packages": [
{
"name": "frontity-chakra-theme",
Run npx frontity dev and you should find that your site is now using the Chakra theme, and that any changes you make to the theme in the packages folder will be reflected in your site.
Do please let us know if this works for you.
1 Like
yudiz11
@mburridge Thank you for your help,
Following your instructions I made changes and its work perfectly.
2 Likes
mburridge12
Awesome!
mburridge15
Hi @yudiz
It’s been brought to my attention that the method I gave you above to manually create a symlink is not best practice and that it will be overwritten next time you do npm install.
Here is the documentation for the recommended way to install a package as a local package: