Custom Fields allow you to attach additional structured data to posts, products, and other content types. They are fully configurable, easy to reuse, and designed to support everything from simple text inputs to complex media galleries, maps, and relational fields.
Each field type defines how data is entered in the admin panel and how it can be displayed in your theme. All fields share a consistent set of settings, making them predictable and easy to configure.
How Custom Fields Work
A Custom Field consists of:
- A field type (e.g., Text, Image, Gallery, Date, Product)
- A label (what editors see)
- A slug (used to retrieve the value in templates)
- Optional settings (default value, required, instructions, etc.)
When a field is added to a post type, it appears in the editor and stores its value in the database. You can then display it in your theme using components or template variables.
Shared Field Settings
All field types include the following settings:
- Default Value - The value shown when creating a new post or product.
- Required - Prevents saving if the field is empty.
- Instructions - Helper text shown to editors.
- Placeholder Text - Text displayed when the field has no value.
- Prepend - Text displayed before the input.
- Append - Text displayed after the input.
These settings ensure consistency across all field types and make the editing experience intuitive.
Field Types
Each field type is designed for a specific kind of data. The following list summarizes the purpose of each field type.
Accordion Field
Creates an accordion-style input for storing expandable/collapsible list items.
Useful for FAQs, feature lists, or structured content sections.
Checkbox Field
Stores a true/false value using a checkbox input.
Ideal for toggles such as “Featured”, “Published”, or “Show in menu”.
Color Field
Provides a color picker for selecting HEX/RGB values.
Useful for theme settings, UI customization, or product color attributes.
Date Field
Stores a date value using a calendar picker.
Commonly used for events, schedules, or publication dates.
Date Time Field
Stores both date and time.
Useful for appointments, event start times, or timed promotions.
Email Field
Validates and stores email addresses.
Useful for contact information or form submissions.
File Field
Allows uploading files that can be downloaded on the website.
Useful for PDFs, documents, or downloadable resources.
Gallery Field
Stores multiple images as a gallery.
Ideal for product galleries, portfolios, or image collections.
Google Map Field
Stores map coordinates or addresses using a Google Maps input.
Useful for locations, stores, or event venues.
Image Field
Stores a single image.
Used for featured images, banners, or thumbnails.
Link Field
Stores a URL or internal link.
Useful for buttons, CTAs, or external references.
Message Field
Displays a static message in the editor (info, warning, instructions).
Does not store data.
Month Field
Stores a month value (YYYY‑MM).
Useful for archives, billing cycles, or monthly scheduling.
Number Field
Stores numeric values.
Useful for quantities, prices, ratings, or measurements.
Oembed Field
Accepts media URLs and automatically embeds them (YouTube, Twitter, etc.).
Ideal for rich media content.
Password Field
Stores password values (masked input).
Useful for protected content or integrations.
Post Field
Autocomplete selector for choosing a post.
Useful for related posts, featured posts, or linking content.
Product Field
Autocomplete selector for choosing a product.
Useful for cross‑selling, related products, or product references.
Radio Field
Displays a list of radio buttons for selecting one value.
Useful for predefined options such as sizes, types, or modes.
Range Field
Creates a slider for selecting a numeric value within a range.
Useful for ratings, filters, or adjustable settings.
Select Field
The Select field displays a dropdown list of predefined options, allowing the user to choose a single value. It is ideal for categories, types, modes, or any controlled vocabulary.
Tab Field
The Tab field stores tabbed content, enabling editors to organize information into multiple labeled sections. This is useful for product specifications, multi-section content blocks, or structured layouts.
Taxonomy Field
The Taxonomy field links a post to a taxonomy item, such as a category, tag, or custom taxonomy. It is essential for organizing content and enabling taxonomy-based filtering.
Telephone Field
The Telephone field stores phone numbers using a tel input. It is suitable for contact information, business listings, or user profiles.
Text Field
The Text field provides a simple single-line input for short strings. It supports an optional character limit and is one of the most commonly used field types.
Textarea Field
The Textarea field stores multi-line text, making it ideal for descriptions, notes, summaries, or any longer content that does not require rich formatting.
Time Field
The Time field stores time values using a time picker. It is useful for schedules, opening hours, or event times.
Toggle Field
The Toggle field stores true/false values using a switch-style UI. It is a more visual alternative to the Checkbox field and works well for enabling or disabling features.
URL Field
The URL field stores website addresses and validates them as URLs. It is useful for external links, social profiles, or reference resources.
User Field
The User field allows selecting a user from the system, storing a relationship between the post and a user account. It is useful for authorship, ownership, or assigning responsibility.
Week Field
The Week field stores week values (year + week number). It is useful for scheduling, weekly reports, or time-based categorization.
WYSIWYG Field
The WYSIWYG field provides a full rich-text editor, identical to the editor used for posts and products. It supports formatted text, images, embeds, and multimedia.
This field is ideal for long-form content, flexible layouts, and any scenario where editors need full control over formatting.
A combined reference table helps compare all Vvveb CMS custom field types at a glance and clarifies when each one is most appropriate. The table below summarizes every available field type, including its purpose and ideal use cases.
Custom Fields Reference Table
| Field Type | What It Stores | Ideal Use Cases | Notes |
|---|---|---|---|
| Accordion | Expandable/collapsible list items | FAQs, feature lists, structured content blocks | Stores multiple grouped items |
| Checkbox | True/false value | Toggles (Featured, Published, Enable option) | Simple boolean switch |
| Color | Color value (HEX/RGB) | Theme settings, UI customization, product color attributes | Uses color picker |
| Date | Date (YYYY‑MM‑DD) | Events, schedules, publication dates | Calendar input |
| Date Time | Date + time | Appointments, event start times, timed promotions | Combined picker |
| Email address | Contact info, forms, user profiles | Validates email format | |
| File | Uploaded file | PDFs, documents, downloadable resources | Stores file path |
| Gallery | Multiple images | Product galleries, portfolios, image collections | Multi-image input |
| Google Map | Address or coordinates | Store locations, event venues, business listings | Map-based selector |
| Image | Single image | Featured images, banners, thumbnails | Most common media field |
| Link | URL or internal link | Buttons, CTAs, external references | Simple link input |
| Message | Static message (no data) | Editor instructions, warnings, info blocks | Does not store values |
| Month | Month (YYYY‑MM) | Billing cycles, archives, monthly schedules | Month picker |
| Number | Numeric value | Quantities, prices, ratings, measurements | Supports min/max |
| Oembed | Media embed URL | YouTube, Vimeo, Twitter embeds | Auto-expands on display |
| Password | Masked text | Protected content, integrations | Stores sensitive strings |
| Post | Post reference | Related posts, featured posts | Autocomplete selector |
| Product | Product reference | Cross‑selling, related products | Autocomplete selector |
| Radio | One value from a list | Sizes, types, modes, predefined options | Single-choice list |
| Range | Numeric slider | Ratings, adjustable settings, filters | Min/max range |
| Select | Dropdown list | Categories, types, controlled vocabularies | Single-choice dropdown |
| Tab | Tabbed content | Product specs, multi-section content | Stores multiple tab panels |
| Taxonomy | Taxonomy relation | Categories, tags, custom taxonomies | Connects content to taxonomy |
| Telephone | Phone number | Contact info, business listings | Tel input |
| Text | Single-line text | Titles, labels, short strings | Supports character limit |
| Textarea | Multi-line text | Descriptions, notes, summaries | Plain text only |
| Time | Time value | Opening hours, schedules, event times | Time picker |
| Toggle | True/false switch | Enable/disable features | Visual alternative to checkbox |
| URL | Website address | External links, social profiles | Validates URL format |
| User | User reference | Author, owner, assigned user | Autocomplete selector |
| Week | Week of the year | Weekly schedules, reports | Week picker |
| WYSIWYG | Rich formatted content | Long-form content, multimedia sections | Full editor with styling |
Using Custom Fields in Themes
Custom field values can be displayed in templates using components or Vtpl selectors. For example:
<span data-v-post-custom_field_slug></span>
Or inside a component:
<div data-v-product-custom_field_slug></div>
This makes it easy to integrate custom data into any theme layout.
Custom Fields are one of the most powerful ways to tailor Vvveb CMS to different content models. They allow you to build flexible, structured, and editor‑friendly content types without writing custom code.