Advanced Custom Fields & Admin Custom Columns

Written July 13, 2011
Tagged ,

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.

Elliot Condon is a Melbourne based web developer, creator of the popular Advanced Custom Fields plugin.

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.