Number

Last updated Mar 31, 2023

Description

The Number field creates an input limited to numerical values.

Screenshots

Creating a Number field.

Creating a Number field.

The Presentation tab of the Number field allows you to provide instructions to content editors, show placeholder text, set step size (increments), add characters before and after the input, and define wrapper attributes.

The Presentation tab of the Number field allows you to provide instructions to content editors, show placeholder text, set step size (increments), add characters before and after the input, and define wrapper attributes.

How the Number field is displayed to content editors in WP Admin.

How the Number field is displayed to content editors in WP Admin.

Settings

  • Default Value
    The default value shown when creating a new post.

  • Required
    Found on the Validation tab, this requires a numeric value be provided as the input and prevents the field from accepting empty values. Defaults to off.

  • Minimum Value
    The minimum value allowed.

  • Maximum Value
    The maximum value allowed.

  • Instructions
    Shows instructions when submitting data.

  • Placeholder Text
    Appears within input when no value exists.

  • Step Size
    The increment at which a numeric value can be set. Defaults to 1.

  • Prepend
    Adds a visual text element before the input.

  • Append
    Adds a visual text element after the input.

Template usage

Display value as text

This example demonstrates how to display a Number field value as text. We don’t recommend outputting any ACF value without any sort of protection or escaping.

<p>To date, your efforts have raised $<?php echo esc_html( get_field('latest_total') ); ?>!</p>

Display value within CSS

This example demonstrates how a Number field value named “h2_font_size” can be used to control the font size of all <h2> elements.

<?php

$h2_font_size = get_field('h2_font_size');
if( $h2_font_size ): ?>
<style type="text/css">
    h2 {
        font-size: <?php echo esc_html( $h2_font_size ); ?>px;
    }
</style>
<?php endif; ?>