Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme.Learn More

Use A Custom Field Instead of Featured Image In WordPress

January 2, 2018

Recently I’ve been taking full advantage of the WordPress Featured Images ( or Post Thumbnails as some people call them) for the image slider used in my Free themes. However, some people have been asking me if it was possible to have a separate image for the slider then their post thumbnail because the image slider tends to be so much larger, so I figured I would write up a quick tutorial showing you how to add a custom field to your theme so you can define a separate image for the slider with the “featured image” set as the backup.

Step 1:  Create The Custom Field

The first step is creating the new Custom Field (see the codex if you are unfamiliar with custom fields). Insert the following at the start of the loop which would be right AFTER the “while (have_posts)” or “foreach($myposts as $post” statement. Change where it says “Alternative Image” to whatever makes sense – such as slider image, author image…etc.

//get custom field titled "Post Image"
$alternative_post_image = get_post_meta($post->ID, 'Alternative Image', $single = true);

Step 2: Show New Custom Field Instead Of Featured Image

Now you can pass a quick test to see if the custom field exists and if so show the URL defined in the custom field otherwise show the post thumbnail. Insert the following code where you want to show your image.

<?php
//if custom field isn't blank
if ($alternative_post_image !== '' ) { ?>
<img src="<?php echo $alternative_post_image; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
<?php } else { ?>
<?php
//show featured image
the_post_thumbnail();
?>
<?php } ?>

Step 3: Use The Custom Field In Your Posts

Now you can use your custom field form in the post editor to define the link to your alternative image. Enter the name of your custom field (in this example it is “Alternative Image”) in the “Name” field and then the URL to your image in the “Value” field. Then click on “Add Custom Field”.

Add WordPress Custom Field

custom-field-image-wordpress
Article by AJ Clarke WPExplorer Staff
Published on: June 28, 2011
Last updated on: January 2, 2018
Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

5 Comments

  1. Sino says:

    HI there, I do not seem to have “while (have_posts)” in my theme, is there an updated code, if so I would greatly appreciate it. I am stuck with a theme, that is using featured images for widgets, and I have auto generated custom field urls with no extensions, thank you

  2. piet stilkenboom says:

    Nice. But don’t forget to adapt other files like category.php etc to keep thumbnails at the excerpt

  3. cpshinoj says:

    HI. In my wordpress blog there is an image field ‘_video_thumbnail’ . I want to replace my featured image with that image. How can I do this ??

    • AJ Clarke says:

      Hi, that really depends on the theme. There are methods you can use to hook into the native WordPress thumbnail to replace it but it may not work on the theme you are using. If you are using a premium theme simply ask the developer how you can do that. But I see your website listed is hosted on wordpress.com – this makes things WAY more difficult, to truly have a custom site you really should consider moving to a self hosted WordPress.org website this way you have full control over your theme’s output and you can choose from much more advanced themes (such as our Total theme – link at the top of our site – which actually lets you display the videos instead of the thumbnail by default). It’s possible because you are on wp.com that you may not be able to even tweak things accordingly since you don’t have the same ability to filter out content and modify themes.

Leave a Reply

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