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.

25–48 of 63 snippets “id”

  • JavaScript Frontend & Design

    Lazy-Load Background Images

    Loads background images only when their section is about to scroll into view, for any element marked with data-wpide-bg="image-url", saving bandwidth on long landing pages.

  • CSS Frontend & Design

    Make Whole Cards Clickable

    Makes an entire Group, Column or Query Loop card with the class "wpide-card-link" clickable, using the link in its heading, so visitors don't have to hit the small title link.

  • CSS Frontend & Design

    Shows images in any Gallery block with the class "wpide-masonry" in a Pinterest-style masonry layout, keeping each photo's natural shape instead of cropping it.

  • JavaScript Frontend & Design

    Play Videos on Hover

    Plays muted Video blocks with the class "wpide-hover-play" while the mouse is over them and pauses when it leaves, like product previews in online stores.

  • HTML Frontend & Design

    Play YouTube Links in a Lightbox

    Opens links to YouTube videos (with the class "wpide-video-lightbox" or around a thumbnail image) in a large on-page video player, and only contacts YouTube after the click.

  • CSS Frontend & Design

    Print-Friendly Styles

    Hides navigation, sidebars, comments and the admin bar when a page is printed, and prints link addresses after external links.

  • PHP Frontend & Design

    Progress Bar Shortcode

    Adds a [wpide_progress value="75" label="Funding goal"] shortcode that draws a labeled progress bar, for fundraising goals, skills or project status.

  • HTML Frontend & Design

    Reveal Blocks on Scroll

    Fades and slides content blocks into view as the visitor scrolls. Add the class "reveal" to any block in the editor (Advanced > Additional CSS class) to animate it.

  • 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

    Rotating Testimonials

    Shows the items inside any block with the class "wpide-rotator" (for example Quote blocks in a Group) one at a time, rotating every few seconds with dot buttons to pick one.

  • 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.

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.