WP Snippet #015: Add a column to the posts admin overview page.

Originally posted on my website on June 28th 2020

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
/**
 * 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 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
/**
 * 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 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 and 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 and manage_pages_custom_column.

That's it. Simple but effective. 🙂

Follow

Found this post helpful? Follow me on twitter @Vanaf1979 or here on Dev.to @Vanaf1979 to be notified about new articles, and other web development related resources.

Thanks for reading and stay safe