Button

Description

The button field type creates one or more clickable buttons in the admin panel. Each button is rendered as an HTML anchor tag (<a>) styled with Bootstrap button classes. This field is useful for triggering actions, linking to external URLs, or executing JavaScript functions.

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 button. Yes –
label String The display label for the button group. If not provided, the name is used. No name
data Array An array of button configurations, each containing title, class, url, and target. Yes –
data[].title String The text displayed on the button. Also used to generate the button’s ID if provided. Yes –
data[].class String The Bootstrap button class (e.g., primary, secondary) to style the button. No primary
data[].url String The URL the button links to. If not provided, defaults to javascript:void(0);, useful for JavaScript-driven actions. No javascript:void(0);
data[].target String The target attribute for the link (e.g., _blank to open in a new tab). No –
class String Additional CSS classes to apply to all buttons in the group for custom styling or JavaScript targeting. No –


Note: The button field does not store values in the settings array, as it is an action-oriented field rather than an input. Buttons are primarily used for navigation or triggering events.

Example

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

$this->fields = array(
    'general' => array(
        array(
            'name'  => __('Button', 'your-plugin-slug'),
            'label' => __('Dual Buttons', 'your-plugin-slug'),
            'type'  => 'button',
            'class' => 'custom-buttons',
            'data'  => array(
                array(
                    'title' => 'Action 1',
                    'class' => 'primary'
                ),
                array(
                    'title'  => 'Action 2',
                    'class'  => 'secondary',
                    'url'    => 'https://www.polyplugins.com',
                    'target' => '_blank'
                )
            )
        )
    )
);

This configuration will create a button group labeled “Dual Buttons” under the “general” section. It includes two buttons: “Action 1” (primary style, no URL) and “Action 2” (secondary style, links to an external URL in a new tab). The buttons will have the CSS class custom-buttons.

Usage Notes

  • The button field uses WordPress’s esc_url for URL sanitization and esc_attr for other attributes to ensure security.
  • Each button’s ID is generated as {section}-{title} (if title is provided), with title sanitized using sanitize_title.
  • Buttons are styled using Bootstrap’s button classes (e.g., btn-primary, btn-secondary). Custom styles can be applied via the class parameter.
  • If no url is provided, the button uses javascript:void(0);, making it suitable for attaching JavaScript event listeners.
  • Since this field does not store data, it cannot be retrieved using the get_option method.