Custom PHP and CSS not working as a Wordpress Plugin - Cursor

Question

I am trying to get a custom cursor working on my Wordpress website. I have it working offline with Microsoft's Visual Studio Code with the live server, but not on Wordpress. There are two files I am using for this plugin, cursor.php and cursor.css. I am using FileZilla to upload these files to the wordpress plugin folder, and activating the plugin through the WP admin panel.

My first file (cursor.php)

<?php

/**
Plugin Name:    Labrador Cursor
Version:        1.2
Author:         Labrador
License:        N/A
*/

add_action( 'wp_head', 'cool_cursor' );

function cool_cursor(){
    ?>  
    <style>
    <?php include 'cursor.css'; ?>
    </style>
    
    <script type="text/javascript">

    let mouseCursor =document.querySelector('.cursor');
      
    const cursor = document.querySelector(".cursor");
    document.addEventListener('mousemove', e => {
        cursor.style.top = e.pageY + 'px';
        cursor.style.left = e.pageX + 'px';
        })

    document.addEventListener('click', () => {
        cursor.classList.add("expand");
        setTimeout(() => {
            cursor.classList.remove("expand");
            }, 500);
    })

    </script>
    <?php
}
?>

My second file (cursor.css)

body {
  margin: 0;
  height: 100vh;
}

.cursor {
  width: 20px;
  height: 20px;
  border: 1.5px solid #0170b4;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-animation: cursorAnim .5s infinite alternate;
  animation: cursorAnim .5s infinite alternate;
}

.cursor::after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border: 2px solid black;
  border-radius: 50%;
  top: 8px;
  left: 8px;
  -webkit-transition: none;
  transition: none;
  -webkit-animation: none;
          animation: none;
}

.expand {
  -webkit-animation: cursorAnim2 0.5s forwards;
          animation: cursorAnim2 0.5s forwards;
  border: 2px solid #00b7ff;
}

@-webkit-keyframes cursorAnim {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}

@keyframes cursorAnim {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}

@-webkit-keyframes cursorAnim2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

@keyframes cursorAnim2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}
/*# sourceMappingURL=cursormain.css.map */

Does anyone know If I am missing something?

Regards,

Labrador

Answer 1

You're missing one important issue - to include css and js you should use build in wp_register_script function. Full specification is here:

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

And the key issue is to use proper path to your files - that is probably why you fail:

wp_register_script ( 'cool_cursor', plugins_url ( 'js/cool_cursor.js', __FILE__ ) );

Also - usually you add action to 'init' - not 'wp-head'

add_action('init', 'cool_cursor');