Custom Admin Columns in WordPress
Tags: php, wordpress, webdev
Published: 2020-10-28 20:15:25

When dealing with different content types likes pages, posts and custom posts, we sometimes need to add or customize our admin’s columns. Let’s say we have a featured image for every post in our posts. By default, WordPress will not show a thumbnail of the featured image in the main post management page:

![WordPress admin screenshot](https://yossiabramov.com/images/posts/custom-admin-cols/1.png)

You can check  `Screen Options`  on that same page and see that  `Featured image`  is not available as a checkable option:

![WordPress admin screenshot](https://yossiabramov.com/images/posts/custom-admin-cols/2.png)

Now, let’s say you have a custom field for all of your posts, maybe a field that contains a list of available translations of the post or any other field you might be thinking of. Your custom column can even contain some other type of data, maybe a “hit counter” or some other piece of analytics.

In this post I want to go over the two required WordPress functions for extending and customising your admin’s table columns. These functions apply to pages, posts and custom posts.

No matter what content type you are targeting, adding custom columns follows only two steps. The first step is to register the column with a  `filter`  and the second step is to handle its content with an  `action`.

### Custom Columns For Pages

For this example, let’s keep it simple and just add a  `page_id`  column.

1) Add the  `manage_pages_columns`  filter:

```php
<?php
function add_page_id_column_to_pages( $columns ) {
    $columns['page_id'] = 'Page Id';
    return $columns;
}
add_filter( 'manage_pages_columns', 'add_page_id_column_to_pages' );
```

2) Add  `manage_pages_custom_column`  action:

```php
<?php
function display_page_id( $column, $post_id ) {
    if($column === 'page_id'){
        echo $post_id;
    }
}
add_action( 'manage_pages_custom_column', 'display_page_id', 10, 2);
```

This will be the result:

![WordPress admin screenshot](https://yossiabramov.com/images/posts/custom-admin-cols/3.png)

### Custom Columns For Posts

Now, let’s add a Featured Image column to our posts page:

1)  `Add manage_posts_columns`  filter:

```php
<?php
function add_featured_image_thumb( $columns ) {
    $columns['featured_image'] = 'Featured Image';
    return $columns;
}
add_filter( 'manage_posts_columns', 'add_featured_image_thumb' );
```

2) Add  `manage_posts_custom_column`  action

```php
<?php
function display_featured_image( $column, $post_id ) {
    if($column === 'featured_image'){
        echo get_the_post_thumbnail($post_id, [100,100]);
    }
}
add_action( 'manage_posts_custom_column', 'display_featured_image', 10, 2);
```

This will be the result:

![WordPress admin screenshot](https://yossiabramov.com/images/posts/custom-admin-cols/4.png)

_Post featured image by  [Alessia Chinazzo](https://unsplash.com/@allyc_92?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)  on  [Unsplash](https://unsplash.com/s/photos/coffe?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

### Custom Columns For Custom Posts

Adding a custom column to custom post types is a bit different from what we previously saw. Our two functions will share this next form:  `manage_{custom_post_type}_posts_custom_column`.

For this example, let’s add a fake “Hit Counter” or “Viewed” column with some nice styles. Our custom post will be “Ads”.

1) After creating our “Ads” custom post type, let’s add the a “Viewed” column:

```php
<?php
function add_visited_column( $columns ) {
    $columns['visited'] = '<span class="dashicons dashicons-chart-line"></span> Visited';
    return $columns;
}
add_filter( 'manage_ads_posts_columns', 'add_visited_column' );
```

2) Now, Add the column content:

```php
function display_visits( $column, $post_id ) {
    if($column === 'visited'){
      echo '<span class="counter">1.7k</span>';
    }
}
add_action( 'manage_ads_posts_custom_column', 'display_visits', 10, 2);
```

In a real project you would probably populate this column with real data…

This will be the result:

![WordPress admin screenshot](https://yossiabramov.com/images/posts/custom-admin-cols/5.png)

_Post featured image by  [Charles Deluvio](https://unsplash.com/@charlesdeluvio?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)  on  [Unsplash](https://unsplash.com/s/photos/trump?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

✍ For more posts:
[https://yossiabramov.com/](https://yossiabramov.com/)