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.
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.
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.
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.
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.
Image Captions as Overlays (SCSS)
Places Image block captions on top of the bottom of the photo with a soft dark gradient, a magazine-style look that saves vertical space.
Larger, More Readable Admin Text
Raises the font size and line height of admin tables, forms and menus for editors who find the default admin text too small.
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.
Modern Comment List Styles
Restyles the comment list as soft cards with round avatars, a highlighted post author and thin lines that show reply threads.
Modern Product Grid Cards (SCSS)
Restyles the WooCommerce shop grid into clean cards with rounded images, consistent spacing, aligned buttons and a hover effect.
Recipe Card Styles (SCSS)
Turns the [recipe_card] output into a printable card with a fact strip for times and servings, a two-column ingredient list on wide screens and numbered steps.
Rounded Pill Search Form (SCSS)
Restyles the theme search form and the Search block as a single rounded pill with an inline button and a clear focus ring.
Search Term Highlight Style (SCSS)
Gives highlighted search words a soft marker-pen look instead of the browser's default yellow box, matching the Highlight Search Terms snippet and any mark elements.
Sidebar Widgets as Cards (SCSS)
Styles each sidebar widget as a card with a border, rounded corners, an underlined title and tidy list dividers.
Softer Card Style for Dashboard Widgets
Gives dashboard widgets rounded corners, more breathing room and a colored top border, set with SCSS variables.
Spacing Utility Classes (SCSS)
Generates margin and padding helper classes such as mt-2, mb-4 and px-3 from a spacing scale, to fine-tune block spacing with an extra CSS class.
Styled Code Blocks (SCSS)
Gives code blocks and inline code in your posts a dark, readable style with rounded corners, a monospace font stack and horizontal scrolling for long lines.
Tag Cloud as Pills (SCSS)
Restyles the Tag Cloud widget and block as a tidy row of rounded pills with equal font sizes, which reads better than a jumble of sizes.
Team Grid Card Styles (SCSS)
Gives the [team] grid rounded photos, a gentle hover lift and tidy name and job title typography, with motion turned off for visitors who prefer less.
Testimonial Card Styles (SCSS)
Styles the [testimonials] grid as soft cards with a large quote mark, gold stars and a clear attribution line that adapt to light and dark themes.
Utility Classes for Blocks (SCSS)
Adds a small set of classes, such as has-shadow, is-rounded, has-hover-lift and text-balance, that editors can type into any block's "Additional CSS class" field.
Vertical Timeline Style for Groups (SCSS)
Turns the blocks inside a Group with the class "wpide-timeline" into a vertical timeline with a line and a dot for each step, for histories, roadmaps and processes.
WPForms Theme With SCSS Variables
Styles WPForms from a few SCSS variables (accent, radius, spacing, error color), including choices, buttons, errors and a dark-mode variant.