Smooth Scrolling for Anchor Links
Makes in-page anchor links scroll smoothly instead of jumping, while respecting visitors who prefer reduced motion.
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.
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.
Sticky Header That Shrinks on Scroll
Keeps your theme's header pinned to the top of the screen and adds a shadow and smaller padding once the visitor scrolls down.
Sticky Sidebar
Keeps the sidebar visible while visitors scroll through long posts on desktop screens, so your widgets and calls to action stay in view.
Sticky Table Headers in Admin Lists
Keeps the column headings of posts, pages, users and other admin tables visible while you scroll long lists.
Stop Phones Zooming Into Form Fields
Sets form fields to at least 16px text so iPhones stop zooming in when a field is tapped, and makes inputs full width on small screens.
Stop Sideways Scrolling on Phones
Prevents the whole page from scrolling sideways on phones when a wide image, embed or full-width block sticks out a few pixels past the screen edge.
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.
Styles for the WPIDE Form Shortcodes
Gives the contact, quote, newsletter and other WPIDE form shortcodes a clean, consistent look with full-width fields, clear notices and a solid button that follows your theme colors.
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.
Theme Button Classes on WPForms Submit Buttons
Adds your theme's button classes to every WPForms submit button, so forms match the other buttons on your site without extra CSS.
Turn Off Fluent Forms Default Styles
Stops Fluent Forms loading its default stylesheet, so forms inherit your theme's form styling or your own CSS without overrides.
Turn a Menu Item Into a Button
Styles any menu item with the CSS class "menu-button" as a solid call-to-action button, in classic theme menus and the Navigation block.
Tutor LMS: Brand Colour for Progress Bars
Recolours Tutor LMS progress bars and the course completion button to your brand colour.
Tutor LMS: CSS Classes Based on the Student's Course Status
Adds body classes such as wpide-tutor-enrolled or wpide-tutor-completed on Tutor LMS course pages, so you can show or hide elements with CSS.
Two Products per Row on Phones
Shows shop and category pages in two columns on phones instead of one long single column, so shoppers see more products without scrolling.
Use the System Font Stack
Switches the site's text to the fonts already installed on each visitor's device (San Francisco, Segoe UI, Roboto), which look native and load instantly.
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.
Wave Edge at the Bottom of Sections
Gives any Group or Cover block with the class "wpide-wave-bottom" a soft wavy bottom edge instead of a straight line, for friendlier section transitions.