halloween.js

Install guide · WordPress & WooCommerce

Add Halloween effects to WordPress

A header and footer code plugin is the simplest way to add the script to any WordPress or WooCommerce site, with no theme files to edit. It works with classic and block themes alike.

Steps

  1. Install a plugin that injects code into the header or footer, for example WPCode, and activate it.

  2. Open the plugin's header and footer settings. In WPCode that is Code Snippets → Header & Footer.

  3. Paste the snippet below into the Footer field and save.

The snippet

One paste, no other files. It loads halloween.js 1.0.3 from jsDelivr and turns on webs in two corners, blinking eyes, flying witches, a dropping spider and a rising tombstone. 

<script src="https://cdn.jsdelivr.net/npm/halloween.js@1.0.3/dist/halloween.iife.js"></script>
<script>
(function () {
  function apply() {
    document.body.classList.add(
       "halloween",
       "halloween-screen-left-top",
       "halloween-screen-right-bottom",
       "halloween-eyes",
       "halloween-witches",
       "halloween-spider-drop",
       "halloween-tombstones"
    );
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", apply);
  } else {
    apply();
  }
})();
</script>

Install once, then leave it. The effects switch on by themselves every year from 18 October to 2 November and stay off the rest of the time. There is nothing to remove afterwards. Installed earlier? You will see nothing until 18 October. That is expected, not a bug.

Check that it works

  1. Open your live site in a private window and reload without cache.

  2. Between 18 October and 2 November you should see webs in the screen corners and eyes blinking within a few seconds. Outside those dates the page looks unchanged.

Good to know

  • Want to test outside the season? Open the playground, set the active season to cover today and copy the snippet it generates.
  • Ambient effects stop when a visitor has reduced motion turned on. The screen-corner webs stay.
  • The effects sit in a fixed layer and never shift your page layout.
  • Prefer a child theme? Put the same snippet into a wp_footer hook in the child theme's functions.php instead of using a plugin.
  • Nothing showing in season? See troubleshooting.