Customize the Featured Image Metabox

Back to WordPress 2.9, people are thrilling about a new feature called “Post Thumbnails”, I was one of them. Before it was a core feature, it was already a requirement for any premium theme in the market. Without doubt, add “thumbnail” to theme support was definitely a big moment in WordPress history. Later with WordPress 3.0, the name was changed from “Post Thumbnails” to “Featured Image”.

I love this feature from day one. I quickly add it to themes in clients’ projects, and they are as happy as I expected. After the name changed to “Featured Image”, things became a little different. Clients were still happy about the UI, I just got asked about the same question more often.

What is Featured Image?

There are different cases when the clients ask me about the feature:

“Just an image, nothing to be featured here”

To some clients, a “featured” image means a Pulitzer Prize photo or things like that. I need to tell them it just could be any image related to the post content.

“What about the image dimensions or size?”

Other clients, they might be okay with the name, but they don’t know how to get started, or something went wrong after they uploaded the image, like the size is too large or the dimensions doesn’t go with the theme so the image got squeezed.

Why can’t you just call it “Cover Photo”, “Thumbnail on Homepage”, or XYZ…?

Clients are always right. So I started to use the metabox plugin like Metx Box or my new favourite Custom Meta Boxes (by humanmade) to create new metabox with image fields, that I can label the title and add instructions as per their requests.

My 4th plugin – Custom Featured Image Metabox

Although the mission was completed by those great plugins, I still want a much simpler solution for it. After 2 busy months, it’s time to keep on my plugin projects. And finding a elegant way to improve the “Featured Image” metabox, sounds a great one to work on.

I make a quick plan for this plugin. It should let users to:

  • Set the title text instead of the default “Featured Image”.
  • Add instructions for the image, like the image dimensions.
  • Set a custom set / remove link text, instead of the default “Set / Remove featured image”.
  • Custom the metabox by post types. Each post type has its own custom settings.

For the first 3 tasks, I need to figure it out which actions or filters to hook to. I got lucky after googled this great post from themergency, with bradvin’s great work, things are almost done.

There are 3 magical hooks for these tasks:

  1. add_meta_boxes: In this action, we remove the original Featured Image metabox and readd it with the customized title.
  2. admin_post_thumbnail_html: We add instructions and change the link text in this filter.
  3. media_view_strings: In Media Manager, there’re still some strings to replace, this filter can help us get them done.

What should be included in the Settings?

A settings page for Custom Featured Image Metabox
A settings page for Custom Featured Image Metabox

I supposed there should be at least 4 settings in a single post type:

  • Title text: The default “Featured Image” will be replaced with it.
  • Instructions: Write down the instructions for the image here. I should add a filter for this field later. Or make it a textarea.
  • Set Text: Since the title has been changed, the “Set” link / button should be changed too.
  • Remove Text: Should be changed accordingly.

At first I just saved all settings into 1 option (in wp_options table). Later when I decided to make the Settings divided into tabs by post type, I realized a single tab should have its own option, that cost me some extra time to adjust the settings value process functions accordingly.

Just approved on WP.org

Thanks to the hard-working plugin review team on WP.org, within 24 hours after I sent the request, Custom Featured Image Metabox is available on WP.org now. Hope you’ll download a copy if you find it helpful in your projects.

Any feedback and comments are very welcome. 🙂

Share the post:Tweet about this on TwitterShare on Google+0Share on Facebook0Share on LinkedIn1

I’m a senior web developer helping clients build their websites to grow businesses. Currently I’m based in Taipei, Taiwan.

I write things about WordPress, AngularJS and life. Whenever you’d like to find someone to talk about these topics, just get in touch!

Submit a comment

Your email address will not be published. Required fields are marked *