As one of my previous tutorials on creating a dynamic slideshow from your posts showed, there are a lot of useful and interesting uses for Custom Fields. One use that I make of custom fields is to pull an image from a post and display it on my homepage, however I don’t always need something different for each post. This is where this method is a real time saver!
Of course, you could just add the same custom field for every post where you want the ‘default’ used, but why bother when we can make it easier for ourselves? The first example code below will show a basic method that can be adapted to your needs, and then the second example will develop that to demonstrate how I achieve my effect with images.
The Basic Code
The basic method will check if the desired custom field ‘key’ has no defined ‘value’, or if it is absent. If it is missing, then the default text is shown, otherwise show the ‘value’.
<?php
$var = get_post_meta($post->ID, 'My Custom Key', true);
if ($var == '')
{
echo "<p>I'm the default text!</p>";
} else {
echo "<p>" . $var . "</p>";
} ?>
Simple!
Default Image Display
If you take a look at my WordPress category page you will see that some of the images for the posts are the same. I achieved this by extending the above code to include a default image if I didn’t need an image to specifically demonstrate the post.
<?php
$thumb = get_post_meta($post->ID, 'Homepage Image', true);
if ($thumb == '')
{ ?>
First of all we store the ‘value’ defined for the ‘key’ Homepage Image for the current post in a variable called $thumb. We then check to see if $thumb is either blank, or if there is no Homepage Image ‘key’ at all. If either of these is the case, then we do the following:
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <img src="http://domain.com/images/defaultimage.jpg" alt="<?php the_title(); ?>"/> </a>
This will output an image that is on my server each time there is no custom field available.
<?php } else { ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php echo $thumb; ?>" alt="<?php the_title(); ?>"/>
</a>
<?php } ?>
In addition to the if statement, we add an else. This says that if $thumb is not empty, ie it has a defined ‘value’, then output that ‘value’ in the image source, and make it a link to the post.
This saves me a lot of time when posting, as I don’t need to find the url of my default image and add it to the custom fields, I can just post straight away, knowing that an image is going to be there where I need it.
I was really scratching my head about this as I had posted asking how to do this exact thing on the WP forums but no one answered.
Thank you so much for this. Saved me hours
I used it in conjunction with TimThumb & Random File so I get resized random images for non-custom field images.
Regards
Karl
Actually, the code should use single quotes, not double quotes, in the second else in the basic code;
echo ‘whatever’ . $var . ‘whatever’;
I didn’t and my page wouldn’t display at all.
Thanks a lot. But it wont work for me. Could you please reply with full code (all three parts together). Thanks a lot.
Hi! I ve been searching for this a long time, and you seem the only one that knows how to do it.
The problem is that I am completely dumb, so, if you please, I need some help.
I am using the theme mimbo and it has the thumbnail function where I use the custom field key=Image and value=image.jpg to display a thumb for the post. But I have a default image for each category, and it is really boring to enter the same value for each post, and the worst is that I cant do it when posting via email. So if there is anyway I can link a costum field for each category, it will be all happines.
Thanks a lot !
Hello, I’ve manage to add the thumb next to the excerpt for the post. I was wondering if anyone know how I can add a line of text above the thumb, which can be a tag and linked to the relevant tag page (like how http://www.lifehacker.com has above each of the post’s thumb). Thanks!
Hello,
thanks very much for putting this together, and linking to it on WordPress! I didn’t see this anywhere else, and metadata is really fun and important to tweak your blog the way you want to.
I added weather (add on to the date) to my metadata with your help.
tried my darnest to add this to the magazeen theme for the header image dock. i just can’t seem to figure it out. if anyone does, i would be ever so grateful!
http://wefunction.com/2009/02/free-theme-magazeen/
@Donna – I’m glad you found it useful!
@g – Sorry you’re having problems implementing it. Unfortunately I don’t really have time to dig into the theme right now. Does the theme have a support forum? If this is really pressing, please get in touch via my contact page, and I’ll see what I can do.