How do I access a file in a directory from html in a Wordpress Site?

user_11957639 0
Viewed 42

I am trying to use reactjs components in wordpress. I was following this tutorial -

https://jhinter.medium.com/using-react-based-web-components-in-wordpress-f0d4097aca38

Until I got stuck at the last part: I have added this as an html custom block to an empty page:

<script src="/apps/csptest-component/direflowBundle.js"></script>
<csptest-component></csptest-component>

The console prints out:

GET http://www.adminprofi.com/apps/csptest-component/direflowBundle.js net::ERR_ABORTED 404 (Not Found)

I have used FTP to put the file in a folder called apps/csptest-component in the root directory of the wordpress site and I can see that the upload was successful. Do I need to change the link that the src is pointing to? Any help is appreciated!

reactjs wordpress
1 Answers

WordPress allows you to access files in the wp-content directory, so best practice would be to have a child theme setup and then you can upload your javascript to the directory: wp-content/themes/child/js and access it using http://www.adminprofi.com/wp-content/themes/child/js/direflowBundles.js .

It's recommended to use a child theme to ensure your script doesn't get removed when your theme is updated (plenty of resources on how to do this). Create a folder in here called js for tidiness.

EDIT: I think it will be easiest for you to upload your script to: /wp-content/themes/Divi/js folder, and then you can access your script like: <script src="http://www.adminprofi.com/wp-content/themes/Divi/js/yourscriptname.js"></script>

user_126823210
Related