I'm including a html file in my plugin, but it can't find its css or js files

Question

I'm writing this little plugin and my php file at one point includes a small html file, like this:

 function draw_editor(){
  include HANDLER_INCLUDE_URL.'/draw.html';
 }

But the problem is, that the html in turn needs some css and js files. And no matter what I try, the console shows me 404's. My folder structure looks like this: myPlugin/includes/css

The .php is in myPlugin, the html in myPlugin/includes and the css in myPlugin/includes/css

No matter what I try, the html does not find the files it needs. So far I tried:

href="css/style.css" />
href="/css/style.css" />
href="../css/style.css" />
href="style.css" />
href="../wp-content/plugins/myPlugin/includes/css/style.css" />
href="/var/www/wordpress/wp-content/myPlugin/includes/style.css" />

nothing works. If I smuggle a <?php echo(__DIR__) ?> in the html, I get /var/www/wordpress/wp-content/myPlugin/includes

Can someone please tell me what I'm doing wrong here?

Answer 1

you must use enqueue script and style commands to include wp.

for it, look at these links:

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

https://developer.wordpress.org/reference/functions/wp_enqueue_style/

also dont use hard php commands like this : <?php echo(__DIR__) ?>

there are wp commands for these jobs.

you can use below:

plugin_dir_path

plugins_url

plugin_dir_url

plugins_url