I'm a bit stuck in the world of thumbnail images, featured images, any so on.

My blog index page lists the posts and shows some thumbnails: blog index images

Then each post has an image on the top of the page, which is currently the same image: post image

What I'd like to do is to have the thumbnail and the image in the post to be different. How should I set this up? I believe changing the featured image will change both?


Keep the current theme

If your current theme doesn't support this out of the box, and you want to keep using that theme, you will need to create a child theme. It's fairly simple, though you'll need to play with a bit of PHP.

First, create a folder in /wp-content/themes/ for your child theme. It usually makes sense to name it something like "parentname-child", so for example, if you were using the Twenty Nineteen theme, you could call it /wp-content/themes/twentynineteen-child/.

Next, create a style file: /wp-content/themes/twentynineteen-child/style.css

You don't have to actually add CSS, but adding comments inside this file is what will make WP recognize this as a child theme:

Theme Name: My Child
Template: twentynineteen

Just make sure to change the template (twentynineteen in this example) to be whatever the parent theme's folder name is.

Now you have a child theme. You can activate it, but it won't actually do anything until you add some code. Next you'll have to do some searching through the parent theme to find out what file you want to affect. You're probably looking for single.php if you want to change which image appears at the top of individual Posts, although it could be header.php or a different file if your parent theme uses template parts.

Once you find the file that sets the image in one of the two places, you will copy that whole file as-is into your child theme. Then, you can modify it.

The other part of this equation is actually letting authors select a second image. If it just needs to be a different size of the image - i.e. you want to crop it separately - you can use add_image_size() to create the different size and cropping, and then just update the code in your other file (i.e. single.php or header.php) to have it pull that specific image size.

But, if it needs to be a totally separate image, you'll need to look into adding a custom meta box so the authors can select this second image. You might consider using a meta field plugin if you don't want to custom-code this part yourself; there are a couple of widely used plugins around that make it fairly easy to select an image and save it in postmeta. Then, depending on which plugin you've used, refer to their documents to find out how to pull that image into your other file (single.php or header.php).

Consider using the Block Editor

You may find it much easier to update your website to use the Block Editor that was introduced in WP 5.0. Once enabled, there are different image blocks you can use - depending on how your theme is built, it may be easy to just add an extra image that will appear at the top of the page. Or, you may still end up wanting to tweak the theme, or just use one that better supports the Block Editor. As with most tasks, there's frequently more than one way to accomplish the same end goal with WP, and it really depends on your coding skillset and flexibility to determine ultimately which one is best for your site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.