---
title: HTML
description: "Provides an HTML editor powered by WordPress CodeMirror. The field stores sanitized HTML as a string. ## Use Cases - Add custom HTML blocks to a post - Store formatted snippets for templates - Capture reusable markup fragments - Maintain…"
url: "https://racmanuel.dev/docs/custom-fields-booster/html/"
updated: "2026-02-24"
category: Custom Fields Booster
tags:
  - Free
---

# HTML

Provides an HTML editor powered by WordPress CodeMirror.

The field stores sanitized HTML as a string.

## Use Cases

- Add custom HTML blocks to a post
- Store formatted snippets for templates
- Capture reusable markup fragments
- Maintain short HTML instructions
- Embed sanitized HTML in layouts

## Field Preview

A textarea enhanced with CodeMirror in HTML mode.

## How to Use

1. Add the HTML Field to a Field Group.
2. Set a **Placeholder** if needed.
3. Set **Rows** to control the visible editor height.
4. Save the Field Group and edit a post.

## Field Settings

| Setting | Description | Default |
| --- | --- | --- |
| Placeholder | Text shown when field is empty | Enter your HTML... |
| Rows | Visible height of the editor | 8 |

## Value & Storage

Saved as: Post meta

Storage type: String

Return format: string

REST format: not specified

Important details:

- Value is sanitized with `wp_kses_post()` on save.

## Output Examples

### PHP

```php
$html = get_field('my_html');

if (is_string($html) && $html !== '') {
    echo wp_kses_post($html);
}
```

### Twig

```php
{% set html = fn('get_field', 'my_html') %}
{% if html %}
  {{ html|e('html') }}
{% endif %}
```

## Compatibility

- Repeaters
- Flexible Content
- Options Pages
- Frontend forms (acf_form)
- REST API
- Multisite

## Hooks (Developer)

### Hooks Summary

| Hook | Type | Purpose |
| --- | --- | --- |
| custom_fields_booster_html_defaults | Filter | Modify default settings. |
| custom_fields_booster_html_supports | Filter | Modify ACF support flags. |
| custom_fields_booster_html_before_render | Action | Run logic before rendering UI. |
| custom_fields_booster_html_after_render | Action | Run logic after rendering UI. |
| custom_fields_booster_html_editor_id | Filter | Modify editor DOM ID. |
| custom_fields_booster_html_textarea_atts | Filter | Modify textarea attributes. |
| custom_fields_booster_html_before_settings | Action | Run logic before rendering settings UI. |
| custom_fields_booster_html_setting_placeholder | Filter | Modify placeholder setting config. |
| custom_fields_booster_html_setting_rows | Filter | Modify rows setting config. |
| custom_fields_booster_html_after_settings | Action | Run logic after rendering settings UI. |
| custom_fields_booster_html_before_enqueue | Action | Run logic before enqueuing assets. |
| custom_fields_booster_html_codemirror_settings | Filter | Modify CodeMirror settings. |
| custom_fields_booster_html_after_enqueue | Action | Run logic after enqueuing assets. |
| custom_fields_booster_html_load_value | Filter | Modify value after loading. |
| custom_fields_booster_html_validate_value | Filter | Modify validation result. |
| custom_fields_booster_html_update_value | Filter | Modify value before saving. |
| custom_fields_booster_html_format_value | Filter | Modify value returned by `get_field()`. |

### Filters

**Filter:** `custom_fields_booster_html_codemirror_settings`

Purpose: Modify CodeMirror settings.

When: You want to adjust editor behavior.

```php
add_filter('custom_fields_booster_html_codemirror_settings', function ($settings, $field_instance) {
    $settings['codemirror']['lineNumbers'] = false;
    return $settings;
}, 10, 2);
```

### Actions

**Action:** `custom_fields_booster_html_before_render`

Runs before rendering the field UI.

```php
add_action('custom_fields_booster_html_before_render', function ($field, $field_instance) {
    // Pre-render logic.
}, 10, 2);
```

## Assets

This field enqueues assets whenever the input is rendered (admin and frontend via `acf_form()`):

- `admin/js/cfb-field-html.js`
- `admin/css/cfb-html-field.css`
- WordPress Code Editor assets (`wp-theme-plugin-editor`, `wp-codemirror`)

## REST API

Schema: not specified

## REST Validation

Validation uses `validate_value()` on REST writes.

## Security & Escaping

- Value is sanitized with `wp_kses_post()` on save.
- Output should be escaped in templates.

## Notes / Limitations

- The editor runs CodeMirror in `text/html` mode.

## Changelog

- 1.0.0 — Initial release