How to Add a Featured Image Column for Posts and Pages in WordPress Admin

In this tutorial, we’ll walk you through the process of adding a featured image column to the WordPress admin panel without relying on plugins. This enhancement can be invaluable for both beginners and experienced developers, as it provides quick access to featured images when managing posts or custom post types. By the end of this tutorial, you’ll have a clear understanding of how to implement this feature in your WordPress site, boosting your content management efficiency.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Add the Function for the Featured Image Column

To create the featured image column, open your theme’s functions.php file and add the following code snippet:

// Add a custom column to the admin panel for posts and pages.
function custom_add_featured_image_column( $columns ) {
	// Create an empty array to hold column settings.
	$new_columns = array();

	// Add a new column named 'Featured Image'.
	$new_columns['featured_image'] = 'Featured Image';

	// Merge the new column with the existing columns.
	$columns = $new_columns + $columns;

	return $columns;
}
// Apply the custom column to posts.
add_filter( 'manage_posts_columns', 'custom_add_featured_image_column' );
// Apply the custom column to pages.
add_filter( 'manage_pages_columns', 'custom_add_featured_image_column' );
Code language: PHP (php)

Explanation:

  • This code defines a custom function named custom_add_featured_image_column that adds a new column to the WordPress admin panel for both posts and pages.
  • The function begins by creating an empty array named $new_columns to hold the settings for our custom column.
  • Within the $new_columns array, we add a key-value pair with the key 'featured_image' and the value 'Featured Image'. This sets the name of our custom column to “Featured Image.”
  • After defining the new column, we merge it with the existing columns that are displayed in the WordPress admin panel. This ensures that our custom column is added alongside the default columns.
  • Finally, the function returns the modified $columns array, which now includes our custom column settings.
  • To apply this custom column to posts, we use the add_filter function with the 'manage_posts_columns' filter hook, and for pages, we use the same function with the 'manage_pages_columns' filter hook.

This code snippet sets up the foundation for adding the custom “Featured Image” column to the WordPress admin panel, making it available for both posts and pages.

Display the Featured Image

To display the featured image in the new column, add the following code snippet immediately below the previous one in the functions.php file:

// Display the featured image in the custom column.
function custom_display_featured_image_column( $column, $post_id ) {
	if ( $column === 'featured_image' ) {
		// Retrieve and display the featured image in a custom size (60x60 pixels).
		echo get_the_post_thumbnail( $post_id, array( 60, 60 ) );
	}
}
// Hook to display the custom column for posts.
add_action( 'manage_posts_custom_column', 'custom_display_featured_image_column', 10, 2 );
// Hook to display the custom column for pages.
add_action( 'manage_pages_custom_column', 'custom_display_featured_image_column', 10, 2 );
Code language: PHP (php)

Explanation:

  • In this code, we define a function named custom_display_featured_image_column.
  • Inside this function, we check if the current column being processed is our custom column with the identifier 'featured_image'.
  • If it is, we use get_the_post_thumbnail to retrieve and display the featured image in a custom size of 60×60 pixels.

Add Custom CSS

Let’s add custom CSS to adjust the column width. Add the following code snippet to your theme’s functions.php file:

// Add custom CSS for adjusting the width of the 'Featured Image' column.
function custom_admin_column_css() {
	echo '<style>
        /* Adjust the width of the "Featured Image" column to 60 pixels */
        .column-featured_image {
            width: 60px;
        }
    </style>';
}
add_action( 'admin_head', 'custom_admin_column_css' );
Code language: PHP (php)

Explanation:

  • This code defines a function named custom_admin_column_css that generates custom CSS styles.
  • The CSS styles adjust the width of the “Featured Image” column to 60 pixels.

Save the File

After adding both code snippets to your functions.php file, save the file to apply the changes. Your WordPress admin panel will now include a ‘Featured Image’ column when you view the list of posts or pages.

Full Code: Here’s the complete code for adding the featured image column. I’ve added comments to explain each part of the code, making it easier to understand how the featured image column is added and displayed in the WordPress admin panel.

// Add a custom column to the admin panel for posts and pages.
function custom_add_featured_image_column( $columns ) {
	// Create an empty array to hold column settings.
	$new_columns = array();

	// Add a new column named 'Featured Image'.
	$new_columns['featured_image'] = 'Featured Image';

	// Merge the new column with the existing columns.
	$columns = $new_columns + $columns;

	return $columns;
}
// Apply the custom column to posts.
add_filter( 'manage_posts_columns', 'custom_add_featured_image_column' );
// Apply the custom column to pages.
add_filter( 'manage_pages_columns', 'custom_add_featured_image_column' );

// Display the featured image in the custom column.
function custom_display_featured_image_column( $column, $post_id ) {
	if ( $column === 'featured_image' ) {
		// Retrieve and display the featured image in a custom size (60x60 pixels).
		echo get_the_post_thumbnail( $post_id, array( 60, 60 ) );
	}
}
// Hook to display the custom column for posts.
add_action( 'manage_posts_custom_column', 'custom_display_featured_image_column', 10, 2 );
// Hook to display the custom column for pages.
add_action( 'manage_pages_custom_column', 'custom_display_featured_image_column', 10, 2 );

// Add custom CSS for adjusting the width of the 'Featured Image' column.
function custom_admin_column_css() {
	echo '<style>
        /* Adjust the width of the "Featured Image" column to 60 pixels */
        .column-featured_image {
            width: 60px;
        }
    </style>';
}
add_action( 'admin_head', 'custom_admin_column_css' );
Code language: PHP (php)

That’s it! you’ve successfully added a featured image column to your WordPress admin panel. This customization will streamline your content management tasks by providing a visual representation of featured images for each post or page.

Remember to back up your functions.php file before making any changes and always test new code in a staging environment to avoid potential issues on your live site. By following this tutorial, you’ve taken a step towards making your WordPress site more efficient and user-friendly.

Leave your feedback and help us improve ๐Ÿถ

We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee โ˜•๏ธ or donating via PayPal ๐Ÿ’ฐ.

More free knowledge, because why not?

Your thoughts matter, leave a reply ๐Ÿ’ฌ

Your email address will not be published. Required fields are marked *