I want to use wordpress react theme or third party react themes in frontity

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.

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.

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

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.

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:

ln -s  ./packages/frontity-chakra-theme ./node_modules/frontity-chakra-theme

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

@mburridge Thank you for your help,
Following your instructions I made changes and its work perfectly.

2 Likes

Awesome! :raised_hands:

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:

https://docs.frontity.org/guides/install-a-new-package#local-packages

Apologies for giving you advice which wasn’t best practice and hope the above link helps.

1 Like