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.
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.
Brand Button Styles (SCSS)
Restyles theme and block buttons with your brand color, hover and focus states, generated from a few SCSS variables.
Brand Color for Text Selection
Changes the highlight color when visitors select text on your site to match your brand.
Briefly Highlight the Section You Jumped To
Flashes a soft highlight behind a heading or section when visitors arrive through a #link (from a table of contents or another page), so they instantly see where they landed.
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.
Consistent Form Field Styling (SCSS)
Gives text inputs, selects, text areas and checkboxes across the site (comments, contact forms, checkout) one consistent, accessible look with clear focus states.
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.
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.
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 Images as They Load
Makes content images fade in smoothly when they finish loading instead of popping in, for a more polished feel.
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 "Fixed Background" Cover Blocks on iPhone and iPad
Switches Cover blocks set to a fixed (parallax) background to a normal scrolling background on touch devices, where fixed backgrounds look blurry, zoomed or don't show at all.
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.
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.
Full-Screen Snap Scrolling Between Sections
Makes the page snap from one full-screen section to the next while scrolling, for presentation-style landing pages built from Cover or Group blocks with the class "wpide-snap".
Gradient Text Class for Headings
Adds a "wpide-gradient-text" class that fills a heading's letters with a color gradient, for standout hero titles and highlighted words.
Hide on Mobile / Hide on Desktop Classes
Adds utility classes you can put on any block (hide-on-mobile, hide-on-tablet, hide-on-desktop) to show different content on different screen sizes.
Hide the reCAPTCHA Badge
Hides the floating Google reCAPTCHA v3 badge in the bottom corner of every page.
Icon After External Links
Adds a small arrow icon after links in post content that point to other websites, so readers know they will leave your site.
Keep the Footer at the Bottom on Short Pages
Stops the footer from floating halfway up the screen on pages with little content, by letting the main area grow to fill the window. Works with block and classic themes.
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.
Mega Menu Layout for Menu Items (SCSS)
Turns the dropdown of any menu item with the CSS class "mega-menu" into a wide, multi-column panel, in classic theme menus and the Navigation block.
Nicer Line Breaks in Paragraphs and Headings
Avoids single orphan words on the last line of paragraphs and balances heading lines, using modern CSS text wrapping, for more polished typography.