Index Logo

Adding custom columns to table views

Index provides a filter for adding custom columns to an archive’s table view, similar to the built-in WordPress functionality. While it’s not possible to automatically display existing custom columns added to the default WordPress table view (read more in our FAQ), you can quickly add your columns with a standard WordPress filter.

This article only applies to the actual table view in Index and will not work with the grid view.

Adding the filter

The filter for adding custom columns is formatted exactly like the default WordPress filter, but with blt- added to the beginning:

add_filters("blt-manage_{$post_type}-columns", $yourFunction);

Make sure to replace $post_type with your post type (ex: ‘posts’, ‘page’, etc) and $yourFunction with whatever function you want to use. 

Passing new columns to your function

Your function should take the passed in array of custom columns as the single parameter (by default an empty array), and append any new ones you want to display at the top of the page. 

This example adds a featured column with the header ‘Featured’, and a width of 100px:

function yourFunction($columns) {
    $columns['featured'] = array(
        'label' => 'Featured',
        'width' => '100px', // width can be px units, fr units, or minmax(value, value)
    );

    return $columns;
}

Setting up your custom column’s content

While the filter sets up the column to be added to the table, you still need to setup an action to actually show content in each row:

add_action("blt-manage_{$post_type}_posts_custom_column", $yourFunction, 10, 2);

Make sure to replace $post_type with your post type (ex: ‘posts’, ‘page’, etc) and $yourFunction with whatever function you want to use. Also make sure to keep the 10 and 2 parameters (they are for the priority (10) and number of arguments (2)).

Note: this is the exact same process as the ‘manage_{post_type}_posts_custom_column’ action supplied by WordPress. Learn more about that action here.

Completing setup of your custom column’s content

To display your content in each row, add a function that takes two arguments: the column name and id of the post (each row is a separate post). 

function yourFunction($column, $post_id)  {
    if($column == 'featured') {
        echo get_meta_field('featured', $post_id);
    }
}

The content is echoed and not returned. The function above is responsible for all of your custom columns, so if you have more than one, you would put multiple logic statements in this one function.

Toggling your column’s visibility

Custom columns are turned on by default but can be hidden like any other column in Index via the Settings panel.

Javascript functionality

Column content is injected as HTML into the react powered archive, so please make sure any javascript events are correctly scoped. If you are having issues with javascript events not firing, please make sure to check the following:

  • See if your javascript is loaded before Index
  • Try attaching events to the body and scoping them to your element

Get started for free

Try Index free for 14 days and see for yourself why it's the best interface for managing your WordPress content — no credit card required.

Start your free trial