Admin Column Text Positioning

by

I have added a custom field to my custom post type and I have got it to output on the admin overview screen. However the text appears to be out of alignment with the column heading and I can’t figure out why.

enter image description here

Here is my code to the columns:

public function __construct() {
    add_filter( 'manage_'.$this->attributes['slug'].'_posts_columns', [$this,'customAdminColumns'] );
    add_action( 'manage_'.$this->attributes['slug'].'_posts_custom_column' , [$this,'customAdminColumnData'], 10, 2 );
}

public function customAdminColumns($columns){
    $insert=array(
        'file_type' =>  'File Type'
    );

    array_splice($columns,3,0,$insert);

    return $columns;
}

public function customAdminColumnData($column,$post_id){
    switch($column){
        case 'file_type':
            $media_id=  get_post_meta($post_id,'downloads_file',true);

            echo get_post_mime_type($media_id);

            break;
    }
}

I’m fairly sure I have just overlooked something but I can’t think what.

Can anyone provide any guidance on this?

1 Answer
1

The Problem

If you inspect the column (i.e. the “File Type” column), you’d see something like this markup/HTML:

<th scope="col" id="0" class="manage-column column-0 num">File Type</th>

and this for a td element in that column:

<td class="0 column-0" data-colname="File Type">text/csv</td>

So the problem, as you can see in the id and class attributes, is the column’s key, which is zero (0) when it should have been file_type like you can see below:

<th scope="col" id="file_type" class="manage-column column-file_type">File Type</th>

<td class="file_type column-file_type" data-colname="File Type">text/csv</td>

And that is because, in your customAdminColumns() function, you used array_splice() which if you read its doc, you’d see the following text:

Note that keys in replacement array are not preserved.

So referring to your code:

$insert=array(
    'file_type' =>  'File Type'
);

array_splice($columns,3,0,$insert);

The file_type key in $insert (the replacement array) will not be preserved and PHP will change it to a numeric key based on its/PHP’s own calculation.

So in my case, the key was changed to 0.

The Solution

Option 1: Loop through the $columns array and insert the file_type item at the preferred position.

public function customAdminColumns($columns){
    $columns2 = [];
    $i = 0;
    foreach ( $columns as $key => $label ) {
        if ( 3 === $i ) {
            $columns2['file_type'] = 'File Type';
        }
        $columns2[ $key ] = $label;
        $i++;
    }
    $columns = $columns2;
    unset( $columns2 );

    return $columns;
}

Option 2: Use array_slice() – slice the $columns array until the preferred index/position, append the file_type item into the sliced array, then append the remaining items from $columns.

public function customAdminColumns($columns){
    $columns2 = array_slice( $columns, 0, 3 );
    $columns2['file_type'] = 'File Type';
    $columns = $columns2 + array_slice( $columns, 3 );
    unset( $columns2 );

    return $columns;
}

Leave a Comment