25% off ProSNIPC25OFF

Snippet library

JavaScript snippets for WordPress.

37 free & Pro snippets and modules. Copy-paste-ready, or import in one click with SnipCraft.

JavaScriptPro

Track File Download Clicks

Fires a GA4 'file_download' event whenever a visitor clicks a link to a common document or media file extension, using navigator.sendBeacon for reliability.

#analytics#downloads#events
JavaScriptPro

Track Outbound Link Clicks

Fires a GA4 'click' event with category 'outbound' whenever a visitor clicks a link pointing to an external domain, using navigator.sendBeacon for reliability.

#analytics#events#ga4
JavaScriptPro

Lazy-Load Background Images

Uses IntersectionObserver to defer loading of CSS background images until the element is about to enter the viewport, reducing initial page weight.

#images#javascript#lazy-load
JavaScriptPro

Auto-Logout Idle Users

Redirects logged-in users to the login page after 30 minutes of browser inactivity.

#idle-timeout#security#session
JavaScript

Current Year Auto-Update

Replaces the text content of elements with class current-year or a data-current-year attribute with the live year.

#copyright#date#footer
JavaScriptPro

Reading Progress Bar

Injects a fixed top progress bar that fills as the user scrolls through the page, using requestAnimationFrame for performance.

#javascript#progress#reading
JavaScriptPro

Shrink Header on Scroll

Adds an is-shrunk class to the site header after scrolling past a threshold, reducing its padding with a CSS transition.

#animation#header#javascript
JavaScript

Auto-Resize Textareas

Dynamically expands any textarea to fit its content as the user types, eliminating the need to scroll inside the field.

#auto-resize#forms#javascript
JavaScriptPro

Lazy-Load Iframes via IntersectionObserver

Defers iframe loading until the element enters the viewport by swapping data-src to src, with an immediate fallback.

#iframe#intersection-observer#javascript
JavaScriptPro

Copy-to-Clipboard for Code Blocks

Adds a hover-activated Copy button to every pre>code element, with clipboard API and execCommand fallback.

#clipboard#code#copy
JavaScript

Open External Links in New Tab

Automatically adds target=_blank and rel=noopener noreferrer to all links pointing to external domains.

#external#javascript#links
JavaScript

Smooth Anchor Scrolling with Header Offset

Intercepts hash-link clicks and scrolls to the target element with a configurable offset for fixed headers.

#anchor#javascript#navigation
JavaScript

Back-to-Top Button

Injects a fixed back-to-top button that appears after scrolling 400px and scrolls to the top on click.

#button#javascript#navigation
JavaScriptPro

Contact Form 7: Redirect to Thank-You Page After Submission

Listens for the wpcf7mailsent DOM event and redirects the browser to a custom URL after a successful Contact Form 7 mail-sent event — no server-side changes needed.

#contact-form-7#forms#javascript
JavaScriptPro

Phone Number Input Mask for Forms

Applies a live (999) 000-0000 US phone number mask to all telephone inputs on the page as the user types, with no jQuery dependency.

#forms#input-mask#javascript
JavaScriptPro

Warn Before Leaving a Form with Unsaved Changes

Shows a browser "leave page?" warning when a user navigates away from any form that has been edited but not submitted.

#beforeunload#forms#javascript
JavaScript

Add a "Scrolled" Class to Body on Scroll

Adds a "scrolled" CSS class to the <body> element once the page is scrolled past a configurable threshold, enabling CSS-driven sticky header or nav changes.

#css#frontend#javascript
JavaScriptPro

Fade-In Page Transitions

Fades the page out before navigating to a same-origin link and fades it back in on load, creating smooth cross-page transitions without a framework.

#animation#frontend#javascript
JavaScriptPro

Disable Right-Click and Text Copying

Suppresses right-click context menus and clipboard copy events across the page to provide basic content-copy protection.

#content-protection#copyright#frontend
JavaScript

Add Show/Hide Password Toggle to Login Form

Appends a Show / Hide button beside the password field on the WordPress login page so users can reveal their password while typing.

#javascript#login#password
JavaScript

Logout Confirmation Prompt

Intercepts clicks on logout links site-wide and shows a browser confirm dialog before completing the sign-out request.

#confirmation#javascript#logout
JavaScriptPro

Track Video Play Events in GA4

Fires GA4 video_play, video_pause, and video_ended events for native HTML5 video elements on the page.

#analytics#engagement#events
JavaScriptPro

Track Form Submissions as GA4 Events

Fires a GA4 form_submit event on every form submission, capturing form ID, class, and action URL.

#analytics#conversion#events
JavaScriptPro

Track Scroll Depth as GA4 Events

Fires a GA4 scroll_depth event when the user reaches 25%, 50%, 75%, and 100% of the page.

#analytics#engagement#events