JavaScript snippets

Toggle between two elements in WordPress: one button switches between two content panels, for example monthly and yearly prices. No jQuery.

Show the current screen width in a corner of your WordPress front end while you are logged in, to check breakpoints. Visitors never get the code.

Shrink the WordPress header logo when the visitor scrolls, with a small plain JavaScript class toggle and a CSS transition. No jQuery.

Use JavaScript to hide element for one year. It’s perfect for banners such as cookie. You can easily change parameters and change it from 365 days to what ever you need. Your element need to have class of “element-dismiss” and you need to place button element inside

Run JavaScript once on page load and again on every resize in WordPress, throttled to one run per frame and without jQuery.

Add a class to any WordPress element after the visitor scrolls a set number of pixels, with plain JavaScript and no jQuery.

Rotate your WordPress site logo as the visitor scrolls, with a few lines of plain JavaScript that respect reduced-motion settings.

Stretch an image from inside its WordPress content column to the left or right edge of the page, with a small CSS and JavaScript snippet.

Run JavaScript on page load and window resize in WordPress without jQuery: measure an element and hand its size to CSS as a variable.

A WordPress back button shortcode that returns visitors to the previous page, and opens a fallback URL when they arrived from another site.

Add an is-visible class to WordPress elements while they are on screen and remove it when they leave, with IntersectionObserver and no jQuery.

Swap an element’s text between two values on each click in WordPress, keyboard accessible and without jQuery.

Slide content open and closed on click in WordPress with plain JavaScript instead of jQuery slideToggle, keyboard accessible and motion aware.