NiroRoadmap – Public Product Roadmap & Kanban Board

Description

NiroRoadmap turns your WordPress site into a public product roadmap. Add roadmap items, group them into statuses such as Planned, In Progress and Completed, and publish the board on any page with a shortcode or block.

Visitors can open any item for the full details and upvote or downvote it. You find out what your users care about most, and they can see what you’re working on.

Features

• Kanban board: Items are grouped into status columns, each with its own accent color and item count.
• Item details popup: Clicking an item opens a popup with its status, tags, description and votes. It zooms out of the card in the style of macOS Quick Look.
• Voting: Anyone can upvote or downvote an item, with no account needed. Each browser can vote once per item.
• Drag and drop: Editors and administrators can drag items between columns and reorder them right on the public board.
• Sortable statuses: Drag statuses into the order you want on the admin screen. The public board uses the same order.
• Products: Run separate roadmaps for several products and show one product per board.
• Tags: Label items (e.g. Payments, Checkout). Tags are shown on each card.
• Shortcode and block: Use the [niroroadmap] shortcode or the Roadmap block.
• Responsive: On phones the columns scroll sideways with snapping.
• Accessible: Cards can be opened with the keyboard, Esc closes the popup, and the animation is replaced by a plain fade for visitors who prefer reduced motion.
• Theme-friendly: Colors, borders and spacing are CSS custom properties you can override from your theme.

Getting started

On activation, NiroRoadmap creates a Roadmap page and four statuses (Under Review, Planned, In Progress, Completed), so the board works straight away.

1. Adjust the columns under NiroRoadmap → Statuses if you like. Rename them, pick colors, and drag them into order.
2. Optionally add your products under NiroRoadmap → Products and your labels under NiroRoadmap → Tags.
3. Add items under NiroRoadmap → Add New. Give each one a status, and optionally a product and tags.
4. Visit the Roadmap page. To show the board somewhere else, use the [niroroadmap] shortcode or the Roadmap block.

Shortcode

[niroroadmap] shows every item.

[niroroadmap product="12"] shows only the items of one product. Use the term ID from **NiroRoadmap → Products**.

The older [roadmap] shortcode still works.

For developers

Filters:

• niroroadmap_show_stage_links: return true to link each column title to its status archive.
• niroroadmap_get_posts: filter the items loaded for a column.
• niroroadmap-localized_vars: filter the variables passed to the front-end scripts.

The board’s look can be changed by overriding these CSS custom properties on .nr-kanban-columns and .nr-modal-overlay: --nr-bg, --nr-card, --nr-border, --nr-text, --nr-muted, --nr-accent, --nr-radius.

Roadmap data is stored as a regular custom post type (niroroadmap_item) with the taxonomies niroroadmap_status, niroroadmap_product and niroroadmap_tag, so it works with the standard WordPress APIs.

Source code and build tools

The full source code is publicly available at github.com/codexpertio/niroroadmap.

The only compiled file is the block script in build/roadmap/. Its human-readable source ships with the plugin in app/Blocks/roadmap/. To rebuild it, run npm install and then npm run build:blocks (uses @wordpress/scripts). PHP dependencies are listed in composer.json; run composer install to install them.

Privacy

NiroRoadmap makes no requests to external services and stores no personal data. Votes are stored as plain counts on each item. To stop repeat votes, the visitor’s browser keeps a list of the items it has voted on in local storage (niroroadmap_votes). This list is never sent to the server.

Technical details