Create Admin Columns In WordPress

The columns that appear in the list view of posts, pages, custom post types, and taxonomies in WordPress are known as admin columns. WordPress comes with a number of columns by default, but you may also build your own to display more data.

Here’s an article on how to make WordPress admin columns using OOP principles.

Is OOP necessary?

No, you could go with procedural code, but here we want a more elegant way of doing it, so no more talk, let’s see the code.

/**
 * Class for custom columns
 * 
 *  @package    weszty_web
 *  @author     Vecsei Szilveszter
 *  @copyright  Copyright (c) 2021, WesztyWeb
 *  @link       https://wesztyweb.com
 *  @since      1.0.0
 */

if ( ! class_exists( 'Weszty_WordPress_Column' ) ) {

    class Weszty_WordPress_Column {
        
        public $options = array();
		
        private $defaults = array(
            'post_type' 	=> 'post',
            'column_key' 	=> '',
            'column_title' 	=> '',
            'column_display' 	=> 'column_key'
        );
        
        public function __construct( $options ) {
        
            $this->options = $options;
            
        }
        
        public function action( $action ) {

            if ( 'add' !== $action  && 'remove' !== $action ) {
                $message = esc_html__( 'Column action is not defined', 'wesztyweb' );
                throw new Exception( $message );
            }
            
            $post_type = '';

            if ( $this->options['post_type'] != 'post' && $this->options['post_type'] != 'page' ) {
                $post_type = '_' . $this->options['post_type'];
            }

            $for_type = 'posts';

            if ( $this->options['post_type'] == 'page' ) {
                $for_type = 'pages';
            }

            if ( 'add' == $action )
                add_filter( 'manage' . $post_type . '_' . $for_type . '_columns', array( $this, 'add_column' ) );
            else
                add_filter( 'manage' . $post_type . '_' . $for_type . '_columns', array( $this, 'remove_column' ) );

            add_action( 'manage' . $post_type . '_' . $for_type . '_custom_column', array( $this, 'column_data' ), 10, 2 );
        }

        public function add_column( $columns ) {
            $columns[ $this->options['column_key'] ] = $this->options['column_title'];
            return $columns;
        }

        public function do_action( $action ) {
            foreach ( $this->options as $column ) {
                
                $column = array_merge( $this->defaults, $column );
                
                if( $column['column_key'] == '' ) {
                    $message = esc_html__( 'Column key is not defined', 'wesztyweb' );
                    throw new Exception( $message );
                }

                if( $column['column_title'] == '' ) {
                    $column['column_title'] = ucfirst( $this->options['column_key'] );
                }
                
                $the_column = new Weszty_WordPress_Column( $column );
                $the_column->action( $action );
                
            }
        }

        public function remove_column( $columns ) {

            unset( $columns[ $this->options['column_key'] ] );
            return $columns;
        }
        
        public function column_data( $column, $post_id ) {

            if ( $column === $this->options['column_key'] ) {
                if ( 'column_key' === $this->options['column_display'] ) {
                    echo wp_kses_post( get_post_meta( $post_id, $this->options['column_key'], true ) );
                } else {
                    $function_name = $this->options['column_display'];
                    call_user_func_array( $function_name, array( $post_id, $this->options['column_key'] ) );
                }
            }
        }
    }
}

How to use it?

We will pass a multidimensional, associative array to our class with all the columns we need for each post type, and render them using the Factory Pattern.

public function initialize_custom_columns() {
        
    $columns = array (
        array(
            'post_type'      => 'page',
            'column_key'     => 'custom-components-field',
            'column_title'   => esc_html__( 'Custom Block', 'weszty_web' ),
            'column_display' => 'Weszty_Helpers::render_meta_by_id'
        ),
    );
    
    $columns = new Weszty_WordPress_Column( $columns );
    
    $columns->do_action( 'add' );
}

The way we display the data it all depends on our render method, here is where we can process more complex meta.

/**
 * Display post meta
 *
 * @param [type] $post_id
 * @param [type] $column_key
 * @return string
 */
public static function render_meta_by_id( $post_id, $column_key ) {
    $meta = get_post_meta( $post_id, $column_key, true );
    echo strtoupper( $meta );
}

In my case I have a class called Weszty_List_Table_Admin where I have a method initialize_custom_columns();

$list_table = new Weszty_List_Table_Admin();
add_action( 'admin_init', [ $list_table, 'initialize_custom_columns' ] );

This method works better for me because, I can see all hooks from each class.

All of that could have been accomplished using regular functions, but we would then need to modify or create new functions for each additional custom column.