Rebranding Featured Image

WordPress 3.0 introduced featured images, letting everyone designate an image for a post (or page) in a way that themes have taken great advantage of in the intervening years. The concept of a ‘featured’ image was easy enough to understand. An image the content featured. Cool. But it can do so much more.

The Defaults

The basic box is one all WordPress users are familiar with:

A simple box that says “Featured Image” with a link to set the featured image.

It’s great, but it’s a little boring.

Changing the Title

The actual trick to this is to remove the metabox. The three attributes you will need are the name of the meta box, the post type, and the location. The post type is the one most of you are going to change. For example, I wanted to change the title for a specific post type so it was clearer what kind of image I was looking for to use as a featured. For TV shows, I wanted it to indicate that I was looking for a Title Card type image.

add_action('do_meta_boxes', 'featured_image_title_post_type_shows');
function featured_image_title_post_type_shows() {
    remove_meta_box( 'postimagediv', 'post_type_shows', 'side' );
    add_meta_box('postimagediv', __('Show Image/Title Card'), 'post_thumbnail_meta_box', 'post_type_shows', 'side');
}

This little snippet removes the meta box and then adds it back with a new title:

Changing the Main Content

Once the title is changed, the next step is to change the content. I’ve done this before, putting in the image size to the content. What I wanted to do here was change the content from “Set featured image” to “Set show image” and for that, I want to use a string replacement:

add_filter( 'admin_post_thumbnail_html', 'set_featured_image_text_post_type_shows' );
function set_featured_image_text_post_type_shows( $content ) {
    global $current_screen;

    if( !is_null($current_screen) && 'post_type_shows' == $current_screen->post_type )
        return $content = str_replace( __( 'Set featured image' ), __( 'Set show image' ), $content);
    else
        return $content;
}

But that only changed the one. Once you’ve set a featured image, the language changes to “Remove featured image”. I could add in more replacements, or I could be smart. We like being smart.

return $content = str_replace( __( 'featured' ), __( 'show' ), $content);

And yes, it works.

Customizing by Type

What if you have ten custom post types? Well then it’s time to get smart! By using anonymous functions, we can do this quite effectively, getting a list of all the publicly registered post types that aren’t the built-ins, and then for each one, renaming the content:

// Customize Featyred images for CPTs
add_action( 'admin_init', 'helf_featured_images' );
function helf_featured_images() {
	$post_type_args = array(
	   'public'   => true,
	   '_builtin' => false
	);
	$post_types = get_post_types( $post_type_args, 'objects' );
	foreach ( $post_types as $post_type ) {

		$type = $post_type->name;
		$name = $post_type->labels->singular_name;

		// change the default "Featured Image" metabox title
		add_action('do_meta_boxes', function() use ( $type, $name ) {
			remove_meta_box( 'postimagediv', $type, 'side' );
			add_meta_box('postimagediv', $name.' Image', 'post_thumbnail_meta_box', $type, 'side');
		});

		// change the default "Set Featured Image" text
		add_filter( 'admin_post_thumbnail_html', function( $content ) use ( $type, $name ) {
			global $current_screen;
			if( !is_null($current_screen) && $type == $current_screen->post_type ) {
				return $content = str_replace( __( 'featured' ), strtolower( $name ) , $content);
			} else {
				return $content;
			}
		});
	}
}

This trick uses the values of a custom post type which you already set when you built out your custom post types.

Customizing the Content Further

Now that we’ve changed ‘featured’ to match our custom post types, it’s time to take it even further. Can we smartly add in the image size? Usually the answer here is no, because it’s impossible to know what you want to have as your featured image size for each custom post type. As it happens I can because I was smart.

Every single CPT that has a special image has an image size for it:

add_image_size( 'character-img', 150, 200, true );
add_image_size( 'show-img', 960, 400, true );

And my post-names for those things are ‘post_type_characters’ and ‘post_type_shows’. This means I can add the following to my filter for admin_post_thumbnail_html:

		add_filter( 'admin_post_thumbnail_html', function( $content ) use ( $type, $name ) {
			global $current_screen;
			if( !is_null($current_screen) && $type == $current_screen->post_type ) {
			    // Get featured image size
			    global $_wp_additional_image_sizes;
			    $genesis_image_size = rtrim( str_replace( 'post_type_', '', $type ), 's' ).'-img';

			    if ( isset( $_wp_additional_image_sizes[ $genesis_image_size ] ) ) {
			        $content = '<p>Image Size: ' . $_wp_additional_image_sizes[$genesis_image_size]['width'] . 'x' . $_wp_additional_image_sizes[$genesis_image_size]['height'] . 'px</p>' . $content;
			    }
				$content = str_replace( __( 'featured' ), strtolower( $name ) , $content);
			}
			return $content;
		});

This could even be extended to only show the image size when it was not set. For now, this does what I want.

How’s it look?

Not bad:

And there you have it. More information for your users to know what kind of and size image to use.

Ipstenu (Mika Epstein)

I’m Mika (aka Ipstenu) and I’m complicated. I’ve been on the net since the days of dedicated terminals and Novation CAT modems and solved Missionaries and Cannibals (or Goats and Cabbages) before I was six, and blog about WordPress and technical/computer things at Half Elf on Tech.

See Full Bio