How to Add a Dimensions Column to Your WordPress Media Library

In this tutorial, we’ll guide you through enhancing your WordPress Media Library by adding a custom “Dimensions (WxH)” column. This feature enables you to quickly view the width and height of your media files, improving your media management experience. Whether you’re a beginner or an experienced WordPress user, this customization can be a valuable addition to your website.

To get started, please make sure your Media Library view is set to “List” instead of “Grid.” You can switch to the “List” view using the buttons at the top of the Media Library page.

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.

Adding the Custom Column to Your Theme’s functions.php File

To add the custom “Dimensions (WxH)” column to your WordPress Media Library open your WordPress child-theme’s functions.php file using a code editor or the built-in Theme Editor in your WordPress dashboard. Insert the following code snippet at the end of the functions.php file:

// Add custom column to media library
function wh_add_media_dimensions_column( $columns ) {
	$columns['dimensions'] = __( 'Dimensions (WxH)', 'your-text-domain' );
	return $columns;
}
add_filter( 'manage_media_columns', 'wh_add_media_dimensions_column' );
Code language: PHP (php)

Explanation:

  • We define a function called wh_add_media_dimensions_column to modify the columns in the media library. This function adds a new column labeled “Dimensions (w, h)” using __('Dimensions (WxH)', 'your-text-domain') for localization.

Displaying Dimensions in the Custom Column

Next, we’ll add code to display the actual dimensions in the custom column:

// Display values in custom column
function wh_display_media_dimensions( $column_name, $attachment_id ) {
	if ( $column_name === 'dimensions' ) {
		$meta = wp_get_attachment_metadata( $attachment_id );
		if ( isset( $meta['width'] ) ) {
			echo esc_html( $meta['width'] ) . ' x ' . esc_html( $meta['height'] );
		} else {
			echo __( 'N/A', 'your-text-domain' );
		}
	}
}
add_action( 'manage_media_custom_column', 'wh_display_media_dimensions', 10, 2 );
Code language: PHP (php)

Explanation:

  • We create the wh_display_media_dimensions function, which checks if the current column is ‘dimensions’.
  • It fetches the attachment metadata, retrieves the width and height, and uses esc_html to sanitize and display the values. If the width is not available, it shows “N/A.”

Making the Column Sortable (Optional)

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

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

Explanation:

  • The wh_make_dimensions_column_sortable function is added to make the “Dimensions” column sortable.

Save the File

After adding the code snippets to your functions.php file, make sure to save the file to apply the changes. Your WordPress Media Library will now include a custom “Dimensions (WxH)” column, improving your media management capabilities.

Full Code Snippet: Here’s the complete code for adding the custom “Dimensions (WxH)” column to your WordPress Media Library:

// Add custom column to media library
function wh_add_media_dimensions_column( $columns ) {
	$columns['dimensions'] = __( 'Dimensions (WxH)', 'your-text-domain' );
	return $columns;
}
add_filter( 'manage_media_columns', 'wh_add_media_dimensions_column' );

// Display values in custom column
function wh_display_media_dimensions( $column_name, $attachment_id ) {
	if ( $column_name === 'dimensions' ) {
		$meta = wp_get_attachment_metadata( $attachment_id );
		if ( isset( $meta['width'] ) ) {
			echo esc_html( $meta['width'] ) . ' x ' . esc_html( $meta['height'] );
		} else {
			echo __( 'N/A', 'your-text-domain' );
		}
	}
}
add_action( 'manage_media_custom_column', 'wh_display_media_dimensions', 10, 2 );

// (Optional) Make the column sortable
function wh_make_dimensions_column_sortable( $sortable_columns ) {
	$sortable_columns['dimensions'] = 'dimensions';
	return $sortable_columns;
}
add_filter( 'manage_upload_sortable_columns', 'wh_make_dimensions_column_sortable' );

Code language: PHP (php)

That’s it! You’ve successfully added a custom “Dimensions (WxH)” column to your WordPress Media Library, enhancing your ability to manage media files efficiently. We hope this customization proves valuable to your WordPress site. Remember to keep your Media Library in the “List” view to make the most of this feature. Happy media management!

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 *