wp-guided-tourlisted

Use when adding a guided onboarding or feature-discovery tour to a WordPress admin plugin using Driver.js v1 — setting up the IIFE bundle (window.driver.js.driver), PHP backend tour config arrays (autoStart, pages, steps, element, popover), JS scope detection from URL pathname + hash (getCurrentScope, hashchange listener), localStorage-based completion tracking, CSS selector rules for WP admin elements including Tailwind bracket-notation escaping, testing selectors in browser console, and generating/updating the POT file for tour strings. Triggers: "add a guided tour to my plugin", "onboarding walkthrough in WP admin", "Driver.js setup", "highlight this admin element", "step-by-step tutorial in WP admin", "tour not starting", "tour completion not saving", "scope detection for admin pages", "add tooltips to my settings page", "first-run wizard", "window.driver.js.driver", "getCurrentScope()", "hashchange listener for tour", "localStorage tour tracking", "Tailwind selector escaping in PHP", "Driver.js popover",
mralaminahamed/wp-dev-skills · ★ 27 · Web & Frontend · score 77

Install: claude install-skill mralaminahamed/wp-dev-skills

# WordPress Admin Guided Tours (Driver.js) > **Model note:** IIFE bundle setup and PHP config scaffolding are mechanical (`haiku`). JS scope detection from URL + hash, and debugging selector mismatches against live DOM, need `sonnet`. ## When to use - "Add a guided tour to my plugin", "set up Driver.js in WordPress admin". - "Wire up tour scopes by URL/hash", "detect which page the user is on for tour routing". - "Track tour completion correctly", "fix tour firing on dismiss instead of Done". - "Test tour selectors against live DOM". **Not for:** Front-end-only SPAs or non-WordPress JS apps — requires WP admin backend context. Guided tours in themes — this skill targets plugin-owned admin pages only. ## Setup ### 1 — Vendor Driver.js Download the Driver.js v1 IIFE build (NOT the ESM build): - `driver.js.iife.js` → `assets/admin/js/driverjs/driver.js.iife.js` - `driver.css` → `assets/admin/js/driverjs/driver.css` The IIFE build exposes `window.driver.js.driver` (double namespace). Always call it as: ```js window.driver.js.driver({ ... }) ``` ### 2 — Enqueue in Asset.php ```php // Enqueue on all admin pages (is_admin() block) $this->enqueue_script( 'shopflow_guided_tour_driverjs', SHOPFLOW_ASSETS_URL . 'admin/js/driverjs/driver.js.iife.js', array() ); $this->enqueue_style( 'shopflow_guided_tour_driverjs', SHOPFLOW_ASSETS_URL . 'admin/js/driverjs/driver.css', array() ); $this->enqueue_script( 'shopflow_guided_tour', SHOPFLOW_ASSETS_URL .