Client Stories Splide self-updates

A Custom Post Type + Splide.js carousel builder. Feature-for-feature Splide.js sibling of Client Stories Swiper — same fields, same per-slider settings, same shortcode pattern, different carousel engine under the hood. Each "Client Story" post is its own slider — add as many slides as you like (photo, subtitle, title, position, story text), and configure that slider's own look and behavior (slides-per-view, speed, pagination, autoplay, arrows, colors) right on its edit screen. Every slider gets its own unique shortcode to embed independently.

Installation

1. Upload the whole client-stories-splide folder to /wp-content/plugins/.
2. Activate "Client Stories Splide" through the Plugins screen in WordPress.
3. A new "Client Stories" menu item appears in the admin sidebar.

Safe to run alongside the Swiper-based Client Stories Swiper plugin on the same site — they use separate post types, shortcodes, settings, and asset handles, so nothing collides.

Creating a Slider

1. Go to Client Stories → Add New. Each post you create here is one slider.
2. Set the post Title (used internally in the admin list only, to identify this slider — e.g. "Homepage Testimonials").
3. In the "Slides" box, fill in one row per client story:
   • Photo — click "Upload / Browse" to upload a new photo or pick one from the Media Library.
   • Case Number — leave blank to auto-number ("CASE 01", "CASE 02", ...) based on the slide's order, or enter a number to override.
   • Subtitle — short label shown after the case number, e.g. "Sustainable Fat Loss".
   • Title — defaults to "Client Story".
   • Position — defaults to "1:1 Client".
   • Client Story — the quote/testimonial text. Defaults to the standard "pending consent" placeholder text.
4. Click "+ Add Slide" to add more client stories to this slider. Drag the handle (☰) on the left of a slide to reorder it. Click the trash icon to remove a slide.
5. In the "Carousel Settings" box (below Slides), configure this slider's own look and behavior:
   • Slide Display — "Cards" (default) shows the photo plus case number, title, position and story text below it. "Image Only" shows just the photo, full-bleed, with no text, no border and no background by default — turns the slider into a plain image carousel/gallery. Every other setting below still applies either way.
   • Slides per view (desktop, 1024px+ and mobile, below 1024px)
   • Speed (transition duration in ms)
   • Autoplay (on/off + delay) — the carousel always loops seamlessly and stays centered, and automatically repeats slides to fill "Slides Per View" when there are fewer slides than that (this isn't a toggle; it's how the carousel behaves so it never shows a half-empty row or a stalled autoplay when there are fewer slides than "Slides Per View").
   • Continuous Scroll (on/off + speed) — cards drift non-stop across the row like a ticker, instead of jumping every few seconds. Overrides Autoplay when enabled (the two aren't combined).
   • Pause on Hover (on/off) — applies to Autoplay and Continuous Scroll, whichever is active. On by default; uncheck to keep it moving even while a visitor hovers or focuses a card.
   • Pagination dots (on/off)
   • Arrows (on/off)
   • Border color, Background color, Title color, Subtitle color — Cards mode only; Image Only slides have no border or background by default.
   • Image Width, Image Max Height (px) — Image Only mode only. The photo is shown at its full aspect ratio (never cropped), scaled to this width and capped at this height; leave Max Height at 0 for no cap.
   • Custom CSS — raw CSS applied only to this slider. The field's placeholder/description shows this slider's actual wrapper ID (e.g. #csp-splide-123) to scope your rules to just this slider, e.g. #csp-splide-123 .csp-title { font-size: 24px; }.
6. Publish (or just Save Draft — the shortcode works once the post has been saved).

Displaying a Slider

Every Client Story slider has its own unique shortcode, shown in the "Shortcode" box on its edit screen (and in the Shortcode column on the Client Stories list) — click "Copy Shortcode" and paste it into any page or post:

[client_stories_splide id="123"]

The id is that specific slider's post ID, so each slider you create can be placed independently, wherever you like, with its own settings, without pulling in slides or settings from any other slider.

Fonts

Body text uses Figtree; the card title uses Outfit. Both are loaded automatically from Google Fonts when the shortcode is present on a page.

Why Splide instead of Swiper

Same feature set — this plugin exists for sites that want the lighter Splide.js engine (or want to standardize on it) instead of Swiper. Splide ships true infinite loop and centered-slide support natively, so the always-on loop/centering behavior works the same way; the one functional difference is that Splide's "slides per view" is a whole number, so a fractional value entered in Slides Per View is rounded to the nearest whole slide (Swiper supports fractional values for a partial-slide "peek" effect; Splide does not).

Updates

This plugin isn't on WordPress.org — it updates itself by checking a GitHub repository's Releases. For a public repo (the default), this works out of the box with no access token needed — GitHub's API allows unauthenticated, read-only access to a public repo's releases. A token is only needed for a private repo, or to raise the API rate limit. Client Stories → Updates shows a live "Update status" panel (installed vs. latest version, whether a token is in use, a "Check Now" button) so you can confirm it's working. Full release steps for maintainers are in VERSION-CONTROL.md; a history of what shipped in each version is in CHANGELOG.md.

The default repository (webkeith/Client-Story-Splide) is a placeholder following the same naming pattern as the Swiper plugin's repo — update GitHub Repository under Client Stories → Updates to point at wherever this plugin actually gets pushed.

Changelog

See CHANGELOG.md in the plugin folder for the full history.

1.3.1

• Removed the carousel wrapper's reserved bottom padding (was 56px, now 0).
• Image Only mode now centers the photo both horizontally and vertically within its slide box, instead of pinning it to the top-left when the slide is taller or wider than the image.

1.3.0

• Border Color, Background Color, Title Color and Subtitle Color now only apply (and only show) in Cards mode.
• Image Only mode gets its own Image Width and Image Max Height (px) fields instead — the photo scales to that width, capped at that height, always at its full aspect ratio (never cropped) — and has no border or background by default.
• Added a Pause on Hover setting (on by default) applying to Autoplay and Continuous Scroll, whichever is active — uncheck to keep it moving even while hovered/focused.

1.2.0

• Added a "Slide Display" setting to Carousel Settings: Cards (the existing photo + text layout, default) or Image Only (just the photo, full-bleed, no text) — turns any slider into a plain image carousel/gallery. All other Carousel Settings (slides per view, autoplay, continuous scroll, colors, custom CSS, etc.) still apply in either mode.

1.1.0

• Added Continuous Scroll: a non-stop, ticker-style drift across the row (via Splide's AutoScroll extension, bundled locally) instead of the timed, jump-to-next-page Autoplay. New "Continuous Scroll" on/off + speed fields in Carousel Settings. Pauses on hover/focus, then resumes. Takes over from Autoplay when enabled — the two aren't combined.

1.0.0

• Initial release: the full Client Stories Swiper v1.8.0 feature set, ported to Splide.js.
• Custom Post Type where each "Client Story" post is its own slider holding any number of slides (photo, subtitle, title, position, story text) via an add/remove/drag-to-reorder repeater.
• Every slider has its own unique shortcode and its own independent Carousel Settings: slides per view (desktop/mobile), speed, pagination, autoplay + delay, arrows, border/background/title/subtitle color, and a per-slider Custom CSS field with a copy-pasteable wrapper-ID hint.
• Centered slides and infinite looping are always on by default (not a toggle).
• Automatic slide repetition: when a slider has fewer slides than "Slides Per View", slides are cycled to fill the row (3 slides at slidesPerView 5 renders as 1, 2, 3, 1, 2), recalculated separately for mobile and desktop and capped to only what's needed.
• Self-hosted, no-token-required GitHub Releases updater with an in-dashboard "Update status" panel and manual "Check Now".
• Figtree body font / Outfit title font, default border color #00bdd6.