WP Snippet #015: Add a column to the posts admin overview page.
Tags: wordpress, php, javascript
Published: 2020-06-28 18:10:17

---
title: WP Snippet #015: Add a column to the posts admin overview page.
published: true
description: In this article we will have a look at how we can add a custom culumn to the posts, or pages, overview in the WordPress admin
canonical_url: https://since1979.dev/add-a-column-to-the-posts-admin-overview-page/
cover_image: https://since1979.dev/wp-content/uploads/2020/06/snippet-add-column-to-post-overview.jpg
tags: wordpress, php, javascript
---
[Originally posted on my website on June 28th 2020](https://since1979.dev/add-a-column-to-the-posts-admin-overview-page/)

### How to add a custom column to the posts admin overview page.

In this article we will have a look at how we can add a custom culumn to the posts, or pages, overview in the WordPress admin. That page that lists all the posts or pages. There are many valid reasons why you would want to add a column here but in this article we are going to add a very silly column with a view post link. It's silly because there already is a Preview link. So it's up to you to come up with a meaningful function for this.

### Registering the column

The first step is to actually register our new column with WordPress so that it gets added to the page. For this task we can copy the code below to the *functions.php* file inside of our theme.

```php
<?php
/**
 * add_view_post_overview_column.
 *
 * Add a column to the posts overview/list.
 *
 * @see https://since1979.dev/add-a-column-to-the-posts-admin-overview-page/
 * @uses __() https://developer.wordpress.org/reference/functions/__/
 */
function add_view_post_overview_column($columns)
{
    $cols = array();
    foreach ($columns as $col_name => $col_data) {
        $cols[$col_name] = $col_data;
        if ($col_name === 'title') {
            $cols['viewpost'] = __('View post', 'namespace');
        }
    }
    return $cols;
}

/**
 * Hook: manage_posts_columns.
 *
 * @uses add_action() https://developer.wordpress.org/reference/functions/add_action/
 * @uses manage_posts_columns https://developer.wordpress.org/reference/hooks/manage_posts_columns/
 */
add_filter('manage_posts_columns', 'add_view_post_overview_column', 20);
?>
```
Here we add a filter to the *[manage_posts_columns](https://developer.wordpress.org/reference/hooks/manage_posts_columns/)* hook and register a callback function called *add_view_post_overview_column* that excepts an array with the already registered columns.

Inside our new function we first create a new array by the name of *$cols*. Then we loop over the passed in *$columns* array and add each item to our *$cols* array. Inside the loop we also check if the current column name is equal to *'title'* and if so we add a new item to the $cols array by giving it a key of *'viewpost'* and set that to a translatable string 'View post'.

Finally we return our newly created *$cols* array.

With this code we know have our *View post* column listed to the right of the *Post title* column on the *All posts* page inside the WordPress admin.

### Adding content to the new column

Now that we have our new custom column we need to fill it with some useful content. For this task we need add the following code to our *function.php*..

```php
<?php
/**
 * add_view_post_overview_column_content.
 *
 * Add content to the viewpost post overview/list column.
 *
 * @see https://since1979.dev/add-a-column-to-the-posts-admin-overview-page/
 * @uses get_permalink() https://developer.wordpress.org/reference/functions/get_permalink/
 * @uses get_the_ID() https://developer.wordpress.org/reference/functions/get_the_id/
 */
function add_view_post_overview_column_content($column)
{
    if ($column !== 'viewpost') {
        return;
    }

    echo '<a href="' . get_permalink(get_the_ID()) . '" target="_blank">View post</a>';
}

/**
 * Hook: manage_posts_custom_column.
 *
 * @uses add_action() https://developer.wordpress.org/reference/functions/add_action/
 * @uses manage_posts_custom_column https://developer.wordpress.org/reference/hooks/manage_posts_custom_column/
 */
add_action('manage_posts_custom_column', 'add_view_post_overview_column_content');
?>
```
In the code above we add an action to the *[manage_posts_custom_column](https://developer.wordpress.org/reference/hooks/manage_posts_custom_column/)* hook and register a callback function by the name of *add_view_post_overview_column_content* that excepts a string with the name of the current column.

Inside this function we check to see if the current column name is equal to the *'viewpost'* column we registered earlier. If not we simply return out of the function. If it is equal we echo out a link (a) element and use the *[get_permalink](https://developer.wordpress.org/reference/functions/get_permalink/)* and *[get_the_ID](https://developer.wordpress.org/reference/functions/get_the_id/)* functions. to get the Url of he current post.

With all of this we should now have a new column called 'View post' that has a *View post* link on each row.

### Custom columns for pages.

if we want to add a column to the Pages overview we can swap out the hooks with *[manage_pages_columns](https://developer.wordpress.org/reference/hooks/manage_pages_columns/)* and *[manage_pages_custom_column](https://developer.wordpress.org/reference/hooks/manage_pages_custom_column/)*.

That's it. Simple but effective. 🙂

### Follow

Found this post helpful? Follow me on twitter [@Vanaf1979](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other web development related resources.

**Thanks for reading and stay safe**