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.
Snippet Library
WordPress code snippets, ready to use
3,040 free snippets from the WPIDE team and the community. Copy the code, or add any snippet to your site in one click with WPIDE.
Event Details and Upcoming Events Styles (SCSS)
Lays out the [event_details] facts as a neat two-column list and the [upcoming_events] list with bold dates, collapsing to one column on phones.
FAQ Accordion Styles (SCSS)
Styles collapsible FAQ items (from the FAQ list and ACF FAQ shortcodes, or any Details block) with dividers, a plus/minus marker and a visible keyboard focus ring.
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.
Fade-Out Effect Above Members-Only Prompts
Styles the members-only and paywall prompts from the WPIDE library with a soft fade over the last lines of the teaser and a clear call-to-action box.
Fast 404 for Missing Images, Scripts and Styles
Answers requests for missing images, CSS, JavaScript and font files with a tiny 404 instead of loading a full theme page, saving server time.
Featured Image Hover Zoom on Archives (SCSS)
Adds a gentle zoom to featured images on the blog page, archives and Query Loop blocks when visitors hover over a post, making lists feel more interactive.
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.
Fixes for Windows High Contrast (Forced Colors) Mode
Makes buttons, focus outlines, icons and custom checkboxes stay visible when visitors use Windows High Contrast or another forced-colors mode, where many themes lose borders and icons.
Flip Directional Icons in Right-to-Left Languages
Mirrors arrows, chevrons and other directional icons when the page is right-to-left, so "next" and "back" point the right way in Arabic, Hebrew and Persian.
Fluent Forms Theme With SCSS Variables
Styles Fluent Forms from a few SCSS variables for accent color, radius, spacing and errors, including checkboxes, buttons and a dark-mode variant.
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.
Font Stacks Per Language With :lang()
Switches to fonts that cover the script of the page or block language, for example Arabic, Hebrew, Japanese, Chinese, Korean, Thai and Hindi, while keeping your theme font for Latin text.
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".
Gallery Hover Zoom (SCSS)
Adds rounded corners and a gentle zoom on hover to images in Gallery blocks and classic galleries, with motion turned off for visitors who prefer reduced motion.
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.
Gravity Forms Theme With SCSS Variables
Styles Gravity Forms from a handful of SCSS variables (accent, radius, spacing, error color), including choices, multi-page progress bars, buttons and dark mode.
Hide Blocks on Mobile or Desktop With a CSS Class
Adds hide-on-mobile, hide-on-tablet and hide-on-desktop classes you can put in any block's "Additional CSS class" field to show it only on certain screen sizes.
Hide Plugin and Theme Versions in Asset URLs
Replaces the ?ver= value on plugin and theme CSS and JavaScript files with a short hash, so scanners cannot read your exact plugin versions from the page source, while caches still refresh whenever a version changes.
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 "Additional CSS Class" Field From Non-Administrators
Removes the Additional CSS class(es) field from the block Advanced panel for non-administrators, keeping authors to the styles you have designed.