Default Custom Fields
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’.
1 2 3 4 5 6 7 8 | <?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.
1 2 3 4 | <?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:
5 6 7 | <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.
8 9 10 11 12 | <?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.
15 Comments - Add Yours!
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
Hi, i’m completely new to .php and wondering where would i post this code at? post.php ?
I’m wanting to just basically have my ‘thumb’ custom field to have a default of wp-content/random.jpeg
how would i go about doing that? any help would be great =)
Hi Cherie, you can put this anywhere you want to display the image, it really doesn’t matter. If you want the image on your homepage, then look at index.php and find the loop, or home.php if your theme has one.
If you follow the instructions under default image display, replacing “http://domain.com/images/defaultimage.jpg” with your image, you should be well on your way!
Let me know if you need any more specific instructions.
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.
@Donna – I’m glad you found it useful!
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/
@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.
I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more articles from you in the future.
- Jack
I don’t understand what the actual code is and where to place it. Can you respond with the actual code I need to implement? Thanks!
@Justin C – In theory, the code can be placed anywhere, be it in a header, page or sidebar – wherever it is that you are using the custom field. It’s a little bit difficult to post the ‘actual’ code because it depends on what you want to use it for. But if you use the ‘Basic Code’ as a base, then you can go from there. If you have something in mind that you’re struggling with, then comment back and I’ll try and help.
hi. great article. im trying to use but i have a problem. im using these code in a page template (that have 2 customfields):
ID, ‘imagem-titulo’, true); ?>
<img src="ID, ‘imagem-titulo’, true); ?>” />
ID, ‘flash-wide’, true); ?>
ID, ‘flash-wide’, true); ?>
but in some cases i dont need to use these customfileds. In FF its ok. But in IE appears a blank image error (red x) for each customfiled if is blank. How can i fix this, if the custom field is blank, the browser dont print none in the screen.
thanks a lot!!
3 Trackbacks