Nicer Styling for Details (Accordion) Blocks
Gives the Details block and other summary/details elements a clean accordion look with a border, padding and a rotating arrow.
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.
Open Dropdown Menus With the Keyboard
Shows a classic theme's dropdown submenu while a keyboard user tabs through it, for themes whose dropdowns only open on mouse hover.
Print-Friendly Styles
Hides navigation, sidebars, comments and the admin bar when a page is printed, and prints link addresses after external links.
Reveal Blocks on Scroll
Fades and slides content blocks into view as the visitor scrolls. Add the class "reveal" to any block in the editor (Advanced > Additional CSS class) to animate it.
Reverse Column Order on Phones
Flips the stacking order of a Columns block with the class "wpide-reverse-mobile" on phones, so an image placed on the right appears above its text instead of below.
Scrollable Tables on Mobile
Lets wide tables in your content scroll sideways on small screens instead of breaking the layout or overflowing the page.
Slim Custom Scrollbar
Replaces the default browser scrollbar with a thinner one in your brand colors on desktop browsers.
Smooth Open and Close Animation for Details Blocks
Animates Details (accordion) blocks so the answer slides open and closed smoothly instead of jumping, in browsers that support animating to auto height.
Smooth Scrolling for Anchor Links
Makes in-page anchor links scroll smoothly instead of jumping, while respecting visitors who prefer reduced motion.
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.
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.
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.
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.
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.
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.