DEV Community

Cover image for Why We Built Our Own WordPress Gallery Plugin ( A Case Study )
Artclick
Artclick

Posted on

Why We Built Our Own WordPress Gallery Plugin ( A Case Study )

We build and maintain a lot of WordPress sites, and almost every one of them eventually needs an image gallery. So we kept doing what most people do: installing a gallery plugin. And we kept running into the same handful of problems, over and over, regardless of which plugin we picked.

Eventually that turned into building our own — Artclick Gallery Lite, a free, open-source (GPLv2) WordPress plugin for responsive galleries, sliders, carousels, and lightboxes. This is the story of why we built it, the decisions that shaped it, and the parts that turned out to be harder than they looked.

Artclick Gallery Lite admin screen showing a gallery being edited, with images, captions, and a shortcode

The problem wasn't a lack of options

There's no shortage of WordPress gallery plugins. That was actually part of the problem. What we kept hitting, project after project, was some combination of:

  • A plugin with a clean grid, but you needed a second plugin for a slider and a third for a decent lightbox.
  • A plugin with a huge feature set, where the one setting you actually needed was buried three tabs deep.
  • The specific option you needed — a slider, a real lightbox, per-device column counts — locked behind a paid tier.
  • Plugin CSS and JS loading on every single page of the site, whether or not that page had a gallery on it.

None of these are fatal individually. Stacked across a site with several galleries and a handful of other plugins doing the same thing, they add up to slower pages and a more fragile stack. We wanted one focused plugin that handled the common case well: responsive grids, a slider/carousel mode, a modern lightbox, per-device layout control, and good keyboard and touch support — without needing to reach for two more plugins to fill the gaps, and without a performance tax on pages that don't even have a gallery on them.

The core decisions

A few decisions ended up shaping almost everything else about how the plugin works.

One gallery, two layouts, one data model

Grid and slider are genuinely different rendering problems — a grid just distributes images across rows and columns, while a slider has to track visible items, movement distances, transition state, and looping. Rather than treating them as two separate features, every gallery in Artclick Gallery Lite stores one set of images, captions, and responsive settings, and layout (grid vs. slider) is just a mode on top of that shared data. You can switch a gallery from a grid to a slider without rebuilding it or losing anything.

No jQuery

The frontend — slider movement, autoplay, touch and drag gestures, lightbox navigation, keyboard controls — is plain vanilla JavaScript. WordPress ships jQuery, so pulling it in is often the path of least resistance, but it's still a dependency and a chunk of bytes for a plugin that doesn't need most of what jQuery provides. Writing the interaction layer directly also meant we weren't working around jQuery's event and DOM abstractions for things the native DOM API already does directly.

Assets only load where a gallery actually exists

This is the detail that's easy to skip and genuinely matters at scale. Before rendering a page, the plugin checks whether a gallery block, shortcode, or Classic Editor gallery is actually present on it, and only enqueues its CSS and JS when one is found — covering blocks, shortcodes, widgets, and template-inserted galleries alike. A marketing page with no gallery on it shouldn't pay any part of the cost for the plugin being installed, and now it doesn't.

Standard WordPress data structures, nothing custom

Gallery data lives in a custom post type with post meta — no custom database tables. It's a smaller, more constrained approach than a bespoke schema would allow, but it means the plugin behaves the way WordPress developers already expect, plays well with standard backup and migration tools, and can clean up completely after itself: uninstalling removes the plugin's post type entries, meta, and settings without leaving anything behind.

Accessibility isn't a v2 feature

A lightbox fundamentally changes the interaction model — you're no longer just looking at a larger image, you're inside a modal overlay that has to behave like one. That means real focus management: keyboard focus moves into the lightbox on open, stays trapped inside it while it's open, and returns to whatever triggered it on close. Escape closes it. Every control has a real label, and motion respects prefers-reduced-motion. We treated this as part of what "a lightbox" means, not an accessibility pass bolted on afterward — which mattered because retrofitting focus management into an already-built interaction layer is a lot more painful than designing it in from the start.

A tour of what's actually in it

Gallery layout

Every gallery starts as a responsive grid of one to six columns, with the column count set independently for desktop, tablet, and mobile rather than one number that has to work everywhere. Images can use their original ratio or a fixed one (1:1, 4:3, 3:4, 16:9, or 3:2), with cover or contain fit. Spacing, corner radius, and a handful of hover effects round out the look without needing custom CSS.

Layout and appearance settings — grid or slider mode, per-device columns, spacing, aspect ratio, image fit, rounded corners, and hover effects

Slider and carousel

Any gallery can be switched from a grid into a slider with a single setting, no rebuilding required. From there it's autoplay with adjustable speed, looping, slide or fade transitions, and a "slides to show" count set per device — so the same gallery can be a single-image slider on mobile and a multi-item carousel on desktop. Navigation covers arrows and dots with custom colors, plus keyboard, touch-swipe, and mouse-drag support out of the box.

Slider settings — autoplay, loop, transitions, arrow and dot colors, alongside the lightbox's caption and thumbnail controls

Lightbox

Every gallery gets a fullscreen lightbox without needing a second plugin — previous/next navigation, a close button, Escape-key and click-outside closing, an image counter, and a clickable thumbnail filmstrip. An optional slideshow mode adds play/pause controls on top. It supports full keyboard navigation and touch-swipe, and the same lightbox can be turned on for ordinary images inside post and page content, not just gallery images.

Gallery management

The dedicated admin screen handles unlimited galleries from one place: drag-and-drop image reordering, per-image captions, one-click gallery duplication, and global defaults so new galleries don't start from scratch every time. Thumbnail size and every layout and appearance setting live on the same screen rather than being scattered across separate menus.

Global default settings — site-wide defaults for new galleries, thumbnail size, native lazy loading, and the content-image lightbox toggle

Multiple insertion methods

Galleries drop into content through a Gutenberg block with a live preview, a shortcode, or a Classic Editor insertion button — whichever fits your workflow. Shortcode attributes can override selected saved settings for a single placement, so the same gallery can appear differently in different spots on the site without duplicating it.

A few challenges

  • Per-device controls without a cluttered UI. Separate columns, slide counts, and layout for desktop, tablet, and mobile is more flexible than one auto-adapting layout — but three full copies of every setting makes the screen unusable. Grouping related settings and leaning on sensible defaults kept the common case simple.
  • Building the slider without a library. Transitions, looping, autoplay, resizing, touch, drag, keyboard input, and multi-slide viewports, all handled ourselves. Slower to build, but the result does exactly what this plugin needs and nothing more.
  • Keeping the admin screen manageable at all. With this much surface area, organizing settings into clearly related sections mattered more than any individual setting's design.

Where it goes from here

Version 1.0.0 covers the core, tested against WordPress 6.0+ and PHP 8.0+. From here, direction follows real usage and support requests rather than a fixed roadmap — likely areas include more layout options, deeper block-editor previews, settings import/export, more translations (Japanese ships today), and continued accessibility review as the plugin meets setups we can't test for ourselves.

Already planned for the next update: a masonry grid layout, sitting alongside the fixed-column grid. It packs images at their natural aspect ratio instead of forcing a uniform crop — the layout photographers in particular tend to want for a portfolio of mixed portrait and landscape shots.

If you maintain WordPress sites and have opinions on what a gallery plugin should and shouldn't do, I'd genuinely like to hear them — what's the one thing every gallery plugin gets wrong?


Try Artclick Gallery Lite — free

⬇ Download from the WordPress plugin directory — or see the full feature tour and live screenshots on the plugin's landing page.

Top comments (0)