How to Add a Custom “File Size” Column to Your WordPress Media Library

In this tutorial, we’ll guide you through the process of enhancing your WordPress Media Library by adding a custom “File Size” column. This feature allows you to effortlessly view the file sizes of your media files, providing valuable insights for efficient media management. Whether you’re a WordPress novice or a seasoned developer, this customization can significantly augment your website.

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.

Modify Your Child Theme’s functions.php File

Begin by opening your WordPress child theme’s functions.php file. This file acts as the nerve center for tailoring your theme’s functionality. You have the option to edit it directly within the Theme Editor in your WordPress dashboard. For more advanced customization, utilize an external code editor in conjunction with FTP (File Transfer Protocol). Simply insert the provided code snippet at the end of the functions.php file to implement the desired functionality.

// Add custom column to Media Library
function add_media_size_column( $columns ) {
	// Define the new column label
	$columns['file_size'] = __( 'File Size' );
	return $columns;
}
add_filter( 'manage_upload_columns', 'add_media_size_column' );

// Display file size in the custom column
function display_media_size_column( $column_name, $media_item ) {
	// Check if the column is 'file_size' and the item is an image
	if ( 'file_size' !== $column_name || ! wp_attachment_is_image( $media_item ) ) {
		return;
	}

	// Get the file size and format it
	$file_size      = filesize( get_attached_file( $media_item ) );
	$formatted_size = size_format( $file_size, 2 );

	// Output the formatted size
	echo esc_html( $formatted_size );
}
add_action( 'manage_media_custom_column', 'display_media_size_column', 10, 2 );

// Add CSS for column width
function add_media_size_column_styles() {
	// Set the width of the column using CSS
	echo '<style>.column-file_size {width: 100px;}</style>';
}
add_action( 'admin_head', 'add_media_size_column_styles' );
Code language: PHP (php)

Explanation:

  1. Adding Column:
    • The add_media_size_column function defines a new column labeled ‘File Size’ for the Media Library.
    • This is achieved using the manage_upload_columns filter to hook into the column management process.
  2. Displaying File Size:
    • The display_media_size_column function checks if the column is ‘file_size’ and if the media item is an image.
    • It retrieves the file size, formats it, and outputs the formatted size using esc_html.
  3. Styling Column Width:
    • The add_media_size_column_styles function adds a CSS style to set the width of the ‘File Size’ column to 100 pixels.
    • The admin_head action is used to inject styles into the WordPress admin head.

If you’d like to modify the width of the “File Size” column, adjust the value inside the width property in the CSS code.

Make the Column Sortable (Optional)

If you want to make the “File Size” column sortable, follow these additional steps:

// Make the column sortable
function make_size_column_sortable( $sortable_columns ) {
	$sortable_columns['file_size'] = 'file_size';
	return $sortable_columns;
}
add_filter( 'manage_upload_sortable_columns', 'make_size_column_sortable' );
Code language: PHP (php)

Explanation:

  • The make_size_column_sortable function is added to make the “File Size” column sortable.
  • The manage_upload_sortable_columns filter hooks into the sortable column management process.

Save Your functions.php Modifications and Test

After inserting the code snippets, save the functions.php file to apply the changes. Visit your WordPress Media Library, and you’ll now see a custom “File Size” column alongside your media items. If you added the optional step, you can click on the “File Size” column header to sort your media items based on file size.

That’s it! You’ve successfully added a custom “File Size” column to your WordPress Media Library, enhancing your media management capabilities. This tailored customization ensures a seamless experience for both beginners and pro developers. Enjoy optimizing your WordPress site for efficient media handling.

Want to improve your WordPress Media Library even more? Check out our tutorial on How to Add a Dimensions Column to Your WordPress Media Library. Enhance your media management effortlessly.

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 *