WordPress: Add a Featured Image Column To Your Posts List In Your Theme Using functions.php

A WordPress plugin involves additional overhead, requiring WordPress to load and manage the plugin. This includes reading the plugin directory, checking for updates, and maintaining plugin metadata. Whenever I’m working on optimizing Martech Zone or a client’s WordPress installation, I always analyze the plugins utilized, quality of the code, impact on the site, and how much functionality there is in the plugin being used.

I often find that plugins are bloated, poorly developed, and add unnecessary overhead that can slow down the site or administration. If it’s a simple feature, I’ll typically remove the plugin and modify the child theme functions.php instead. When code is placed in the child theme’s functions.php file, it is directly integrated into the theme, which can be slightly more efficient regarding resource usage.

Ultimately, your choice should also consider factors like code organization, maintenance, and your project’s specific needs.

Add Featured Image Column To Posts List

I was running a plugin on Martech Zone which added a column to the Posts List with the featured image. Unfortunately, the plugin had some bloat with unnecessary additional settings and resources like a video that had long been taken down. I dissected the plugin and figured out how they were adding the image column… and then I modified the plugin with some additional features like having the title and dimensions of the featured image upon mouseover.

Here’s the code:

function add_featured_image_column($columns) {
    // Create a new column with the name "img"
    $columns['img'] = 'Featured Image';
    return $columns;
}

function customize_featured_image_column($column_name, $post_id) {
    if ($column_name == 'img') {
        // Get the featured image URL
        $thumbnail_url = get_the_post_thumbnail_url($post_id, 'thumbnail');

        // Check if a featured image is set
        if ($thumbnail_url) {
            // Get the original image URL
            $original_url = get_the_post_thumbnail_url($post_id, 'full');
            // Get the dimensions of the original image
            list($original_width, $original_height) = getimagesize($original_url);

            // Get the actual title
            $actual_title = get_the_title($post_id);

            // Define the title attribute for the image
            $image_title = $actual_title . ' (' . $original_width . 'px by ' . $original_height . 'px)';

            // Display the thumbnail image with a maximum height of 80px and add dimensions to the title attribute
            echo '<img src="' . esc_url($thumbnail_url) . '" style="max-height: 80px;" title="' . $image_title . '" />';
        } else {
            // No featured image is set, display "No featured image"
            echo 'No featured image';
        }
    }
    return $column_name;
}
add_action('manage_posts_columns', 'add_featured_image_column');
add_action('manage_posts_custom_column', 'customize_featured_image_column', 10, 2);

Here’s an explanation of the code:

• add_featured_image_column function:
  • This function adds a custom column to the list of posts in the WordPress admin panel. It takes an array of existing columns as an argument ($columns).
  • It adds a new column named img with the label Featured Image.
  • It returns the modified array of columns with the new img column added.
• customize_featured_image_column function:
  • This function is responsible for customizing the content of the img column for each post in the list.
  • It takes two parameters: $column_name (the name of the current column being processed) and $post_id (the ID of the current post).
  • It checks if the currently processed column is img (the custom column we added).
  • If it’s the img column, it fetches and displays the featured image and additional information.
  • It uses get_the_post_thumbnail_url to retrieve the URL of the featured image in the “thumbnail” size.
  • It checks if a featured image is set by verifying if the $thumbnail_url is not empty.
  • If a featured image is set, it also retrieves the URL of the original (full-sized) image and its dimensions using get_the_post_thumbnail_url and getimagesize.
  • It fetches the actual title of the post using get_the_title.
  • It constructs the title attribute for the image in the format “Title: Actual Title (Original Width px by Original Height px).”
  • It displays the thumbnail image with a maximum height of 80px and sets the title attribute to the constructed $image_title. You can modify this height to whatever you’d like.
  • If no featured image is set, it displays “No featured image set.”
  • The function returns the modified content for the img column.
• add_action lines:
  • These lines hook the add_featured_image_column function to the manage_posts_columns action and the customize_featured_image_column function to the manage_posts_custom_column action. This associates these functions with the WordPress post management screen.

By adding these actions, the code effectively creates a new custom column in the WordPress admin posts list that displays the featured image of each post along with its title and dimensions. If there is no featured image, it displays No featured image. This can be a helpful feature for managing and reviewing posts in the admin area, especially when working with themes that heavily rely on featured images.

Here’s a preview of this in action on Martech Zone where I’m mousing over the featured image in the third row:

Filter For Posts With No Featured Image

Another function that I added was a filter so that I could easily identify any post that had no featured image set.

function add_no_featured_image_filter() {
    global $post_type;
    
    // Check if the current post type is 'post' (you can change it to the desired post type)
    if ($post_type == 'post') {
        $selected = (isset($_GET['no_featured_image']) && $_GET['no_featured_image'] == '1') ? 'selected' : '';
        echo '<select name="no_featured_image" id="no_featured_image">
            <option value="" ' . $selected . '>All Posts</option>
            <option value="1" ' . selected('1', $_GET['no_featured_image'], false) . '>No Featured Image</option>
        </select>';
    }
}

function filter_no_featured_image_posts($query) {
    global $pagenow;

    // Check if we are on the posts page and the filter is set
    if (is_admin() && $pagenow == 'edit.php' && isset($_GET['no_featured_image']) && $_GET['no_featured_image'] == '1') {
        $query->set('meta_key', '_thumbnail_id');
        $query->set('meta_compare', 'NOT EXISTS');
    }
}
add_action('restrict_manage_posts', 'add_no_featured_image_filter');
add_action('parse_query', 'filter_no_featured_image_posts');

This code enhances the functionality of the WordPress admin area by adding a custom filter for posts to allow users to filter posts based on whether they have a featured image set or not. Here’s an explanation of the code:

• add_no_featured_image_filter function:
  • This function creates a custom filter dropdown for posts in the WordPress admin panel.
  • It starts by checking the current post type. In this code, it’s specifically checking if the current post type is “post,” but you can change this to any desired post type.
  • If the post type matches, it proceeds to generate the filter dropdown.
  • The filter dropdown is an HTML <select> element with the name “no_featured_image” and the ID “no_featured_image.”
  • It contains two options:
    • “All Posts” (default option): This option is selected when no specific filtering is applied.
    • “No Featured Image”: This option is selected when the user wants to filter posts with no featured image.
  • The selection of these options is determined based on the URL query parameters ($_GET) and whether the no_featured_image parameter is set to ‘1’.
  • The selected function is used to determine whether an option should be marked as “selected” based on the query parameter values.
  • The function echoes the HTML for the filter dropdown.
• filter_no_featured_image_posts function:
  • This function modifies the query to filter posts based on the presence or absence of a featured image.
  • It first checks if we are in the WordPress admin area and on the “edit.php” page, which is the posts management page.
  • It then checks if the no_featured_image query parameter is set to ‘1’, indicating that the user wants to filter posts with no featured image.
  • If the filter is active, it uses the set method to modify the query:
  • It sets the meta_key to _thumbnail_id, the key used to store the featured image ID in the post’s metadata.
  • It sets the meta_compare to ‘NOT EXISTS,’ which effectively filters posts where the ‘_thumbnail_id’ meta key does not exist. In other words, it filters posts with no featured image.
  • This function adjusts the query based on the filter selection.
• add_action lines:
  • The first add_action line hooks the add_no_featured_image_filter function to the ‘restrict_manage_posts’ action. This action is called when displaying the post management section, and it allows you to add custom filters and controls.
  • The second add_action line hooks the filter_no_featured_image_posts function to the ‘parse_query’ action. This action is called before the query is executed, allowing you to modify the query based on custom filters.

Here’s a preview of the filter:

By adding these actions, the code creates a custom filter in the WordPress admin posts list that allows you to filter posts based on whether they have a featured image set or not, making it easier to manage and organize your posts.