"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.
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.
"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.
"You Are Offline" Notice
Shows a small notice at the bottom of the screen when the visitor loses their internet connection and hides it when the connection returns, so failed clicks make sense.
Accessible Tabs Shortcode
Adds [wpide_tabs] and [wpide_tab title="..."] shortcodes to build tabbed content that works with mouse, keyboard (arrow keys) and screen readers.
Animated Gradient Background Class
Adds a "wpide-animated-gradient" class that gives any Group or Cover block a slowly shifting multi-color gradient background, for eye-catching hero and CTA sections.
Animated Number Counter Shortcode
Adds a [wpide_counter to="2500" suffix="+"] shortcode that counts up from zero when the number scrolls into view, for statistics and milestones.
Animated Underline for Links in Posts
Replaces the plain underline on links inside post content with a thin line that thickens on hover, a subtle touch that keeps links easy to spot.
Automatic Numbering for Headings (1, 1.1, 1.2...)
Numbers the H2 and H3 headings inside any block with the class "wpide-numbered-headings" (1., 1.1, 1.2, 2.), ideal for guides, documentation and terms pages.
Automatic Table of Contents for Long Posts
Builds a clickable table of contents from the H2 and H3 headings of long posts and places it above the content, adding anchor IDs to the headings.
Before/After Image Comparison Slider
Adds a [wpide_compare before="URL" after="URL"] shortcode that overlays two images with a draggable divider, perfect for renovations, retouching and redesigns.
Bouncing "Scroll Down" Arrow on Hero Sections
Adds a gently bouncing arrow to the bottom of any Cover block with the class "wpide-scroll-hint", inviting visitors to scroll past a full-screen hero.
Breadcrumbs Shortcode
Adds a [wpide_breadcrumbs] shortcode that prints Home > Category > Post style breadcrumbs with schema.org markup, for themes that do not have them.
Call to Action in the Middle of Articles
Inserts a highlighted call-to-action box halfway through post content, where engaged readers are most likely to see it.
Clear Keyboard Focus Outlines
Shows a strong, visible outline around links, buttons and form fields when visitors navigate with the keyboard, which many themes hide. Mouse clicks are not affected.
Click-to-Call Bar on Mobile
Shows a full-width "Call us now" bar fixed to the bottom of the screen on phones, so mobile visitors can call your business with one tap.
Click-to-Copy Shortcode for Coupon Codes
Adds a [wpide_copy text="SAVE20"] shortcode that shows the code in a dashed box with a Copy button, and confirms with "Copied!" when clicked.
Collapsible Sidebar Widgets on Phones
Folds sidebar and footer widgets into tap-to-open sections on small screens, so visitors reach the content and footer without scrolling past long widget lists.
Corner Ribbons: "New", "Sale" and "Popular" (SCSS)
Adds classes that put a diagonal corner ribbon on any block (wpide-ribbon-new, wpide-ribbon-sale, wpide-ribbon-popular), handy for pricing columns and product cards.
Equal-Height Card Grid Style (SCSS)
Turns any Columns or Group block with the class "card-grid" into a responsive grid of equal-height cards with shadows and hover lift.
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.
Fix Full-Height Sections on Mobile Browsers
Makes Cover blocks and sections set to 100vh fit the visible screen on phones, where the browser's address bar otherwise hides the bottom of the section and its buttons.
Floating Social Media Icons Bar
Shows a slim bar of social media icons fixed to the side of the screen, with built-in SVG icons, accessible labels and an option to hide it on small screens.
Fluid Heading Sizes (SCSS)
Makes headings scale smoothly between mobile and desktop sizes with CSS clamp(), generated from a simple size table, so titles never look too big on phones.
Frosted Glass Card Style (SCSS)
Adds a "wpide-glass" class for a frosted-glass look (blurred, semi-transparent background and fine border), great for cards placed over photos or gradients.