How to Add a Media File Size Column in WordPress

The WordPress media library is one of the most powerful features of WordPress. It helps you manage your images, audio, video files, and documents effectively. However, there’s one feature most people miss in the default Media gallery. It doesn’t show the file size of media files. But several people want to get it. There could be several benefits if you can see the file size of media files large files slow down your website and increase loading times. If you can see the file size, you can effectively do space management and manage your server space better. It also helps you fix issues with uploads due to file size limits

In this tutorial, I will show you how to add a file size column to the WordPress media library so you can easily check the size of your media files.

1. Use WordPress Plugin

If you have no idea how to alter code and want a Plugin, I have made a Plugin for this. Currently, the Plugin is now available in the WordPress Plugin repository. I have uploaded it on GitHub. You just need to Install the Plugin and activate it. It will start showing the File Size for all uploads in the Media Library.

2. Use Custom Code

You need to add a small code snippet to your WordPress site to display the file size in the media library. Here’s how you can do it.

In your WordPress admin panel, go to Appearance > Theme Editor. On the right side, look for functions.php in the list of theme files. Click on it to open the file for editing. Add following code in the file.

// Add the "File Size" column to the Media Library
function twg_add_file_size_column( $columns ) {
    $columns['file_size'] = __( 'File Size', 'twg-media-file-size-column' );
    return $columns;
}
add_filter( 'manage_media_columns', 'twg_add_file_size_column' );

// Display the file size in the "File Size" column
function twg_display_file_size_column( $column_name, $post_id ) {
    if ( 'file_size' === $column_name ) {
        // Get the file path of the media item
        $file_path = get_attached_file( $post_id );
        
        // Check if the file exists
        if ( file_exists( $file_path ) ) {
            // Get the file size and format it
            $file_size = filesize( $file_path );
            echo size_format( $file_size, 2 ); // Format size (e.g., KB, MB)
        } else {
            // Display error message if file is missing
            echo '<span class="error-message">' . __( 'File not found', 'twg-media-file-size-column' ) . '</span>';
        }
    }
}
add_action( 'manage_media_custom_column', 'twg_display_file_size_column', 10, 2 );

// Add custom styles to the Media Library
function twg_media_file_size_column_style() {
    echo '<style>
        .column-file_size { 
            width: 120px; 
            text-align: center; 
        }
        .attachment-id .column-file_size {
            border-left: 1px solid #ccc;
            padding: 5px;
        }
        .column-file_size span {
            font-weight: bold;
            color: #333;
        }
        .column-file_size span.error-message {
            color: red;
            font-style: italic;
        }
    </style>';
}
add_action( 'admin_head', 'twg_media_file_size_column_style' );

After adding the code, click the Update File button to save your changes.

Once the code is added, go to the Media section in your WordPress dashboard. You will now see a File Size column next to your media files. This column will display the size of each file in a human-readable format (e.g., KB, MB, GB).

Conclusion

Now you know how to add a file size column to the WordPress media library. By adding a file size column to the WordPress media library, you can easily manage your media files and optimize your website more effectively. This simple addition makes a big difference in monitoring file sizes, improving site performance, and managing your server space.

If you found this tutorial helpful, consider adding it to your theme or sharing it with others who may find it useful for managing their WordPress media library!