Voxel Edit Pro
The {CODICTS} Voxel Edit Pro plugin brings frontend bulk editing, inline editing, quick add, and bulk delete capabilities to sites powered by the Voxel Theme. It integrates with both Voxel’s post type system and Elementor, allowing administrators and authorized users to manage Voxel posts directly from the frontend without visiting the WordPress admin dashboard.
Requirements
Important: The plugin checks for both Voxel Child Theme and Elementor on every page load. If either dependency is missing, the plugin will display an admin notice and will not load any of its features.
Installation & Activation
Start by downloading the plugin from the Downloads page on your dashboard on the CoDicts website.
After downloading, install and activate the plugin in WordPress by navigating to “Plugins” > “Add New” > “Upload Plugin” and selecting the downloaded zip file. Click “Install Now” and then “Activate”.
Once activated, you will find three new widgets under the {CODICTS} category in the Elementor editor:
| Widget | Description |
|---|---|
| {C} Bulk Edit Pro – Bulk Edit Button | Renders Select All / Edit All / Delete All buttons for bulk operations. |
| {C} Bulk Edit Pro – Checkbox | Renders a checkbox bound to a post ID for selection. |
| {C} Bulk Edit Pro – Quick Add / Edit | A button or inline form for single-post editing or new post creation. |
Core Concepts
Selector ID Linking
Checkboxes and bulk edit buttons are linked together via a Selector ID — a simple string identifier. A Checkbox widget with Selector ID 1 will be controlled by a Bulk Edit Button widget with the same Selector ID 1. You can have multiple independent bulk-edit groups on the same page by using different Selector IDs.
How It Works Under the Hood
The plugin uses Voxel’s own create-post infrastructure to render edit forms on the frontend. It reads your Voxel post type field definitions, generates a Voxel-compatible form, and uses Voxel’s own field sanitization, validation, and update APIs. This ensures full compatibility with all Voxel field types — text, taxonomy, location, repeater, product, file, image, switcher, and more.
Unsupported Field Types
The following Voxel field types are purely presentational and cannot be edited: ui-step, ui-image, ui-heading, and ui-html.
Setting Up Bulk Editing
Bulk editing lets users select multiple posts via checkboxes and edit shared fields simultaneously. Here is how to set it up:
Step 1: Add Checkboxes to Your Post Feed Card
Open the Elementor template used for your Voxel post feed card. Drag in the {C} Bulk Edit Pro – Checkbox widget and place it where you want the checkbox to appear on each post card.
Set the Post ID field using Elementor’s dynamic tags — select the current post’s ID. Set a Selector ID (e.g., 1).
Step 2: Add the Bulk Edit Button
On the page that contains your post feed, drag in the {C} Bulk Edit Pro – Bulk Edit Button widget above or alongside your feed.
Set the Selector ID to match the checkboxes (e.g., 1). Select the Post Type you want to edit.
Step 3: Configure Editable Fields
In the Bulk Edit Button widget settings, you will see a repeater section for each post type. Click “Add Field” to choose which post type fields should be editable. For each field, you can optionally:
| Option | Description |
|---|---|
| Hide label | Hides the field’s label in the edit modal. |
| Hide Optional | Hides the “Optional” indicator text. |
| Don’t load field value | Prevents pre-loading the existing value. Useful for “set all to this value” operations. |
Step 4: Use It
On the frontend, users can now click checkboxes to select posts. Once at least one checkbox is selected, the “Edit All” button appears (and optionally “Delete All”). Clicking “Edit All” opens a modal with the configured fields. After editing, click “Save” to apply changes to all selected posts at once.
Tip: You can also click “Select All” to toggle all visible checkboxes on or off. If you enable “Select All Based on Filters”, the button will select all posts matching your current search filters — not just the ones visible on the page.
Bulk Edit Button Settings
General Settings
| Setting | Description |
|---|---|
| Choose Post Types | Select the Voxel post type to edit. |
| Selector ID | Links this button group to matching checkboxes (default: 1). |
| Reload Page After Save | If enabled, reloads the page after a successful save. If disabled, the post feed refreshes dynamically. |
| Reload Countdown (ms) | Delay before page reload (default: 500). |
Select/Unselect Button
| Setting | Description |
|---|---|
| Hide Select All Button | Hides the Select/Unselect All button entirely. |
| Select All Based on Filters | When enabled, “Select All” uses the connected search form’s filters to select all matching post IDs server-side. |
| Max Selected Edits | Maximum number of posts that can be selected at once (default: 500). |
| Select Text / Unselect Text | Customizable button labels for each state. |
Edit Button
| Setting | Description |
|---|---|
| Display Total Edit Count | Shows the count of selected items, e.g., “Edit All (5)”. |
| Text | Button label (default: “Edit All”). |
Delete Button
| Setting | Description |
|---|---|
| Enable Delete Button | Enables/disables the delete button entirely. |
| Display Total Delete Count | Shows selected count on the delete button. |
| Text | Button label (default: “Delete All”). |
Checkbox Widget Settings
| Setting | Description |
|---|---|
| Post ID | The post this checkbox represents. Set dynamically via Elementor dynamic tags inside a Voxel post feed template. |
| Selector ID | Must match the Selector ID on the corresponding Bulk Edit Button widget. |
| Preselect Checkbox | If enabled, the checkbox is automatically checked on page load. |
| Hide Checkbox | If enabled, the checkbox is hidden (useful for programmatic selection). |
The checkbox also has full style controls for border size, border color, background color (checked and unchecked), checkmark color, checkmark size, checkbox size, and border radius.
Single / Inline Editing & Quick Add
The {C} Bulk Edit Pro – Quick Add / Edit widget is the most versatile widget. It supports three display modes:
| Mode | Description |
|---|---|
| Popup | Renders a button. Clicking it opens a modal dialog with the edit form. |
| Inline | Renders the edit form directly on the page — no button or modal. |
| Adaptive Inline (Experimental) | Injects an inline “quick add” card directly into a connected Voxel post feed grid. |
Setting Up Popup Editing
Step 1: Drag the {C} Bulk Edit Pro – Quick Add / Edit widget into your page or post feed card template.
Step 2: Set the Post ID using Elementor’s dynamic tags (for editing an existing post) or leave it empty (for creating a new post).
Step 3: Select the Post Type and add the fields you want to be editable using the field repeater.
Step 4: Set Display Type to “Popup”. Customize the button text, size, and icon.
On the frontend, clicking the button opens a modal with a Voxel form. After editing, click “Save” to submit changes.
Setting Up Inline Editing
Step 1: Follow the same setup, but set Display Type to “Inline”.
Step 2: The form will render directly on the page. A “Save” button appears on hover.
Tip: Enable “Auto Save” (experimental) to automatically save changes as the user edits — no save button needed. Changes are debounced with a 1-second delay so rapid edits are batched together.
Quick Add (Creating New Posts)
To create new posts from the frontend, simply leave the Post ID field empty. The form will render without preloaded values, and saving will create a new post of the selected type. The post status will follow your Voxel post type’s submission settings — either publish or pending.
Adaptive Inline Mode (Experimental)
This feature integrates a “quick add” form directly into a Voxel post feed grid as a card.
Step 1: Configure the Widget
Set the Quick Add / Edit widget to Display Type: Inline and enable “Adaptive Inline”.
Step 2: Connect to a Post Feed
Use the “Connect to Post Feed” setting to link the widget to a specific Voxel post feed widget on the page.
Step 3: Choose Position
Set the “Adaptive Inline Position” to “First” or “Last” — this controls whether the add card appears at the beginning or end of the feed grid.
Step 4: Customize the Card
By default, the card appears as a dashed-border placeholder with a “+” icon. You can optionally enable “Use custom preview card” and select a Voxel card template for a more polished look.
Clicking the placeholder opens an inline form. After saving, the form resets and the post feed refreshes automatically.
Guest Edit / Assigned User Editing
This feature allows non-logged-in users to submit edits or create posts that are credited to a specific user account. This is useful for public-facing forms where visitors can submit data.
Step 1: Enable Guest Editing
On the Quick Add / Edit widget, enable “Assign User ID for Edits”.
Step 2: Set the User ID
Enter the User ID that should own the edits. This must be a valid WordPress user.
When guest editing is enabled, both the save and form-loading endpoints accept non-authenticated requests. The specified User ID is validated on every request — if the user does not exist, the request is rejected.
Important: The assigned user must still have the appropriate permissions to edit or create posts of the selected type. The plugin checks permissions using the assigned user’s capabilities.
Batch Processing
For large bulk operations, the plugin can process updates in scheduled background batches to avoid PHP timeout issues.
By default, batch processing is disabled (all posts are processed in a single request). To enable it, add the following filter to your theme’s functions.php or a code snippet:
add_filter('codicts-voxel-edit-pro::batch-limit', function($limit) {
return 500; // Process 500 posts per batch
}, 10, 1);When the number of selected posts exceeds the batch limit, the first batch is processed immediately and the remaining batches are scheduled via WordPress cron, running 1 second apart.
Post Feed Refresh
After a successful edit, the plugin can refresh the Voxel post feed dynamically without a full page reload.
This happens automatically when “Reload Page After Save” is disabled. The plugin finds the connected post feed, re-runs the current search query, and replaces the feed content — including pagination controls.
If you prefer a full page reload instead, enable “Reload Page After Save” and set the “Reload Countdown” delay in milliseconds.
Auto Save (Experimental)
When enabled on an inline form, the auto-save system automatically monitors the form and submits changes without the user needing to click “Save”.
The system checks for changes every second. When a change is detected, it waits an additional 1 second (debounce) before saving — so rapid edits are batched together. The manual “Save” button is hidden when auto-save is active.
If a save is in progress, the browser will warn the user before navigating away to prevent data loss.
Hooks, Filters & Custom Events
The plugin provides hooks for developers to extend its functionality:
PHP Action — After Save
Fires after each successful post save. Contains the post ID, post type, status, event type (create or update), and the fields that were saved.
add_action('codicts-voxel-edit-pro::event', function($params) {
// $params contains: post_id, post_type, post_status, event, fields
error_log(print_r($params, true));
}, 10, 1);PHP Filter — Batch Limit
Controls how many posts are processed per batch during bulk operations.
add_filter('codicts-voxel-edit-pro::batch-limit', function($limit) {
return 500;
}, 10, 1);JavaScript Event — After AJAX Save
Fires in the browser after a successful AJAX save. Contains post IDs, post type, container element, and field data.
$(document).on('codicts-voxel-edit-pro::ajax_event', function(event, params) {
console.log(params);
});Troubleshooting
“Voxel Theme Not Detected” Error
Ensure the Voxel theme is installed and set as the active theme (not a child theme with a different template value). The plugin checks get_option('template') == 'voxel'.
“Elementor Not Detected” Error
Install and activate Elementor. The free version is sufficient.
“Please Disable VOXEL_DEV_MODE” Error
When VOXEL_DEV_MODE is active, Voxel’s internal component references may not work as expected. Disable it in your wp-config.php or Voxel settings for production use.
Bulk Edit Not Saving
Verify the user has edit_others_posts capability or is the post author. Check that the post type’s submission settings allow updates. If the page has been open for a long time, clear the browser cache to refresh the security nonce.
Fields Not Showing in the Edit Form
Make sure the field is added to the widget’s field repeater in Elementor. Check that the field passes visibility rules (role or plan restrictions). UI-only field types (ui-step, ui-image, ui-heading, ui-html) are excluded automatically.
Post Feed Not Refreshing After Edit
Make sure “Reload Page After Save” is disabled — otherwise a full reload occurs instead of a dynamic refresh. The post feed widget must be findable by the plugin. For filter-connected feeds, ensure the search form widget is properly linked to the post feed.
Auto Save Not Triggering
Confirm the “Auto Save” toggle is enabled on the widget. Auto save only works on inline forms (not popup mode). The debounce delay is 1 second — rapid changes are batched. Check the browser console for any AJAX errors.
For further support, visit codicts.com or contact us at support@codicts.com.