Number Field

Overview

The Number field renders a numeric input with optional minimum, maximum, step, and unit suffix controls. Use it for pixel values, font sizes, counts, durations, percentages, or any other numeric theme option. It can also be used as spinner — both type aliases map to the same component.

---

Field Registration

php

[
    'id'       => 'logo_width',
    'type'     => 'number',
    'title'    => __('Logo Width', 'your-textdomain'),
    'subtitle' => __('Width of the logo image', 'your-textdomain'),
    'default'  => 150,
    'min'      => 50,
    'max'      => 400,
    'step'     => 1,
    'unit'     => 'px',
]

---

Field Options

Option	Type	Required	Description
id	string	✅	Unique field identifier — used as the option key
type	string	✅	Must be number or spinner
title	string	✅	Label shown above the field
subtitle	string	—	Smaller descriptive text shown below the label
desc	string	—	Help text shown below the input
default	int|float	—	Default numeric value
min	int|float	—	Minimum allowed value
max	int|float	—	Maximum allowed value
step	int|float	—	Increment/decrement step — default is 1
unit	string	—	Unit label shown beside the input (e.g. px, %, rem)
required	array	—	Conditional logic rules — see Conditional Logic

---

Return Value

Type: string

Returns the numeric value as a string, or the default value if nothing has been saved yet. Cast to int or float as needed in your template.

php

$logo_width = themeplus_get_option( 'logo_width', 150 );
// Returns: '150'

---

Usage Examples

Inline CSS value

php

$logo_width = themeplus_get_option( 'logo_width', 150 );

echo '<style>
    .site-logo img {
        width: ' . absint( $logo_width ) . 'px;
    }
</style>';

CSS custom property

php

$container_width = themeplus_get_option( 'container_width', 1200 );

echo '<style>
    :root {
        --container-width: ' . absint( $container_width ) . 'px;
    }
</style>';

As an integer in PHP logic

php

$posts_per_page = (int) themeplus_get_option( 'posts_per_page', 6 );

$query = new WP_Query([
    'posts_per_page' => $posts_per_page,
]);

With unit suffix in a percentage context

php

[
    'id'      => 'sidebar_width',
    'type'    => 'number',
    'title'   => __('Sidebar Width', 'your-textdomain'),
    'default' => 30,
    'min'     => 20,
    'max'     => 50,
    'step'    => 1,
    'unit'    => '%',
]

php

$sidebar_width = themeplus_get_option( 'sidebar_width', 30 );

echo '<style>
    .sidebar {
        width: ' . absint( $sidebar_width ) . '%;
    }
</style>';

With a conditional field

php

[
    'id'      => 'enable_sticky_header',
    'type'    => 'toggle',
    'title'   => __('Enable Sticky Header', 'your-textdomain'),
    'default' => true,
],
[
    'id'       => 'sticky_header_offset',
    'type'     => 'number',
    'title'    => __('Sticky Offset', 'your-textdomain'),
    'subtitle' => __('Distance from the top before header becomes sticky', 'your-textdomain'),
    'default'  => 100,
    'min'      => 0,
    'max'      => 500,
    'unit'     => 'px',
    'required' => ['enable_sticky_header', '==', true],
],

---

Notes

• The field returns a string, not an integer. Use absint() for whole numbers or floatval() for decimals when using the value in CSS or PHP logic.
• Use step with decimal values (e.g. 0.1) for float inputs such as line height or opacity.
• For a range slider interface instead of a numeric input, use the Slider field.