About the plugin

Aha Hero Slider is a free WordPress plugin (GPLv2 or later) that creates full-width hero carousels using a dedicated Custom Post Type (aha_hero_slide) and a simple shortcode. Each slide is a CPT post: you configure the images, texts, buttons, and styles directly in the post editor. Display is controlled entirely via the shortcode [aha_hero_slider]. An optional commercial add-on, Aha Hero Slider Pro, extends the same shortcode with extra layouts and features (see Pro add-on).

Key features:

• Hero Slides CPT with fields for desktop image, mobile image, badge, headline, subtitle, and two action buttons
• Two core slide templates: Default (text + action buttons) and Image Only (full-area image with optional link). Third-party or Pro layouts can register additional templates via the plugin’s template API.
• Optional optimised image sizes (on by default under Settings → General): WordPress registers cropped variants for the slider (1870×520 desktop, 640×400 mobile for most layouts, plus a 960 px wide soft resize for the Pro “Video — full image” mobile poster). Disable the toggle if you prefer to serve originals only and manage dimensions yourself.
• Slide groups taxonomy to organize slides and show different sliders on different pages
• Global Design settings: navigation colors (arrows + dots), optional autoplay progress track/fill colors, text colors, button styles, overlay mask, and mobile content background
• Per-slide style overrides: text colors, font sizes, button colors, and border radius
• Front-end carousel in vanilla JavaScript — no jQuery and no bundled third-party carousel library
• Transitions: horizontal slide, cross-fade, or vertical slide (per shortcode)
• Loop modes: infinite loop, finite (stop at first/last), or seamless clone-based loop for smoother horizontal/vertical movement
• Optional autoplay progress: top bar or top-right circle (per shortcode)
• Configurable headline tag (title_tag): h1–h6; if you choose h1, only the first slide uses h1 and the rest use h2 for better SEO
• Responsive: separate desktop background image and mobile top strip image; touch swipe supported
• Works with any theme or page builder via shortcode
• Shortcode attributes include group, autoplay_speed, arrows, radius, transition, infinite, progress, title_tag, plus optional hex overrides: progress_track, progress_fill, arrow_bg, arrow_icon, bullet, bullet_active, and overlay controls: overlay, overlay_color, overlay_opacity (priority: shortcode → General defaults → Design → CSS defaults)

Installation

Via WordPress admin

1. Go to Plugins → Add New.
2. Search for Aha Hero Slider (or upload the plugin ZIP file).
3. Click Install now, then Activate.
4. Go to Aha Hero Slider in the admin sidebar to create your first slide.

Via FTP

1. Unzip the plugin ZIP file on your computer.
2. Connect to your server via FTP and go to wp-content/plugins.
3. Upload the aha-hero-slider folder into wp-content/plugins.
4. In the WordPress admin, go to Plugins and activate Aha Hero Slider.

Creating slides

Go to Aha Hero Slider → Hero slides → Add slide. Each slide is a WordPress post with a custom meta box containing all slide fields.

Slide template

At the top of the meta box, choose the slide template:

• Default — Shows text fields (badge, headline, subtitle) and two action buttons, each with its own link. The background image fills the slide on desktop. On mobile, the image appears as a top strip and the text content is displayed below on a configurable solid background.
• Image Only — Shows only images (desktop + mobile) and a single optional link that covers the entire slide area. No text fields or buttons.

Default template fields

• Badge — Small label displayed above the headline (e.g. “New”, “Sale”).
• Headline — Main title of the slide. The HTML tag wrapping it on the front-end is controlled by the shortcode title_tag (h1–h6, default h2); it does not change how you edit the text in the admin.
• Subtitle — Supporting text below the headline.
• Primary button — Button label + link URL + optional “open in new tab”.
• Secondary button — Second button with its own label, link, and new tab option. Only shown if both label and URL are filled.

Each text field and button has a Style expandable section where you can set per-slide colors and font sizes. These override the global defaults from the Design settings.

Images

• Background image (desktop) — Used as the full background of the slide on screens wider than 767px. Suggested upload size if you disable automatic sizes: 1248×520 px (slider inside a container) or 1870×520 px (full-screen width).
• Top image (mobile) — Shown as a top strip on screens up to 767px.
  • Default template: 320×200 px (suggested when automatic sizes are off)
  • Image Only template: 320×520 px

Slide order

Use the Order field in the Page Attributes box (right sidebar in the post editor). Lower values appear first. If all slides have the same order value, they are sorted by date (newest first).

Slide groups

Assign each slide to one or more Slide groups using the taxonomy box in the post editor sidebar. Use groups when you need different sliders on different pages. See the Slide groups section for details.

Slide groups

Slide groups is a hierarchical taxonomy (similar to categories) that lets you organize slides into named groups and filter them per shortcode. This allows you to have completely different sliders on different pages of the same site.

Creating groups

1. Go to Aha Hero Slider → Slide groups.
2. Enter a name (e.g. “Homepage”) and an optional slug (e.g. homepage). The slug is used in the shortcode.
3. Click Add new Slide group.

Assigning slides to groups

Open any slide in the editor. In the right sidebar, find the Slide groups box and check one or more groups. A slide can belong to multiple groups.

Displaying a specific group

Pass the group slug in the shortcode:

Settings

Go to Aha Hero Slider in the admin sidebar. Settings are organized in tabs: General, Design, Shortcode, and Uninstall.

General

• Enable hero slideshow output — Global on/off switch. When unchecked, all shortcodes return empty output on the frontend without removing any data.
• Hero slider images — Intro lists the exact registered sizes (desktop crop, mobile crop, and the tall mobile poster size used for Pro “Video — full image”). The checkbox Automatically generate optimised image sizes on upload controls whether those sizes are registered and used. Leave it on for smaller files on the front end; turn it off only if you always upload perfectly sized images and do not want extra variants stored in the media library.
• Actions — Shortcuts to Edit Hero slides and Manage Slide groups.
• Slide library & shortcode defaults — Default autoplay interval (ms, 0 = off), show navigation arrows, and border radius (px). Shortcode attributes override these per instance.

Design

Configure the default color palette and visual settings applied to all sliders. Per-slide Style options override text/button colors for that slide. Some colors can also be overridden per shortcode instance with hex attributes (see Shortcode reference); priority is: shortcode hex → Design setting → built-in CSS default.

Navigation

• Arrow background — Background color of the circular arrow buttons.
• Arrow icon — Color of the arrow symbol inside the button.
• Bullet — Color of the inactive pagination dots.
• Bullet (active) — Color of the active pagination dot.

Autoplay progress

• Progress track — Background / ring track for the optional autoplay progress (progress="bar" or progress="circle" in the shortcode). Leave empty to use the plugin default (semi-transparent track in CSS).
• Progress fill — Filling color for the bar or circle. Leave empty to use the default (typically aligned with the active bullet color).

Mobile (Default template)

• Content area background — On mobile, the Default template shows the image on top and text content below on a solid background. Set this color to match your text colors (default: #333333, dark neutral).

Overlay mask

An optional semi-transparent layer placed over the background image to improve text readability. Can be configured globally here or overridden per slider instance using the overlay, overlay_color, and overlay_opacity shortcode attributes.

• Enable overlay mask — Toggle to activate the overlay globally for all sliders (can be overridden per shortcode).
• Mask color — The color of the overlay (usually black or dark). Default: #000000.
• Opacity (%) — Strength of the overlay (0 = transparent, 100 = solid). Default: 40.

Default text colors

• Badge, Headline, Subtitle — Default text colors for each text element. Overridable per slide.

Default button styles

• Primary button — Background color, text color, and border radius.
• Secondary button — Background, text color, border color, and border radius.

Shortcode

Documentation-only tab: copyable shortcode, optional parameter tags, priority explanation, basic and advanced examples, the full attribute reference, and tips for page builders. Behaviour defaults are saved on General; colors on Design.

Uninstall

The Uninstall tab lets you choose whether to remove all plugin data (slides, slide groups, and settings) when the plugin is deleted from Plugins → Installed Plugins. Deactivating alone does not remove data. Media files in the library are not deleted automatically.

If Aha Hero Slider Pro is installed, the same “remove data on uninstall” preference also controls whether the Pro license option is deleted when the Pro plugin is deleted (see Pro readme).

Front-end carousel

The slider markup includes navigation prev/next buttons and a pagination list (dots) in the HTML output when there is more than one slide. JavaScript enhances behaviour: it builds the slide viewport/track, handles transitions, autoplay, swipe, keyboard on dots, and optional progress animation. Pagination uses real <button type="button"> elements for accessibility.

Progress indicator (when progress="bar" or progress="circle"): drawn with CSS custom properties --aha-hs-progress-track and --aha-hs-progress-fill. They are set from Design settings and/or shortcode hex attributes on that slider root, then fall back to the stylesheet defaults.

Arrows are hidden until you hover the slider; they fade and slide in from the sides (reduced motion: shorter transitions). With arrows="no", only the default arrow pair (direct children of the slider root) is hidden in CSS. You can add your own buttons inside slide content with classes aha-hero-slider__arrow--prev or aha-hero-slider__arrow--next if you need custom placement (use type="button").

Dynamic content: if your theme or builder injects slider HTML after load, call window.AhaHeroSlider.initOne(element) on the root .aha-hero-slider node (see plugin main.js). Each shortcode instance already initializes automatically on DOM ready.

Shortcode reference

Use the shortcode to display a hero slider on any page, post, widget, or page builder block. Place the shortcode in a Shortcode block (Gutenberg), a Shortcode widget, or directly in a text/HTML area of any page builder.

Basic examples

Multiple sliders on the same page

You can place several shortcodes on the same page. Each instance runs independently with its own carousel and unique DOM id. Use different groups to show different slide sets:

[aha_hero_slider group="homepage"]

[aha_hero_slider group="promotions" radius="12"]

[aha_hero_slider group="testimonials" autoplay_speed="3000" arrows="no"]

All available attributes

Behaviour attributes override the General tab defaults where applicable. Color attributes accept WordPress-style hex only: #rgb or #rrggbb. Overlay attributes allow per-instance overlay control (enable/disable, color, opacity). Invalid or empty values are ignored (cascade continues to Design, then built-in CSS). Each color attribute applies only to that shortcode instance via an inline style on the slider root.

In page builders

• Elementor — Add a Shortcode widget and paste the shortcode.
• Gutenberg — Add a Shortcode block and paste the shortcode.
• Bricks, Divi, Oxygen — Use the shortcode / HTML element and paste the shortcode.
• Classic editor — Paste the shortcode directly in the content.

Aha Hero Slider Pro (optional)

Aha Hero Slider Pro is a separate add-on sold at ahaplugins.com. It requires the free plugin to be installed and active. It does not replace the free plugin; it registers extra slide layouts and admin fields through the same extension points the free version exposes.

Installation and license

1. Install and activate Aha Hero Slider (free) first.
2. Install and activate Aha Hero Slider Pro from the ZIP you receive after purchase.
3. In WordPress, open Aha Hero Slider → License (tab added by Pro), paste your key, and click Validate license. Extra layouts stay disabled until the license is valid.

Extra slide layouts

With an active license, the slide editor gains additional layout tabs, for example:

• Centered text — Centered headline, subtitle, and buttons over the image.
• Text right — Right-aligned text block over the image.
• Video + text — Default-style copy with a YouTube play control; video plays inside the slide.
• Video — full image — Poster-style full image with play (or tap-to-play); pairs with the wider mobile poster size when automatic image sizes are enabled.

Pro adds a YouTube (Pro) section in the slide meta for the video layouts (URL or ID) and, for full-image video, an option to hide the default play icon and use a custom graphic in the poster image.

Shortcode: video_behavior

Pro adds the optional attribute video_behavior to [aha_hero_slider] (default hybrid). Example:

[aha_hero_slider video_behavior="lock"]

See the attribute table in the Shortcode reference for accepted values.

Video – Setup and demo

Video walkthrough for setup and plugin demonstration.