Thinkit Workflows

Description

Give your visitors exactly what they want to know:
“What happens next?”

Thinkit Workflows turns your services into a beautiful, visual step-by-step experience—complete with images, accordion steps, time estimates, and a live progress bar. Perfect for agencies, coaches, service businesses, onboarding flows, and any process you want to demystify.

---

What This Plugin Does

Thinkit Workflows lets you:

• Create Workflows (like “Website Design Process” or “New Client Onboarding”)

• Add Steps under each workflow, each with:

  • A rich text editor for full details

  • A featured image (used on the front end)

  • A time estimate (minutes, hours, days, or weeks)

• Display everything with a shortcode:
  [workflow_process id="123"]

On the front end, visitors see:

• A responsive layout: image on the left or right on desktop, image on top on mobile

• Numbered accordion steps that they can expand and read

• A dynamic progress bar across the top that fills as they move through steps

• A total estimated duration for the entire workflow

• Per-step time estimates with a ⏱ icon for clarity

And you manage it all inside WordPress—no page builders, no external tools.

---

Key Features

🎯 Workflow & Step Structure

• Custom “Workflows” post type

  • Each workflow is its own process (e.g., “Kitchen Remodel Process,” “SEO Campaign Setup”).

  • Includes an intro/description to explain the overall journey.

• Custom “Steps” post type

  • Each step is tied to a specific workflow.

  • Full WordPress editor for step content (headings, lists, images, links, etc.).

  • Featured image per step (used for the visual panel on the front end).

  • Time estimate fields:

    • Number + unit (Minutes, Hours, Days, Weeks).

---

🧩 Beautiful Front-End Display

• Image + Accordion Layout

  • On the desktop, choose image left or image right per workflow.

  • On mobile, the image automatically stacks on top for a clean, modern look.

• Interactive Accordion Steps

  • Numbered steps (1, 2, 3, …)

  • Click to expand/collapse content.

  • As users click different steps, the main image updates to match that step.

• Progress Bar

  • A smooth progress bar stretches across the top.

  • Updates as users navigate through steps, visually showing how far along they are.

• Total Estimated Time

  • The plugin automatically converts all step durations to minutes internally.

  • Displays a clean total like:

    • “45 minutes”

    • “3 hours 30 minutes”

    • “2 days 4 hours”

    • “1 week 2 days”

---

⏱ Per-Step Time Estimates

Each step can display its own expected duration:

• Flexible units:

  • Minutes

  • Hours

  • Days

  • Weeks

• Smart labels:

  • “1 minute”, “30 minutes”

  • “1 hour”, “4 hours”

  • “1 day”, “3 days”

  • “1 week”, “2 weeks”

• The total duration is automatically calculated and displayed under the progress bar, with a clock icon.

---

🧲 Drag-and-Drop Step Ordering

• Reorder steps visually in the Steps list:

  • Drag and drop rows up or down.

  • Order is stored via menu_order and used on the front end.

• Makes it easy to:

  • Insert new steps in the middle

  • Reorder your process as it evolves

  • Keep everything clean and consistent

---

🧭 Cleaner Admin Experience

• Workflows Menu

  • Top-level “Workflows” menu in the WordPress sidebar.

  • Submenu: Steps and Settings.

• Add Steps from a Workflow

  • When editing a Workflow, there’s an “Add Steps” button.

  • Automatically pre-selects that workflow for the new step.

• Steps List Improvements

  • Columns:

    • Title

    • Workflow (the parent it belongs to)

    • Duration

  • Dropdown filter:

    • Filter steps by a specific workflow for a cleaner view.

---

🧬 Shortcodes & Copy Helpers

• Every Workflow has its own shortcode:

  • Example: [workflow_process id="123"]

• On the Workflows list screen, there’s a Shortcode column:

  • Shows the shortcode for each workflow.

  • Includes a Copy button to copy it to the clipboard instantly.

• Paste the shortcode into:

  • Pages

  • Posts

  • Custom post types

  • Page builders that accept shortcodes

---

🎨 Global Styling Controls

Under Workflows → Settings, you can set:

• Primary Color

  • Progress bar

  • Step numbers

  • Total duration highlight

• Accent Background

  • Hover state for step headers.

• Duration Text Color

  • Color for per-step time labels.

• Border Color

  • Borders around the accordion and steps.

These settings generate inline CSS that overrides the defaults—so you can easily match your brand without touching code.

---

🔐 License-Based Access & Updates

Thinkit Workflows is fully integrated with the Thinkit update server:

• License Key Activation

  • Enter your license key under Workflows → Settings → License Activation.

  • The plugin talks to the Thinkit endpoint to validate the license.

• Hard-Gated Front End

  • If the license is invalid or missing:

    • Visitors see nothing where the shortcode is placed.

    • Admins see a small notice telling them to activate the license.

• License Validation

  • Uses the Thinkit endpoint with a validate_license action.

  • The result is cached for performance and rechecked periodically.

• Automatic Updates

  • When licensed, the plugin uses Thinkit_Plugin_Updater to:

    • Check for new versions

    • Provide updated packages

    • Feed plugin details and changelog into the standard WordPress “View details” popup.

Your plugin only works fully when activated—perfect for a premium product.

---

How the Workflow Creation Process Works (for the user)

1. Install & Activate the Plugin

   • Upload thinkit-workflow-process.zip

   • Activate in Plugins.

   • Go to Workflows → Settings and enter your license key.

2. Create Your First Workflow

   • Go to Workflows → Add New.

   • Give it a title (e.g., “Our Website Design Process”).

   • Add an intro/overview using the editor.

   • Choose Image Position (left or right).

   • Publish.

3. Add Steps to the Workflow

   • On the workflow edit screen, click Add Steps.

   • For each step:

     • Enter a title (e.g., “Discovery Call”, “Design Phase”).

     • Use the editor to describe what happens in this step.

     • Set a Featured Image (this will display on the front end when that step is active).

     • Set Expected Time (e.g., “2 hours”, “3 days”, “45 minutes”).

     • Make sure the correct Workflow is selected in the sidebar.

     • Publish.

4. Reorder Steps (if needed)

   • Go to Workflows → Steps.

   • Use drag-and-drop to arrange steps in the desired order for each workflow.

5. Insert the Workflow on a Page

   • Go to Workflows → All Workflows.

   • Copy the shortcode in the Shortcode column (e.g., [workflow_process id="123"]).

   • Paste it into any page, post, or layout where you want the process displayed.

6. Customize Colors to Match Your Brand

   • Go to Workflows → Settings → Global Colors.

   • Update primary, accent, duration, and border colors.

   • Save changes.

Your workflow display will immediately reflect the new styles.

---

Perfect Use Cases

• Web agencies explaining their project process

• Marketing firms outlining campaign steps

• Home services showing how a job unfolds

• Coaches outlining onboarding programs

• SaaS companies explaining implementation or migration steps

• Lawyers, accountants, and consultants detailing engagement phases

Any time you want to reduce fear, increase clarity, and set expectations, Thinkit Workflows turns your process into a visual roadmap.