How to create your own settings page with Automator

Difficulty: Easy

To enhance the user experience while developing an Automator integration, it is essential to put all your settings in the place where users expect to find them, on the Automator settings page.

On the settings page, you will find three tab groups:

• Top-level tabs: “General” and “Premium integrations”.
• General tabs: “License”, “Logs” and “Improve Automator”.
• Premium integration tabs: “Active Campaign”, “Twitter”, etc.

A new tab can be created in any group of tabs by following the steps below:

1. Filter the array that contains the tabs.
2. Push an object of settings to the array.
3. Create the function that outputs the tab content.

Top-level tabs

1. Filter the array that contains the tabs

As a first step, filter the array that contains all top-level tabs using the filter automator_settings_sections.

add_filter(
	'automator_settings_sections',
	'create_automator_settings_top_level',
	99,
	1
);

2. Push an object of settings to the array

The filter expects an object with two properties:

• name: (String) The name of the tab
• function: (Callback) The name of the function used to output the tab content

function create_automator_settings_top_level( $tabs ) {
	$tabs[ 'custom-tab' ] = (object) array(
		'name' => esc_html__( 'Custom tab', 'text-domain' ),
		'function' => 'automator_settings_top_level_output',
	);

	return $tabs;
}

3. Create the function that outputs the tab content

function automator_settings_top_level_output() {
	echo 'Output';
}

General tabs

1. Filter the array that contains the tabs

As a first step, filter the array that contains all top-level tabs using the filter automator_settings_general_tabs.

add_filter(
	'automator_settings_general_tabs',
	'create_automator_settings_general',
	99,
	1
);

2. Push an object of settings to the array

The filter expects an object with two properties:

• name: (String) The name of the tab
• function: (Callback) The name of the function used to output the tab content

function create_automator_settings_general( $tabs ) {
	$tabs[ 'custom-tab' ] = (object) array(
		'name' => esc_html__( 'Custom tab', 'text-domain' ),
		'function' => 'automator_settings_general_output',
	);

	return $tabs;
}

3. Create the function that outputs the tab content

function automator_settings_general_output() {
	echo 'Output';
}

Premium integrations tabs

This method uses a filter. It’s also easy to create custom integration tabs using Automator’s trait. See how to do it. Additionally, you may want to check out our GitHub repository to see how we developed the settings page for our Google Sheets integration.

1. Filter the array that contains the tabs

As a first step, filter the array that contains all top-level tabs using the filter automator_settings_general_tabs.

add_filter(
	'automator_settings_general_tabs',
	'create_automator_settings_general',
	99,
	1
);

2. Push an object of settings to the array

The filter expects an object with two properties:

• name: (String) The name of the tab
• status: (String) Either “success” or an empty string. “success” adds a green check icon to the tab
• function: (Callback) The name of the function used to output the tab content

function create_automator_settings_premium_integrations( $tabs ) {
	$tabs[ 'custom-integration' ] = (object) array(
		'name'     => esc_html__( 'Custom integration', 'text-domain' ),
		'status'   => 'success', // Either "success" or empty
		'function' => 'automator_settings_premium_integration_output',
	);

	return $tabs;
}

3. Create the function that outputs the tab content

function automator_settings_premium_integration_output() {
	echo 'Output';
}