JSON Field

A CodeMirror-powered textarea that validates JSON on save. Provides syntax highlighting, bracket matching, and a configurable default value. Returns the raw JSON string; parse it in your template with json_decode().

Settings

Return values

Returns the raw JSON string as stored.

$json = get_field('config_data');
// '{"theme":"dark","sidebar":true,"columns":3}'

$data = json_decode($json, true);
// ['theme' => 'dark', 'sidebar' => true, 'columns' => 3]

Returns an empty string if nothing has been saved.

Usage

Decoding and using the data

$json = get_field('chart_config');
$data = $json ? json_decode($json, true) : [];

if (json_last_error() === JSON_ERROR_NONE && $data) {
    $type   = $data['type']   ?? 'bar';
    $labels = $data['labels'] ?? [];
}

Passing JSON directly to JavaScript

$json = get_field('map_markers');
if ($json) {
    echo '<div class="map" data-markers="' . esc_attr($json) . '"></div>';
}

Or inline in a <script> block:

$json = get_field('app_config');
if ($json) {
    echo '<script>var appConfig = ' . wp_json_encode(json_decode($json)) . ';</script>';
}

REST API — returning decoded object

add_filter('acf/rest/format_value_for_rest', function ($value, $post_id, $field) {
    if ($field['type'] === 'efacf_json' && is_string($value)) {
        $decoded = json_decode($value, true);
        return (json_last_error() === JSON_ERROR_NONE) ? $decoded : $value;
    }
    return $value;
}, 10, 3);

Default value for new posts

Set the Default Value in field settings to pre-populate new posts with a valid JSON template:

{
  "layout": "full-width",
  "sidebar": false,
  "columns": 1
}