Actions

Actions are used to perform a global task or link to another page and are not linked to specific items. They are found in the dropdown next to the “Add new” button at the top of the view. All Index views come the “View trash” action, which opens a popover panel.

Registering actions

New actions are registered for individual post types:

PHP

// replace {$type} with the post type name
add_filter("index_{$type}_actions", function($actions) {
	return $actions;
});

Javascript

wp.hooks.addFilter(
  `${type}_actions`,
	'index',
	function(actions) {
		return actions
	},
	20
)

Required values

ID string

An internal identifier string that can be anything. The ID should have a namespace at the beginning to avoid duplicates.

Label string

The button text displayed to the user. The label should be under 20 characters.

Description string

A description of the action displayed beneath the label. The description should be under 40 characters.

Icon string | component

Valid Index icon string or a JSX SVG component. If you are using your own icon, it should be 18px by 18px with 1px of padding on all sides. See the icon documentation for more information.

Atts array

PHP: A valid list of HTML anchor tag attributes like href, target, id, etc.

Javascript: A valid list of HTML anchor tag attributes like href and target, plus an optional onClick field

Optional values

Color string

Valid Index color or CSS color. See the color documentation for more on colors.

---

onClick props

The onClick parameter passes back a variety of props to help you quickly confirm the action and alert the viewer when the action is completed:

labels object

The full list of labels passed into all Index views.

post_type string

The current post type name.

permissions object

The full list of permissions for the current user.

setNotification function

Display a toast notification to the viewer. Usually used when the modifier code has completed.

---

Example action

The following will create a new, green colored action for the Posts view, with an export icon and the label “Click Me”.

PHP

add_action('index_posts_actions', function($actions) {
   $actions[] = array(
				'label' => 'Click me',
				'description' => 'I do nothing when clicked',
				'icon' => 'export',
				'color' => 'green',
				'atts' => array(
           'href' => '#',
           'id' => 'custom-button'
       )
   );

   return $actions;
}

Javascript

wp.hooks.addFilter(
	'post_actions',
	'index',
	(actions) => {
		return actions.concat([{
			'label':  'Click me', 
      'description': 'I do nothing when clicked',
      'icon': 'export',
      'color': 'green',
			'atts': {
				'href': '#',
				'id': 'custom-button',
			}
		}])
	},
	10
)