Saturday, October 28, 2023
HomeMobile MarketingWordPress: Add a Featured Picture Column To Your Posts Listing In Your...

WordPress: Add a Featured Picture Column To Your Posts Listing In Your Theme Utilizing capabilities.php


A WordPress plugin entails further overhead, requiring WordPress to load and handle the plugin. This contains studying the plugin listing, checking for updates, and sustaining plugin metadata. Every time I’m engaged on optimizing Martech Zone or a consumer’s WordPress set up, I all the time analyze the plugins utilized, high quality of the code, affect on the location, and the way a lot performance there’s within the plugin getting used.

I usually discover that plugins are bloated, poorly developed, and add pointless overhead that may decelerate the location or administration. If it’s a easy characteristic, I’ll usually take away the plugin and modify the kid theme capabilities.php as a substitute. When code is positioned within the little one theme’s capabilities.php file, it’s instantly built-in into the theme, which might be barely extra environment friendly relating to useful resource utilization.

Finally, your alternative also needs to think about elements like code group, upkeep, and your challenge’s particular wants.

Add Featured Picture Column To Posts Listing

I used to be working a plugin on Martech Zone which added a column to the Posts Listing with the featured picture. Sadly, the plugin had some bloat with pointless further settings and assets like a video that had lengthy been taken down. I dissected the plugin and found out how they had been including the picture column… after which I modified the plugin with some further options like having the title and dimensions of the featured picture upon mouseover.

Right here’s the code:

perform add_featured_image_column($columns) {
    // Create a brand new column with the title "img"
    $columns['img'] = 'Featured Picture';
    return $columns;
}

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

        // Examine if a featured picture is ready
        if ($thumbnail_url) {
            // Get the unique picture URL
            $original_url = get_the_post_thumbnail_url($post_id, 'full');
            // Get the size of the unique picture
            checklist($original_width, $original_height) = getimagesize($original_url);

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

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

            // Show the thumbnail picture with a most top of 80px and add dimensions to the title attribute
            echo '<img src="' . esc_url($thumbnail_url) . '" type="max-height: 80px;" title="' . $image_title . '" />';
        } else {
            // No featured picture is ready, show "No featured picture"
            echo 'No featured picture';
        }
    }
    return $column_name;
}
add_action('manage_posts_columns', 'add_featured_image_column');
add_action('manage_posts_custom_column', 'customize_featured_image_column', 10, 2);

Right here’s a proof of the code:

  • add_featured_image_column perform:
    • This perform provides a customized column to the checklist of posts within the WordPress admin panel. It takes an array of present columns as an argument ($columns).
    • It provides a brand new column named img with the label Featured Picture.
    • It returns the modified array of columns with the brand new img column added.
  • customize_featured_image_column perform:
    • This perform is liable for customizing the content material of the img column for every submit within the checklist.
    • It takes two parameters: $column_name (the title of the present column being processed) and $post_id (the ID of the present submit).
    • It checks if the at present processed column is img (the customized column we added).
    • If it’s the img column, it fetches and shows the featured picture and extra data.
    • It makes use of get_the_post_thumbnail_url to retrieve the URL of the featured picture within the “thumbnail” measurement.
    • It checks if a featured picture is ready by verifying if the $thumbnail_url will not be empty.
    • If a featured picture is ready, it additionally retrieves the URL of the unique (full-sized) picture and its dimensions utilizing get_the_post_thumbnail_url and getimagesize.
    • It fetches the precise title of the submit utilizing get_the_title.
    • It constructs the title attribute for the picture within the format “Title: Precise Title (Authentic Width px by Authentic Peak px).”
    • It shows the thumbnail picture with a most top of 80px and units the title attribute to the constructed $image_title. You possibly can modify this top to no matter you’d like.
    • If no featured picture is ready, it shows “No featured picture set.”
    • The perform returns the modified content material for the img column.
  • add_action strains:
    • These strains hook the add_featured_image_column perform to the manage_posts_columns motion and the customize_featured_image_column perform to the manage_posts_custom_column motion. This associates these capabilities with the WordPress submit administration display screen.

    By including these actions, the code successfully creates a brand new customized column within the WordPress admin posts checklist that shows the featured picture of every submit together with its title and dimensions. If there is no such thing as a featured picture, it shows No featured picture. This could be a useful characteristic for managing and reviewing posts within the admin space, particularly when working with themes that closely depend on featured pictures.

    Right here’s a preview of this in motion on Martech Zone the place I’m mousing over the featured picture within the third row:

    Post List with Featured Image Column

    Filter For Posts With No Featured Picture

    One other perform that I added was a filter in order that I may simply determine any submit that had no featured picture set.

    perform add_no_featured_image_filter() {
        international $post_type;
        
        // Examine if the present submit sort is 'submit' (you'll be able to change it to the specified submit sort)
        if ($post_type == 'submit') {
            $chosen = (isset($_GET['no_featured_image']) && $_GET['no_featured_image'] == '1') ? 'chosen' : '';
            echo '<choose title="no_featured_image" id="no_featured_image">
                <possibility worth="" ' . $chosen . '>All Posts</possibility>
                <possibility worth="1" ' . chosen('1', $_GET['no_featured_image'], false) . '>No Featured Picture</possibility>
            </choose>';
        }
    }
    
    perform filter_no_featured_image_posts($question) {
        international $pagenow;
    
        // Examine if we're on the posts web page and the filter is ready
        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 performance of the WordPress admin space by including a customized filter for posts to permit customers to filter posts based mostly on whether or not they have a featured picture set or not. Right here’s a proof of the code:

    • add_no_featured_image_filter perform:
      • This perform creates a customized filter dropdown for posts within the WordPress admin panel.
      • It begins by checking the present submit sort. On this code, it’s particularly checking if the present submit sort is “submit,” however you’ll be able to change this to any desired submit sort.
      • If the submit sort matches, it proceeds to generate the filter dropdown.
      • The filter dropdown is an HTML <choose> factor with the title “no_featured_image” and the ID “no_featured_image.”
      • It incorporates two choices:
        • “All Posts” (default possibility): This feature is chosen when no particular filtering is utilized.
        • “No Featured Picture”: This feature is chosen when the person needs to filter posts with no featured picture.
      • The collection of these choices is decided based mostly on the URL question parameters ($_GET) and whether or not the no_featured_image parameter is ready to ‘1’.
      • The chosen perform is used to find out whether or not an possibility must be marked as “chosen” based mostly on the question parameter values.
      • The perform echoes the HTML for the filter dropdown.
    • filter_no_featured_image_posts perform:
      • This perform modifies the question to filter posts based mostly on the presence or absence of a featured picture.
      • It first checks if we’re within the WordPress admin space and on the “edit.php” web page, which is the posts administration web page.
      • It then checks if the no_featured_image question parameter is ready to ‘1’, indicating that the person needs to filter posts with no featured picture.
      • If the filter is lively, it makes use of the set methodology to switch the question:
      • It units the meta_key to _thumbnail_id, the important thing used to retailer the featured picture ID within the submit’s metadata.
      • It units the meta_compare to ‘NOT EXISTS,’ which successfully filters posts the place the ‘_thumbnail_id’ meta key doesn’t exist. In different phrases, it filters posts with no featured picture.
      • This perform adjusts the question based mostly on the filter choice.
    • add_action strains:
      • The primary add_action line hooks the add_no_featured_image_filter perform to the ‘restrict_manage_posts’ motion. This motion is named when displaying the submit administration part, and it lets you add customized filters and controls.
      • The second add_action line hooks the filter_no_featured_image_posts perform to the ‘parse_query’ motion. This motion is named earlier than the question is executed, permitting you to switch the question based mostly on customized filters.

      Right here’s a preview of the filter:

      Posts List Filter for Featured Image

      By including these actions, the code creates a customized filter within the WordPress admin posts checklist that lets you filter posts based mostly on whether or not they have a featured picture set or not, making it simpler to handle and arrange your posts.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments