Add a Custom Column in WordPress Posts and Custom Post Types Admin Screen

In this tutorial we will see how to add a new column to the WordPress Posts management screen and in this column we will show the Featured Image of each Post. This new column will also be added in the management screen of any active Custom Post Type.

Step 1. Activate Featured Images

In this tutorial we will use the functions.php file available in our active theme directory. If the file is not present, you can create a new one with the following contents:

1

<?php

2

// FUNCTIONS

3

?>

First of all, check if the Featured Image is available on the Add New Post page:

If you don’t see the Featured Image box, add this line to functions.php:

1

add_theme_support('post-thumbnails');

The add_theme_support() function registers support for the specified feature within the theme. The passed argument is a string that specifies the feature you want to add. In this case, it is post-thumbnails. Other values could be widgets, featured-content, menus etc.

We also set a custom size of 200 pixels that will be used to show the featured image’s preview:

1

add_image_size('featured_preview', 200, 150, false);

The add_image_size() function registers a new image size for us with width 200px and height set to 150px. We also tell WordPress to use resizing to achieve the desired size. However, you can set the fourth parameter to true to use cropping.

Step 2. Add Custom Column to the Posts Screen

Now we’ll add a new column in the Posts list table that will contain the featured image of each Post. But first, we need a function called ST4_get_featured_image() to get the featured image of a post.

Open the functions.php file in your theme directory and add this:

1

// GET FEATURED IMAGE

2

function ST4_get_featured_image($post_ID) {

3

    $post_thumbnail_id = get_post_thumbnail_id($post_ID);

4

	if ($post_thumbnail_id) {

5

		$post_thumbnail_img = wp_get_attachment_image_src($post_thumbnail_id, 'featured_preview');

6

		return $post_thumbnail_img[0];

7

	}

8

}

We use the get_post_thumbnail_id() function to get the post thumbnail ID. The term post thumbnail here refers to featured image.

And we define two functions: the first will add the new column, the second will call and show the featured image in every cell of the new column:

1

// ADD NEW COLUMN

2

function ST4_columns_head($defaults) {

3

    $defaults['featured_image'] = 'Featured Image';

4

	return $defaults;

5

}

6

// SHOW THE FEATURED IMAGE

7

function ST4_columns_content($column_name, $post_ID) {

8

	if ($column_name == 'featured_image') {

9

		$post_featured_image = ST4_get_featured_image($post_ID);

10

		if ($post_featured_image) {

11

			echo '<img src="http://webdesign.tutsplus.com/" . $post_featured_image . "http://webdesign.tutsplus.com/" />';

12

		}

13

	}

14

}

These two functions will be “hooked” into the WordPress core function that creates the Posts table.

About WordPress Hooks

Developers can modify WordPress default behavior through the WordPress APIs:

Hooks are provided by WordPress to allow your plugin to ‘hook into’ the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion.

In short, Hooks allow developers to extend WordPress features without editing core files. There are two types of Hooks: Actions and Filters. Both are launched during WordPress execution, but while Filters accept, transform and return an input, Actions return nothing, though can print everything you need.

In our case, the ST4_columns_head() function takes the $defaults array that contains the default Posts table columns (Title, Category, Tags and so on…), adds a new featured_image item to the array and returns it to the core function that WordPress uses to print the table HTML.

On the contrary, the ST4_columns_content() function accepts two variables ($column_name and $post_ID), and – depending on them – prints an output. To be more precise, ST4_columns_content() is invoked on each iteration of the loop that traverses the $defaults array. On each iteration, WordPress passes two arguments to our function: the column name and the post ID. The function analyzes all column names and when the name is equal to the one we specified in ST4_columns_head(), checks for featured image.

So, now we can hook our functions to WordPress plugin APIs.

We will use the manage_posts_columns filter to hook the ST4_columns_head() function. This filter can help us modify the columns displayed in the Posts list table.

Another hook that we are using is manage_posts_custom_column which will fire the hooked function for every custom column in the posts list table. Our ST4_columns_content() function checks that the column name matches the one for which we want to output the content.

1

add_filter('manage_posts_columns', 'ST4_columns_head');

2

add_action('manage_posts_custom_column', 'ST4_columns_content', 10, 2);

The 10 and 2 parameters are respectively: the order (priority) in which the function will be executed, and the number of arguments that the function accepts. Anyway, you can read more in the WordPress Codex under add_action.

Final Result

Now we can finally write a Post with a Featured Image:

So, when you open the manage Posts screen in /wp-admin/edit.php, you’ll see the new Featured Image column:

First two posts have the featured image, the third (a post without a featured image) does not, so nothing is displayed.

To show a default image for posts that don’t have a featured image, you can modify the ST4_columns_content() function this way:

1

<?php

2

function ST4_columns_content($column_name, $post_ID) {

3

    if ($column_name == 'featured_image') {

4

		$post_featured_image = ST4_get_featured_image($post_ID);

5

		if ($post_featured_image) {

6

			// HAS A FEATURED IMAGE

7

			echo '<img src="http://webdesign.tutsplus.com/" . $post_featured_image . "http://webdesign.tutsplus.com/" />';

8

		}

9

		else {

10

			// NO FEATURED IMAGE, SHOW THE DEFAULT ONE

11

			echo '<img src="http://webdesign.tutsplus.com/" . get_bloginfo( 'template_url' ); . '/images/default.jpg" />';

12

		}

13

	}

14

}

15

?>

The default.jpg image must be present in the images directory of our active theme.

You can also show / hide this new column by opening the Screen Options panel and clicking the Featured Image checkbox:

Step 3. Add the Featured Image Column to Custom Post Types

One of the most interesting and useful features of WordPress, is the possibility to add Custom Post Types (and also Custom Taxonomies). You can use post types to create new kinds of content, different from Posts and Pages, for example to manage a Movie database. In fact, when you add a custom post type, WordPress creates all the management pages for that post type: you can add, edit and delete those posts in the same way as default Posts and Pages.

Now we create a new Custom Post Type: Movies, through the WordPress register_post_type() function:

1

add_action('init', 'ST4_add_movies');  

2

function ST4_add_movies() {

3

    $args = array(

4

		'label' => __('Movies'),

5

		'singular_label' => __('Movie'),

6

		'public' => true,

7

		'show_ui' => true,

8

		'capability_type' => 'post',

9

		'hierarchical' => false,

10

		'rewrite' => true,

11

		'supports' => array('title', 'editor', 'thumbnail')

12

	);

13

	register_post_type( 'movie' , $args );

14

}

This function lets you register a new post type. You should note that we are using the init hook to make a call to ST4_add_movies() which then registers our movie post type. The array of arguments that we pass to the the register_post_type() function determines how the custom post type will behave. In this case, we have set the value of show_ui key to true. This generates the UI needed for managing the movie post type through the admin dashboard.

So, when you add a featured image to a Movie post…

… you will see the featured image also in the manage Movies screen (note that also here you can show / hide the column in the Screen Options):

Other Usages

Adding the Custom Column Depending on Post Type

If you use the manage_posts_columns and manage_posts_custom_column hooks, the column will be shown in all manage posts screens. These filters in fact will work for posts of all types except Pages.

1

// ALL POST TYPES: posts AND custom post types

2

add_filter('manage_posts_columns', 'ST4_columns_head');

3

add_action('manage_posts_custom_column', 'ST4_columns_content', 10, 2);

If you want to add a column only in the manage Posts screen use:

1

// ONLY WORDPRESS DEFAULT POSTS

2

add_filter('manage_post_posts_columns', 'ST4_columns_head', 10);

3

add_action('manage_post_posts_custom_column', 'ST4_columns_content', 10, 2);

If you want to add a column only in the manage Pages screen use:

1

// ONLY WORDPRESS DEFAULT PAGES

2

add_filter('manage_page_posts_columns', 'ST4_columns_head', 10);

3

add_action('manage_page_posts_custom_column', 'ST4_columns_content', 10, 2);

If you want to add a column only in the manage Movies screen use:

1

// ONLY MOVIE CUSTOM TYPE POSTS

2

add_filter('manage_movie_posts_columns', 'ST4_columns_head_only_movies', 10);

3

add_action('manage_movie_posts_custom_column', 'ST4_columns_content_only_movies', 10, 2);

4

5

// CREATE TWO FUNCTIONS TO HANDLE THE COLUMN

6

function ST4_columns_head_only_movies($defaults) {

7

    $defaults['directors_name'] = 'Director';

8

	return $defaults;

9

}

10

11

function ST4_columns_content_only_movies($column_name, $post_ID) {

12

	if ($column_name == 'directors_name') {

13

		// show content of 'directors_name' column

14

	}

15

}

Add the Custom Column to Another Post Type

If you have other Custom Post Types, you can easily add the featured image column to them. If you added the post type manually, check the file where the custom post is added and look for the first argument of the register_post_type() function:

1

register_post_type( 'book' , $args ); // book is the post type

If the custom post type is defined through another plugin and/or you can’t find where the register_post_type() is, open the Custom Post management screen in your browser and check the URL:

1

http://www.yoursite.com/wp-admin/edit.php?post_type=<u>book</u>

In this case, book is the post type.

Finally, modify the hooks this way, replacing movie with book:

1

add_filter('manage_book_posts_columns', 'ST4_columns_book_head');

2

add_action('manage_book_posts_custom_column', 'ST4_columns_book_content', 10, 2);

Don’t forget to create two functions: ST4_columns_book_head() to create the column, and ST4_columns_book_content() to display the column content.

Add Two Custom Columns

If you need to add more than one column, you can easily do this:

1

// ADD TWO NEW COLUMNS

2

function ST4_columns_head($defaults) {

3

    $defaults['first_column']  = 'First Column';

4

    $defaults['second_column'] = 'Second Column';

5

    return $defaults;

6

}

7

8

function ST4_columns_content($column_name, $post_ID) {

9

    if ($column_name == 'first_column') {

10

        // First column

11

    }

12

    if ($column_name == 'second_column') {

13

        // Second column

14

    }

15

}

Remove Default Columns

You can also remove a WordPress default column, for example the Category column in the posts management screen:

1

add_filter('manage_post_posts_columns', 'ST4_columns_remove_category');

2

3

// REMOVE DEFAULT CATEGORY COLUMN

4

function ST4_columns_remove_category($defaults) {

5

    // to get defaults column names:

6

    // print_r($defaults);

7

    unset($defaults['categories']);

8

    return $defaults;

9

}