plugins – Add Codepen animation as a preloader to WordPress

1) Where do I add the codepen code?

If you're using a child theme, for example, you can copy the parent theme header.php file in your child theme directory and add the required HTML code to this file after .

If you develop your own theme, place the markup where you want it.

You can also add markup with an action hook (for example, wp_footer action hook specific to a theme, if any). This could be added to your theme functions.php file or a custom plugin file. Something in this sense,

add_action (& # 39; wp_footer & # 39;; & # 39; prefix_my_preloader & # 39;); // or other appropriate hook
function prefix_my_preloader () {
?>
    
<? php }

2) Where do I add a given CSS?

Styles can be added to your theme (child) styles.css file, the client's additional css section (if available, but may not be the best option), or a custom css file located in your child directory or in the custom plugin directory. Do not forget to include styles if you are using a custom CSS file.

3) And where should I add the JS required for this to work?
like it's happening here

Scripts can be added to your theme (child) scripts.js file or a custom js file located in the directory of your theme (child) or your custom plugin. Do not forget to include scripts if you are using a custom js file.

P.S
You can also add styles and scripts with custom functions using anchor points, as shown in the accepted answer to Add CSS animation as a preloader to WordPress. You will then add these functions to your theme (child) functions.php or a custom plugin file.