Halloween Sale 15% off Ends in See the plans

Snippet Library

Frontend & Design snippets for WordPress

Snippets that change how your site looks and behaves for visitors: a back-to-top button, announcement bars, custom fonts and styles, smooth scrolling and small layout fixes. For designers and site owners polishing the front of the site.

1–21 of 21 snippets “ip”

  • HTML Frontend & Design

    "Show More" Button for Long Sections

    Shortens any block with the class "wpide-show-more" to a preview height with a fade, and adds a "Show more" button that expands it, ideal for long descriptions and terms.

  • HTML Frontend & Design

    "Skip to Content" Link

    Adds a hidden "Skip to content" link that appears when keyboard users press Tab, letting them jump past the header and menu, for themes that lack one.

  • HTML Frontend & Design

    Back to Top Button

    Adds a small round button in the bottom corner that appears after scrolling down and takes visitors back to the top of the page.

  • HTML Frontend & Design

    Dark Mode Toggle Button

    Adds a floating moon button that switches the site to a dark color scheme, remembers the visitor's choice and follows their system setting on the first visit.

  • HTML Frontend & Design

    Dismissible Announcement Bar

    Shows a slim message bar at the top of the page (for sales, shipping notes or news) that visitors can close. It stays closed on later visits.

  • HTML Frontend & Design

    Fade-In Page Transitions

    Fades each page in as it loads and gently out when visitors follow a link to another page on your site. Turned off for people who prefer reduced motion, and pages never stay hidden if JavaScript fails.

  • HTML Frontend & Design

    Lightweight Image Lightbox

    Opens linked images in post content in a full-screen overlay instead of a new page, with keyboard and click-to-close support and no external library.

  • HTML Frontend & Design

    Monthly/Yearly Pricing Toggle

    Adds a switch that flips prices on your pricing page between monthly and yearly amounts, using simple data attributes on any element that shows a price.

  • HTML Frontend & Design

    Reading Progress Bar

    Shows a thin bar at the top of the window that fills up as the visitor scrolls through the page.

  • CSS Frontend & Design

    Reverse Column Order on Phones

    Flips the stacking order of a Columns block with the class "wpide-reverse-mobile" on phones, so an image placed on the right appears above its text instead of below.

  • HTML Frontend & Design

    Scrolling Logo Strip (Marquee)

    Turns any block with the class "wpide-marquee" (a Gallery, Row or Group of logos) into a smooth, endlessly scrolling strip that pauses on hover.

  • HTML Frontend & Design

    Turns a Group, Row, Gallery or Query Loop post list with the class "wpide-carousel" into a swipeable horizontal carousel with previous/next buttons, using native scroll snapping.

Have a snippet worth sharing?

Publish it to the library from WPIDE or right here. Sign in with any WordPress site that runs WPIDE, free or Pro. Public snippets are reviewed by the WPIDE team before they appear.