URL

Description

The url field type creates a single-line input field in the admin panel, designed for entering web URLs. It is rendered as an HTML <input type="url"> element styled with Bootstrap’s form-control class. This field ensures that entered values conform to a valid URL format and is ideal for capturing website addresses or other hyperlinks.

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 url. Yes –
label String The display label for the URL field. If not provided, the name is used. No name
description String Display a description below the label. No ā€“
placeholder String A hint displayed in the field when it is empty, guiding the user on expected input. No name
default String/Boolean The default value of the URL field. If set to false, the field will be empty by default. Should be a valid URL if provided. No false
class String Additional CSS classes to apply to the URL 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 url field is stored in the settings array as a sanitized string. The value is sanitized using WordPress’s sanitize_url function (aliased to esc_url_raw), which ensures the input is a valid URL or returns an empty string if invalid.

Example

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

$this->fields = array(
    'general' => array(
        array(
            'name'        => __('Website', 'your-plugin-slug'),
            'type'        => 'url',
            'label'       => __('Your Website', 'your-plugin-slug'),
            'description' => __('Your Website', 'your-plugin-slug'),
            'default'     => 'https://example.com',
            'class'       => 'website-input',
            'help'        => __('Enter a website URL (e.g., https://www.example.com).', 'your-plugin-slug'),
            'required'    => true
        )
    )
);

This configuration will create a URL field labeled “Your Website” under the “general” section. It will have a default value of https://example.com, include the CSS class website-input, display a help message, and be marked as required.

Usage Notes

  • The url field uses WordPress’s sanitize_url (via esc_url_raw) for sanitization, ensuring the input is a valid URL. Invalid entries are sanitized to an empty string.
  • 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 required attribute triggers browser validation for a valid URL format, but server-side validation should also be implemented if critical.
  • The type="url" attribute enables browser-specific URL input features, such as URL-friendly keyboards on mobile devices.
  • To retrieve the value of a URL field, use the get_option method, e.g., $this->get_option('general', 'website').