Post Type Buttons

Post Type Buttons lets the Search Form (VX) widget render its post-type dropdown as a row of inline buttons — the tab-style switcher most directory designs want, without a custom template.

Overview

This is an always-on integration: there is no function toggle and nothing to enable under Voxel Toolkit. The controls simply appear inside Voxel's own Search Form widget, and nothing changes until you switch them on per widget.

Key Features

• "Display as buttons" toggle in the Search Form (VX) widget — per widget, off by default
• Full-width or inline row placement
• Wrap or single-row scrolling layouts, with arrows and pointer drag
• Optional post counts and hide-empty
• Dedicated style section for the buttons and count badges
• Live preview in the Elementor editor
• Falls back to the native dropdown inside Voxel's responsive search portal

Where the Controls Live

1. Edit your Search Form (VX) widget in Elementor
2. Open the Post types section
3. Make sure the native Show post type filter is on — the button controls only appear (and only apply) when it is
4. Under the Post type buttons heading, switch on Display as buttons

Settings

Control	Options	Notes
Display as buttons	Yes / No (default No)	Replaces the post type dropdown with inline buttons
Row width	Full width (own row) / Inline with other filters	Full width pushes the other filters to wrap below the button row; inline sits alongside them like a regular filter
Layout	Single row (scroll) (default) / Wrap to new line	Single row shows scroll arrows when the buttons overflow
Scroll interaction	Arrows + drag (default) / Arrows only / Drag only	Single-row layout only. Drag is mouse/pen; touch keeps native swiping
Show post counts	Yes / No	Adds a published-post count badge to each button
Hide empty post types	Yes / No	Requires counts on; hides buttons for post types with no published posts

While buttons are enabled, the native "Post type filter width" control is hidden (it doesn't apply), and the widget's normal Filter Margin spacing also applies to the button row so the gutters stay consistent.

Styling

A Post type buttons style section is added to the widget's General tab, just after the Search button section:

• Button row — gap between buttons, alignment (left/centre/right), both responsive
• Buttons — padding, height, icon size
• Button colors — Inactive and Active tabs, each with background, text and icon colour, and border colour (plus hover states). By default the active button uses your theme's accent colour
• Post count badge — font size, border radius, and separate background/text colours for the active and inactive buttons (shown only when counts are on)

Behaviour

• The active post type gets the standard Voxel active-button styling, and switching buttons drives the same search behaviour as the dropdown did
• In single-row mode, arrows only appear when the row actually overflows, and the active button is scrolled into view automatically
• Editor live preview — the buttons render inside the Elementor editor and update as you change the controls
• Responsive portal fallback — inside Voxel's responsive search portal (the full-screen mobile search), the buttons stand down and the native dropdown is shown instead, since a wide button row doesn't fit that layout

Standalone plugin compatibility

If the standalone Voxel Post Type Buttons plugin is active, the toolkit copy stands down and the standalone one runs. The control IDs are identical, so widgets configured with either keep working.

Troubleshooting

The Controls Don't Appear

• They live in the Search Form (VX) widget's Post types section, and only when Show post type filter is enabled

Buttons Don't Show on Mobile

• Inside Voxel's responsive search portal the native dropdown is used deliberately — that's the fallback, not a bug

Counts Look Wrong

• Counts are published posts per post type; check for posts in other statuses

Requirements

• Voxel Theme with the Search Form (VX) widget in use
• Voxel Toolkit plugin (always on — no toggle)