Unit Control

A number input combined with a CSS unit dropdown. Editors type a numeric value and pick a unit (px, %, em, rem, vw, vh, etc.). The field returns a single combined string ready to use in CSS.

Settings

Setting	Default	Description
Default Value	(empty)	Pre-filled numeric value shown when the field is empty.
Default Unit	`px`	Unit pre-selected in the dropdown.
Min	(empty)	Minimum allowed numeric value.
Max	(empty)	Maximum allowed numeric value.
Step	`1`	Increment/decrement step.
Placeholder	(empty)	Placeholder text shown in the number input when empty.

Available units

px · % · em · rem · vw · vh · vmin · vmax · ch · ex · cm · mm · in · pt · pc

Return values

Returns a string combining the number and selected unit.

$spacing = get_field('card_gap');
// "24px"

$font_size = get_field('hero_font_size');
// "2.5rem"

Returns an empty string if neither number nor unit has been entered.

Usage

Applying a dynamic value via CSS custom property (preferred)

Write the ACF value to a CSS custom property in wp_head, then reference it in your stylesheet. No style= on the element itself.

add_action('wp_head', function () {
    $border_radius = get_field('card_border_radius');
    if ($border_radius) {
        echo '<style>:root { --card-radius: ' . esc_attr($border_radius) . '; }</style>';
    }
});

.card {
    border-radius: var(--card-radius);
}

Writing to a CSS custom property

add_action('wp_head', function () {
    $gap = get_field('grid_gap', 'option');

    if ($gap) {
        echo '<style>:root { --grid-gap: ' . esc_attr($gap) . '; }</style>';
    }
});

Splitting value and unit

$value_str = get_field('animation_duration'); // "400ms"

preg_match('/^([\d.]+)(.+)$/', $value_str, $m);
$number = $m[1] ?? '0';
$unit   = $m[2] ?? 'ms';

Writing multiple dynamic values to CSS vars

Output all dynamic values as CSS custom properties in wp_head, then reference them in your stylesheet.

add_action('wp_head', function () {
    $pt   = get_field('padding_top');    // "40px"
    $pb   = get_field('padding_bottom'); // "40px"
    $fs   = get_field('body_font_size'); // "1rem"

    $vars = array_filter([
        $pt ? '--section-pt: ' . $pt . ';' : '',
        $pb ? '--section-pb: ' . $pb . ';' : '',
        $fs ? '--section-fs: ' . $fs . ';' : '',
    ]);

    if ($vars) {
        echo '<style>:root { ' . esc_html(implode(' ', $vars)) . ' }</style>';
    }
});

.section {
    padding-top: var(--section-pt);
    padding-bottom: var(--section-pb);
    font-size: var(--section-fs);
}