The next version of Index is here! To celebrate, take 25% off your purchase with the code 25OFF. Learn more
Index Logo

Views

Views handle the layout and display of individual items returned from a post type’s REST request. Instead of creating an entire view, this resource creates new single items in addition to settings to handle the view type, padding, and mobile customizations. New views are registered with PHP and require an additional Javascript hook to output content.

Registering a new view

Views are registered globally in PHP and can be accessed by any Index powered post type:

add_filter('index_views', function($views) {
	return $views;
});

Required values

id string

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

name string

The name of the view presented to viewers when selecting a view in settings

style string

The view style. Can be “table” or “grid”


Optional values

className string

A set of CSS class attributes to apply to the overall view. This isn’t normally needed, but you may want to apply some custom CSS to your overall view.


Setting up view items

In order to correctly use custom views, a view item needs to be configured in React as a JSX component. The filter is configured as view_${id} where ${id} refers to the id value you created in the PHP index_views filter.

wp.hooks.addFilter(
	`view_${id}`,
	'index',
	function(view) {
		return Object.assign({}, view, {
			component: function() {
				// return the JSX code rendered for each item in the view
			}
		})
	}
)

Example

add_filter('index_views', function($views) {
	$views[] = [
		'id' => 'my-custom-view',
		'name' => 'My custom view',
		'style' => 'grid',
	];
	return $views;
});
wp.hooks.addFilter(
	'view_my-custom-view',
	'index',
	function(view) {
		return Object.assign({}, view, {
			component: function(props) {
				return <p>I am a view item</p>
			}
		})
	}
)

Next steps

To learn how to fully configure your view items, read the next section: View Items [LINK]

Resources

Get started with Index

See for yourself why Index is the most intuitive, beautiful interface for managing your WordPress content.