Password

Description

The password field type creates a single-line input field in the admin panel, designed for entering sensitive data such as passwords. It is rendered as an HTML <input type="password"> element styled with Bootstrap’s form-control class, masking the input for security. This field is suitable for capturing credentials or other confidential text.

Warning: The password field stores its value in plain text in the WordPress database, as noted in the provided code. For enhanced security, consider encrypting sensitive data before storage.

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 password. Yes –
label String The display label for the password 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 password field. If set to false, the field will be empty by default. Use cautiously, as default passwords may pose a security risk. No false
class String Additional CSS classes to apply to the password 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 password field is stored in the settings array as a sanitized string. The value is sanitized using WordPress’s sanitize_text_field function, which removes unsafe characters but does not encrypt the data.

Example

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

$this->fields = array(
    'general' => array(
        array(
            'name'        => __('Password', 'your-plugin-slug'),
            'type'        => 'password',
            'label'       => __('Your Password', 'your-plugin-slug'),
            'description' => __('Enter a secure password. Note: This is stored as plain text.', 'your-plugin-slug'),
            'default'     => '',
            'class'       => 'password-input',
            'help'        => __('Enter a secure password. Note: This is stored as plain text.', 'your-plugin-slug'),
            'required'    => true
        )
    )
);

This configuration will create a password field labeled “Your Password” under the “general” section. It will be empty by default, include the CSS class password-input, display a help message warning about plain text storage, and be marked as required.

Usage Notes

  • The password field uses WordPress’s sanitize_text_field for sanitization, ensuring the input is safe for storage but not encrypted.
  • 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, but server-side validation should also be implemented for security-critical fields.
  • The type="password" attribute masks the input, preventing it from being displayed on the screen.
  • To retrieve the value of a password field, use the get_option method, e.g., $this->get_option('general', 'password'). Handle retrieved values securely.
  • For improved security, consider implementing encryption or hashing before storing sensitive data, as plain text storage is not recommended for passwords.