Displaying Your Roadmap

Time to read: 7 minutes

Learn how to add and customize the roadmap display on your website.

What You’ll Learn

• Using the roadmap shortcode
• All shortcode parameters
• Adding to pages and posts
• Using with page builders
• Customizing the display

The Roadmap Shortcode

Basic Usage

The simplest way to display your roadmap:

[roadmap product="main"]

Important: The product parameter is required. Use "main" for the default product.

Where to Use It

Add the shortcode to:

• Pages – Dedicated roadmap page
• Posts – In blog posts
• Widgets – Sidebar or footer
• Page Builders – Elementor, Divi, etc.

Shortcode Parameters

product (Required)

Which product roadmap to show:

[roadmap product="main"]

Free version: Only "main" available. Pro version: Any product slug.

template

Display style:

[roadmap product="main" template="board"]

Available templates:

• board – Kanban board (default, free)
• ideabox – Idea collection with voting (NEW in 1.3.0)
• timeline – Gantt chart (Pro)
• list – Simple list (Pro)
• cards – Grid of cards (Pro)
• minimal – Compact view (Pro)

Idea Box Template (v1.3.0)

[roadmap product="main" template="ideabox"]

Perfect for collecting user ideas with prominent voting.

status

Filter by status:

[roadmap product="main" status="planned"]

Multiple statuses:

[roadmap product="main" status="planned,in-progress,testing"]

category

Filter by category:

[roadmap product="main" category="feature"]

Multiple categories:

[roadmap product="main" category="feature,enhancement,bug-fix"]

limit

How many items to show:

[roadmap product="main" limit="20"]

Default: 100. Set lower for faster loading.

orderby

Sort items by:

[roadmap product="main" orderby="votes"]

Options: date, votes, title, modified, priority (Pro)

order

Sort direction:

[roadmap product="main" orderby="votes" order="desc"]

DESC – Descending (default), ASC – Ascending

Common Examples

Show All Items

[roadmap product="main"]

Most Voted Features

[roadmap product="main" orderby="votes" order="desc" limit="10"]

In-Progress Items

[roadmap product="main" status="in-progress"]

Planned Features

[roadmap product="main" status="planned" category="feature"]

Recent Updates

[roadmap product="main" orderby="modified" order="desc" limit="5"]

Adding to Pages

Gutenberg Editor

1. Edit or create a page
2. Click + to add block
3. Search for “Shortcode”
4. Add Shortcode block
5. Paste: [roadmap product="main"]
6. Click Update or Publish

Classic Editor

1. Edit or create a page
2. Switch to Text mode
3. Paste shortcode where you want roadmap
4. Click Update or Publish

Using with Page Builders

Elementor

1. Edit page with Elementor
2. Drag Shortcode widget to page
3. Paste shortcode in widget
4. Update page

WPBakery / Beaver Builder / Divi

Use the HTML, Raw HTML, or Code module and paste the shortcode.

Widget Areas

Add roadmap to sidebar or footer:

1. Go to Appearance → Widgets
2. Add Custom HTML widget
3. Paste shortcode (use limit for widgets):

[roadmap product="main" limit="5"]

Multiple Roadmaps

Different Views on Different Pages

Page 1: All items

[roadmap product="main"]

Page 2: Only planned

[roadmap product="main" status="planned"]

Page 3: Top voted

[roadmap product="main" orderby="votes" limit="10"]

Pro: Multiple Products

With Pro addon:

[roadmap product="mobile-app"]
[roadmap product="web-platform"]

Troubleshooting

Roadmap Not Showing

• Check shortcode syntax: Must include product parameter
• Correct: [roadmap product="main"]
• Wrong: [roadmap]
• Verify items exist: Go to Roadmap → All Items
• Check for errors: View page source, check browser console

Showing Wrong Items

• Verify status filter
• Check category filter
• Confirm product parameter
• Check item assignment

Styling Issues

• Clear browser cache (Ctrl+F5)
• Clear WordPress cache
• Check for CSS conflicts
• Try default theme

]]>