Number

Description

The number field type creates a single-line input field in the admin panel, designed for entering numeric values. It is rendered as an HTML <input type="number"> element styled with Bootstrap’s form-control class. This field supports constraints like minimum, maximum, and step values, making it ideal for capturing integers or other numeric data with specific ranges.

Available Options

Parameter Type Description Required Default
name String The name of the field, used as the identifier and default label if label is not provided. Yes –
type String The field type. Must be set to number. Yes –
label String The display label for the number field. If not provided, the name is used. No name
placeholder String A hint displayed in the field when it is empty, guiding the user on expected input. No name
default Integer/String/Boolean The default value of the number field. If set to false, the field will be empty by default. No false
min Integer The minimum allowed value for the field. Must be a numeric value. No –
max Integer The maximum allowed value for the field. Must be a numeric value. No –
step Integer/Float The increment/decrement step for the field (e.g., 1 for integers, 0.1 for decimals). Must be a numeric value. No –
class String Additional CSS classes to apply to the number input for custom styling or JavaScript targeting. No –
help String A help message displayed in a sidebar or tooltip when the user clicks the info icon next to the field. No –
required Boolean If true, the field is marked as required, adding the HTML required attribute. No false


Note: The number field is stored in the settings array as an integer, sanitized using WordPress’s intval function. This ensures the stored value is a whole number, even if decimals are entered.

Example

Below is an example of how to define a number field in the $fields array for the Reusable Admin Panel settings class.

$this->fields = array(
    'general' => array(
        array(
            'name'    => __('Quantity', 'your-plugin-slug'),
            'type'    => 'number',
            'label'   => __('Item Quantity', 'your-plugin-slug'),
            'default' => 1,
            'min'     => 1,
            'max'     => 100,
            'step'    => 1,
            'class'   => 'quantity-input',
            'help'    => __('Enter the number of items (1-100).', 'your-plugin-slug'),
            'required' => true
        )
    )
);

This configuration will create a number field labeled “Item Quantity” under the “general” section. It will have a default value of 1, allow values between 1 and 100 in increments of 1, include the CSS class quantity-input, display a help message, and be marked as required.

Usage Notes

  • The number field uses WordPress’s intval for sanitization, converting the input to an integer. This means decimal inputs are rounded down, and non-numeric inputs are sanitized to 0.
  • The field’s ID is automatically generated as {section}-{name}, where name is sanitized using sanitize_title.
  • The field is styled using Bootstrap’s form-control class. Custom styles can be applied via the class parameter.
  • The min, max, and step attributes enforce browser validation for numeric ranges and increments, but server-side validation should also be implemented if critical.
  • The required attribute ensures a value is entered, triggering browser validation.
  • The type="number" attribute enables browser-specific features, such as numeric keyboards on mobile devices and up/down arrows for incrementing/decrementing.
  • To retrieve the value of a number field, use the get_option method, e.g., $this->get_option('general', 'quantity').