2

I have a few years worth of experience building Child Themes in WordPress, which is generally my preferred route when developing a new website as I am not a theme developer per say.

I am now doing a couple of projects which want to leverage the WP REST API, and I am looking to use the Foxhound theme, built using React js, as a parent theme.

Beyond the page template/css overloading approach to child theme-ing, I have been trying to understand how to extend the parent theme's default react app functionality to customise my child theme js functionality. I understand how to add custom fields to existing end-points, however, what I am not able to understand is how to load custom react components. Should I/Can I build a custom react app to load from my child theme? If so how can I ensure it executes after the parent theme app?

0

like with every other theme, there is no assurance a random theme can be used as a child theme unless it is explicitly specified that it supports child themes and provides APIs to let child themes manipulate it output. This is true even for "normal" themes, and double true for unexplored area like themes based on JS frameworks.

In other words, you will need to ask the theme author.

|improve this answer|||||
  • thanks for this answer. I don't agree with your statement in general. I have child-themed many (free and commercial) themes, and although some were developed with child-themeing as part of its design, they have all had their limitations. However, WordPress' framework offers a sufficient number of alternative avenues to circumvent these limitations. It is a matter of having sufficient code-awareness and imagination to achieve's one's goals. I will try to contact the theme's author. My question isn't mean to be specific to this theme, but rather if there is a method to extend react apps. – Aurovrata Apr 2 '18 at 5:25
  • "However, WordPress' framework offers a sufficient number of alternative avenues to circumvent these limitations" - Actually no. If the theme changes its html structure in new release you will have to modify your your CSS, therefor vioding the main promise of child theme - that you can upgrade the parent theme without doing modification to the child theme and without anything breaking. – Mark Kaplun Apr 2 '18 at 6:03
  • well you can still circumvent that entire template altogether with template overloading, eg write your own header.php which will be impervious to such updates. The most difficult parts to extend is js scripts due to their asynchronous nature, but these can still be dequeued as a last resort. – Aurovrata Apr 2 '18 at 6:40
0

For those who might be interested in more information on the question, I have, after much research and comparison of the 3 main reactive js frameworks (AngularJS, React, and VueJS) come to the conclusion that none of these frameworks are originally designed to implement Child-themeing as defined by WordPress.

The main obstacle is the fact these frameworks' general practice is to build js apps (compressed and minimised into single script files) which contain the HTML templates for content layout. Hence once built, these cannot be extended on the server side, nor do the frameworks provide (as yet) a mechanism to override/extend these templates on the client-side with some additional scripts.

However, it is possible to load the plugin and execute custom script files without build'ing the app before hand, and that does leave the door open to child-themeing template layouts server-side using PHP, while leveraging Javascript module patterns, it is possible to build a reactive WordPress theme that can be fully extended with a child theme.

I set about teaching myself VueJS2 (which has a shallower learning curve than Angular and React) with these excellent youtube videos, and build such a theme. I have now released this theme on GitHub for others to play with. It is compatible with multisite installations as well as a number of other plugins in order to solve a number of common tasks when building a website, 404 pages, page builders, CDN caching, multilingual content and various other.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.