MyListing Color Picker Field
The {CODICTS} MyListing Color Picker Field plugin adds a custom color picker field type to the MyListing listing type editor. It enables listing owners to customize the background color and text color of their individual listing pages directly from the Add Listing / Edit Listing form. Site administrators define which CSS elements the colors target and set default colors in the listing type editor. Listing owners then override those colors per listing using a modern color picker with swatches. The selected colors are output as inline CSS on the single listing page, dynamically re-skinning the targeted elements.
Requirements
Child theme required. The plugin copies a form template file into your child theme’s
templates/directory on activation. If either the MyListing theme or a MyListing child theme is not detected, the plugin displays an admin error notice and does not initialize.
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”.
On activation, the plugin automatically copies its form template into your child theme at:
your-child-theme/templates/add-listing/form-fields/color-picker-field.phpAfter activation, navigate to any Listing Type in the admin and go to the Fields tab to add and configure a color picker field.
Key Features
| Feature | Description |
|---|---|
| Custom Field Type | Registers a new “Color Picker” field type in the MyListing listing type editor. |
| Background Color Picker | Listing owners can choose a background color for targeted elements on their listing page. |
| Text Color Picker | Listing owners can choose a text/font color for targeted elements on their listing page. |
| CSS Selector Targeting | Admins define which CSS selectors the colors apply to (e.g., .header, .btn-primary). |
| Default Colors | Admins set default background and text colors that apply when no listing-level override exists. |
| Per-Feature Toggles | Each sub-feature (background picker, text picker, CSS selector input) can be independently shown or hidden from listing owners. |
| Multiple Fields Per Listing Type | Add multiple color picker fields to the same listing type, each targeting different elements with different colors. |
| Color Swatches | The frontend color picker includes 11 pre-defined color swatches for quick selection. |
| Template Auto-Install | The form template is automatically copied to the child theme on activation and updated on plugin updates. |
How It Works
The plugin operates in three stages involving the admin, listing owners, and visitors:
| Stage | Who | What Happens |
|---|---|---|
| 1. Configure | Admin | Adds a color picker field to a listing type in the Fields tab. Configures CSS selectors (which elements to color), default colors, and which options listing owners can see. |
| 2. Customize | Listing Owner | When creating or editing a listing, uses the color picker to select background and/or text colors. Optionally overrides CSS selectors if the admin has enabled that option. |
| 3. Display | Visitor | On the single listing page, the selected colors are applied to the targeted elements via inline CSS, dynamically re-skinning the page. |
Color Resolution Order
For each color property (background and text), the plugin follows this priority:
| Priority | Source | Description |
|---|---|---|
| 1st | Listing owner’s saved color | If the listing owner selected a color, it is used. |
| 2nd | Admin’s default color | If no listing-level color exists, the admin’s default is used. |
| 3rd | (omitted) | If neither exists, the CSS property is not output at all — the site’s default styling applies. |
Setting Up the Color Picker Field (Admin)
Step 1: Add the Field
1. Navigate to any Listing Type in the WordPress admin and go to the Fields tab.
2. In the right sidebar, click the “{CODICTS} MyListing Color Picker Field” pill button. A new color picker field is added to the listing type.
Step 2: Configure the Field
3. Click the newly added field to expand its settings. Configure the following options:
| Option | Default | Description |
|---|---|---|
| Label | {CODICTS} MyListing Color Picker Field | The label displayed to listing owners on the Add/Edit Listing form. Change this to something descriptive like “Listing Colors” or “Header Styling.” |
| Key | (auto-generated) | The unique field key, auto-generated from the label. |
| Description | (empty) | Help text shown below the field on the form. |
| CSS Selectors | (empty) | Comma-separated CSS selectors that the colors will target (e.g., body, .header, .btn-primary). This is the most important setting — it defines which page elements get colored. |
| Show CSS Selectors Input | Off | When enabled, listing owners can see and modify the CSS selectors on the Add/Edit Listing form. When off, only the admin-defined selectors are used. |
| Show Background Color Picker | On | When enabled, listing owners see a background color picker on the form. |
| Default Background Color | (none) | The default background color applied when a listing owner hasn’t chosen one. Use the color picker to set this. |
| Show Color Picker | On | When enabled, listing owners see a text/font color picker on the form. |
| Default Color | (none) | The default text color applied when a listing owner hasn’t chosen one. |
4. Save the listing type.
Tip: You can add multiple color picker fields to the same listing type. For example, one field targeting
.listing-header, .hero-sectionfor header colors, and another targeting.btn, .btn-primaryfor button colors. Each field operates independently.
Listing Owner Experience (Add/Edit Listing)
When a listing owner creates or edits a listing of the configured type, the color picker field appears on the form.
Depending on the admin’s configuration, the listing owner sees:
| Element | Shown When | Description |
|---|---|---|
| CSS Selectors textarea | “Show CSS Selectors Input” is on | A textarea where the listing owner can specify or modify which CSS selectors the colors target. |
| Background Color picker | “Show Background Color Picker” is on | A color input with the Coloris picker. Click to open a modern color picker with hex input and 11 pre-defined swatches for quick selection. Includes a Clear button to remove the color. |
| Color (text) picker | “Show Color Picker” is on | Same as above but for text/font color. |
The listing owner selects their desired colors, optionally modifies CSS selectors (if allowed), and saves the listing. The colors take effect immediately on the listing page.
Pre-Defined Color Swatches
The color picker includes 11 quick-select swatches:
| Color | Hex |
|---|---|
| Dark Teal | #264653 |
| Persian Green | #2a9d8f |
| Maize Crayola | #e9c46a |
| Sandy Brown | #f4a261 |
| Burnt Sienna | #e76f51 |
| Fire Engine Red | #d62828 |
| Dark Blue | #023e8a |
| Star Command Blue | #0077b6 |
| Pacific Cyan | #0096c7 |
| Vivid Sky Blue | #00b4d8 |
| Sky Blue | #48cae4 |
Visitor Experience (Single Listing Page)
When a visitor opens a single listing page, the plugin reads the saved color values (or falls back to defaults) and outputs an inline <style> block in the page footer targeting the configured CSS selectors.
Example Output
Given a field configured with CSS selectors .listing-header, .listing-title where the listing owner selected #264653 as background and #e9c46a as text color, the page would include:
<style>
.listing-header, .listing-title {
background-color: #264653 !important;
color: #e9c46a !important;
}
</style>Note: All color rules include
!importantto ensure they override theme styles. This is by design — the purpose is to let listing owners override the site’s default styling for their own listing pages.
Example — Custom Header Colors Per Listing
1. Activate the plugin with the MyListing theme and a MyListing child theme active.
2. Edit a listing type (e.g., “Places”). Go to the Fields tab and click the “{CODICTS} MyListing Color Picker Field” button in the sidebar.
3. Configure the field: set the Label to “Header Colors”, set CSS Selectors to .listing-header, .profile-cover, enable both color pickers, set default background to #264653 and default text to #ffffff. Leave “Show CSS Selectors Input” off so listing owners can’t change which elements are targeted. Save the listing type.
4. A listing owner creates a new Place listing. In the form, they see “Header Colors” with a Background Color picker and a Text Color picker. They select #e76f51 for the background and #ffffff for text. They save the listing.
5. On the listing page, the header and profile cover sections now display with the listing owner’s chosen burnt sienna background and white text, while all other listings using that type show the default dark teal background.
Example — Multiple Color Fields on One Listing Type
1. Edit a listing type. Add two color picker fields:
| Field | Label | CSS Selectors | Purpose |
|---|---|---|---|
| Field 1 | Header Colors | .listing-header, .hero-section | Controls header background and text colors. |
| Field 2 | Button Colors | .btn, .btn-primary, .action-btn | Controls button background and text colors. |
2. Save the listing type. Each field has its own CSS selectors, defaults, and toggles.
3. Listing owners see two color sections on the Add/Edit Listing form. They can customize header colors independently from button colors.
4. On the listing page, both style rules are output — the header elements get one set of colors and the buttons get another.
Example — Letting Listing Owners Choose CSS Selectors
1. When configuring a color picker field, enable “Show CSS Selectors Input.”
2. Set default CSS Selectors to body as a starting point.
3. On the Add Listing form, listing owners see a textarea where they can change the selectors. A tech-savvy listing owner could change it to .sidebar, .widget-area to only color their sidebar.
Warning: Only enable this option if your listing owners are comfortable with CSS selectors. For most use cases, it’s better to leave this off and let the admin define the selectors.
Frequently Asked Questions
Does this require a child theme?
Yes. The plugin copies a form template file into your child theme’s templates/ directory. Without an active MyListing child theme, the plugin displays an error notice and does not initialize.
Does this require the MyListing theme?
Yes. The plugin registers a custom field type within MyListing’s listing type editor. It will not function without the MyListing theme active as the parent theme.
Where do I add the color picker field?
Edit any listing type in the WordPress admin, go to the Fields tab, and click the “{CODICTS} MyListing Color Picker Field” pill button in the right sidebar.
Can I add multiple color picker fields to one listing type?
Yes. Each field has its own unique key and can target different CSS selectors with different colors. All values are stored together efficiently under a single post meta entry.
Can listing owners override the CSS selectors?
Only if the admin enables the “Show CSS Selectors Input” toggle in the field configuration. When disabled, only the admin-defined selectors are used. For most sites, it’s recommended to leave this off.
What happens if a listing owner doesn’t choose a color?
The admin’s default color is used. If no default is set either, that CSS property is not output at all — the site’s normal styling applies unchanged.
Why do the colors use !important?
The inline CSS uses !important to ensure the listing owner’s color choices override the theme’s default styles. This is intentional — without it, theme CSS could override the per-listing colors.
Where are the colors displayed?
Colors are only applied on single listing pages. They are not applied on explore pages, archive pages, or preview cards. The plugin outputs an inline <style> block in the page footer of each listing page.
Is there a settings page?
No separate settings page. All configuration happens within the listing type editor’s Fields tab, where you add and configure the color picker field.
Does the plugin create any database tables?
No. Color values are stored as standard WordPress post meta on each listing. A single options entry tracks template installation. No custom database tables are created.
What happens when the plugin is deactivated?
On deactivation, the template file is removed from the child theme. The stored color values in post meta and the color picker fields in listing types remain intact. Reactivating the plugin restores full functionality — the template is re-copied and saved colors continue to work.
Will plugin updates overwrite the template file?
Yes. When the plugin is updated, the template file in the child theme is re-copied to match the new version. If you have modified the template, back up your changes before updating and re-apply them after.
Troubleshooting
“MyListing Theme Not Detected” or “Child Theme Not Detected” Error
| Cause | Solution |
|---|---|
| MyListing theme not active | Install and activate the MyListing theme as the parent theme. |
| No child theme active | Create and activate a MyListing child theme. The plugin requires a child theme for template installation. |
Color Picker Field Not Appearing in the Listing Type Editor
| Cause | Solution |
|---|---|
| Not on the Fields tab | The pill button only appears on the Fields tab of the listing type editor. Navigate to the #fields tab. |
| Plugin not activated | Go to Plugins → Installed Plugins and verify the plugin is active. |
| Theme requirements not met | Check for admin error notices. Both the MyListing theme and a child theme must be active. |
Colors Not Appearing on the Listing Page
| Cause | Solution |
|---|---|
| No CSS selectors configured | Edit the color picker field in the listing type editor and add CSS selectors (e.g., body, .header). Without selectors, no CSS rules are output. |
| No colors set | Either the listing owner must select colors or the admin must set default colors. If both are empty, no CSS is output. |
| Not a single listing page | Colors are only applied on individual listing pages, not on explore pages, archives, or preview cards. |
| CSS selectors don’t match | Verify the CSS selectors match actual elements on the listing page. Use browser developer tools (F12) to inspect elements and confirm the selectors target the right elements. |
Color Picker Not Appearing on the Add/Edit Listing Form
| Cause | Solution |
|---|---|
| Color picker toggles disabled | In the listing type editor, ensure “Show Background Color Picker” and/or “Show Color Picker” are enabled. |
| Template not installed | Deactivate and reactivate the plugin to force-copy the template to the child theme. Verify the file exists at your-child-theme/templates/add-listing/form-fields/color-picker-field.php. |
| JavaScript error | Check the browser console (F12 → Console) for errors. The Coloris color picker depends on its CSS and JS files loading correctly. |
Default Colors in the Listing Type Editor Not Working
| Cause | Solution |
|---|---|
| WordPress color picker not initializing | Click on the color picker field row to expand it — the WordPress color picker initializes when the field is opened. If it still doesn’t appear, check for JavaScript errors in the browser console. |
For further support, visit codicts.com or contact us at support@codicts.com.