Advanced Custom Fields & Admin Custom Columns

In this tutorial, we will add 2 extra fields to the page object:

  • Page Image: An image field (we can show this as a thumbnail in the column)
  • Featured: A true / false field (we can filter the pages via this field)

 1. Add extra page fields

Using the Advanced Custom Fields Plugin, add a new ACF group with the 2 fields. Note: The image field needs to save the attachment ID so we can easily retrieve the thumbnail version for the column.

2. Add a sprinkle of code

Now that our pages have extra fields, let’s add in the code to show the fields in the page’s columns. The 2 functions bellow hook into WordPress and override the column creation process. the “my_page_columns” function overrides what the columns are and the “my_custom_columns” function tells WordPress what to do with the columns.

<?php

/*-------------------------------------------------------------------------------
	Custom Columns
-------------------------------------------------------------------------------*/

function my_page_columns($columns)
{
	$columns = array(
		'cb'	 	=> '<input type="checkbox" />',
		'thumbnail'	=>	'Thumbnail',
		'title' 	=> 'Title',
		'featured' 	=> 'Featured',
		'author'	=>	'Author',
		'date'		=>	'Date',
	);
	return $columns;
}

function my_custom_columns($column)
{
	global $post;
	if($column == 'thumbnail')
	{
		echo wp_get_attachment_image( get_field('page_image', $post->ID), array(200,200) );
	}
	elseif($column == 'featured')
	{
		if(get_field('featured'))
		{
			echo 'Yes';
		}
		else
		{
			echo 'No';
		}
	}
}

add_action("manage_pages_custom_column", "my_custom_columns");
add_filter("manage_edit-page_columns", "my_page_columns");

This is what your page columns should look like

 3. And a pinch of salt: Sortable Columns

To finish of this tutorial, lets now allow the featured column to be sortable. This can be a very useful feature when working with lots of page / post objects.

<?php

/*-------------------------------------------------------------------------------
	Sortable Columns
-------------------------------------------------------------------------------*/

function my_column_register_sortable( $columns )
{
	$columns['featured'] = 'featured';
	return $columns;
}

add_filter("manage_edit-page_sortable_columns", "my_column_register_sortable" );

?>

Wrapping Up

I hope you enjoyed this simple but useful tutorial. We covered some advanced WordPress & PHP techniques and created an attractive and user friendly admin edit page. Be sure to tweet about this article, thanks for reading.

Thank you for reading

Join in the discussion bellow by tweeting about this post.

Sean Rhorer

8 Aug 2011

Seems like a simple tutorial… except there’s no mention of where to make these changes in the code! Any guidance would be greatly appreciated. Thanks!

admin

8 Aug 2011

Hi Sean.
All the code above needs to go into your functions.php file. Good luck

Dan

8 Aug 2011

Hi Elliot

Great tutorial. How can I add this to a Custom Post Type instead? Thanks

Dan

8 Aug 2011

Ignore my previous comment, I should have studied the code a bit harder at first…

add_action(“manage_(your custom post type)_custom_column”, “my_custom_columns”);
add_filter(“manage_edit-(your custom post type)_columns”, “my_page_columns”);

Rory

2 Feb 2012

In response to what Dan said about using this for Custom Post Types – you DON’T need to include your post type on both instances like indicated above.

You instead change “pages” to “posts” on the add_action line:
add_action(“manage_posts_custom_column”, “my_custom_columns”);

Add include your post type name only on the add_filter line:
add_filter(“manage_edit-MY*CUSTOM*POST*TYPE_columns”, “my_page_columns”);

Alberto "Raben" Macaluso

8 Aug 2011

Very interesting tutorial. The idea of ​​creating tutorials for developers is really brilliant! thank you very much

Kien Le

9 Sep 2011

How to add value in php code?

Jonah West

10 Oct 2011

Hey Elliot,

I’m having trouble getting this to work for a custom post type. Here is the code I’ve got:


/*-------------------------------------------------------------------------------
Add Admin Columns and Sorting for Editorials
-------------------------------------------------------------------------------*/
function my_post_columns($columns)
{
$columns = array(
'cb' => '',
'title' => 'Title',
'editorial-author' => 'Author',
'date' => 'Date',
);
return $columns;
}

function my_custom_columns($column) {
global $post;
if($column == 'editorial-author') {
if(get_field('author')) {
the_field('author');
}
}
}

function my_column_register_sortable( $columns )
{
$columns['editorial-author'] = 'editorial-author';
return $columns;
}

add_filter("manage_edit-editorials_sortable_columns", "my_column_register_sortable" );

add_action("manage_editorials_posts_custom_column", "my_custom_columns");
add_filter("manage_edit-editorials_columns", "my_post_columns");

Any ideas?

Thanks,
Jonah

Antoine

10 Oct 2011

I can’t manage to find what goes wrong in this code (I use Blackbox for Debug using Profiler) :
add_action("manage_posts_custom_column", "my_custom");
function my_custom() { apply_filters('debug', 'Profiler Checkpoint'); } // FAILS
add_action("manage_posts_custom_column", apply_filters('debug', 'Profiler Checkpoint in Anonymous function')); // WORKS

Bobe

10 Oct 2011

I love your tutorials!

I have on question, I hope someone can help me.. I customized the code a little bit, adding Taxonomy term. But the thumbnail and the term doesn’t show. The columns are created but without content. Thanks so much!!


function my_page_columns($columns)
{
$columns = array(
'cb' => '',
'thumbnail' => 'Thumbnail',
'title' => 'Title',
'cat' => 'Product Category',
'date' => 'Date',
);
return $columns;
}

function my_custom_columns($column)
{
global $post;
if($column == 'thumbnail')
{
echo wp_get_attachment_image( get_field('product_images', $post->ID), array(200,200) );
}
elseif($column == 'cat')
{
$terms = get_the_terms( $post->ID, 'productcategories');
if ($terms) {
foreach ($terms as $term => $myterm) {
echo 'slug.'&post_type=products">'.$myterm->slug.'';
}
}
}
}

add_action("manage_products_custom_column", "my_custom_columns");
add_filter("manage_edit-products_columns", "my_page_columns");

Bobe

10 Oct 2011

Oh, some code dissapeared. Hope it works this time. It should say

echo 'slug.'&post_type=products">'.$myterm->slug.'';

Bobe

10 Oct 2011

Since my code isn’t interpreted correctly when I publish it here, i’ve created a page where you can see it: http://jakebox.com/test-2

Sorry and thanks!

Maja

11 Nov 2011

How could I get a list of categories to display in a drop-down list so users don’t forgetto select a category?

Thanks,
Maja

Rory

2 Feb 2012

Elliot, you are a god amongst men. Thank you for this article

Mark Murphy

3 Mar 2012

Actually, for a custom post type, the add_action call needs to look like this, where post_type is the singular name you registered. Note ‘_posts_’. My post_type below is ‘message’. Hope this sames someone some time 🙂

add_action(“manage_message_posts_custom_column”, “messages_custom_column”);

@mr_d09

4 Apr 2013

Hi Elliot do you please post a example for Post Object data http://t.co/vyLt04L1Jj via @elliotcondon

Thanks again

Join in the discussion by tweeting about this post.