Adding Images To Posts using Custom Fields in WordPress
Upload images and create Keys and Values:
The first thing you need to do is upload an image. For the sake of
this tutorial, I will assume these images are thumbnailed-sized, such
as ones that you might see on a message board or at Dosh Dosh. You can,
of course, do as you like when it comes to sizing your images.
Now, create a Key named “Thumbnail.” Give it a Value of the URL of the image you uploaded (ex: /wp-content/uploads/image.gif).
Create a key named “Thumbnail Class.” Give it a Value of
“thumbnail-class” or anything that you can use to style in your
stylesheet (style.css).
You can also create alt text for your image. This is optional.
Create a Key named “Thumbnail Alt” with a Value of “Describe your
image.” If you don’t do this, the alt text will default to the post
title.
Now, for the code:
You can use this code in any of your templates (index.php,
single.php, category.php, archive.php, etc.). Open one of those files
in your text editor of choice (I’m editing index.php in Notepad).
After:
if(have_posts()) : while(have_posts()) : the_post();Add this:
// check for thumbnail
$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);
// check for thumbnail class
$thumb_class = get_post_meta($post->ID, 'Thumbnail Class', $single = true);
// check for thumbnail alt text
$thumb_alt = get_post_meta($post->ID, 'Thumbnail Alt', $single = true);Basically, this just retrieves your custom field information for
each post that will be displayed by the loop. When it retrieves the
custom field Key and Value, it assigns it to a PHP
variable. This is important because it’ll make the coding later cleaner
and we only have to retrieve the information once for each post. (Also note that this is the technique I’ll use on later tutorials, unless I come up with an even better way to accomplish this.)
Before (in the same file):
<?php the_content(); ?>or
<?php the_excerpt(); ?>Add this code:
<?php // if there's a thumbnail
if($thumb !== '') { ?>
<p>
<img src="<?php echo $thumb; ?>"
class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>"
alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>"
/>
</p>
<?php } // end if statement
// if there's not a thumbnail
else { echo ''; } ?>This code outputs the image right before your content is displayed.
Pretty simple, huh? You can obviously add other things like width and
height using custom fields or set a width and height for all images.
What I will show you next is how to do this with your “thumbnail-class”
instead.
Open style.css file from your theme folder and add this code:
.thumbnail-class {
float: left;
width: 100px;
height: 100px;
margin: 0 15px 0 0;
}
.left {
float: left;
margin: 0 15px 0 0;
}The class “left” is the default in case you forget to input a
“Thumbnail Class” custom field Key. Obviously, how to style your image
is up to you. Play around with it, have some fun, and see what you can
come up with. You can also do away with the entire “Thumbnail Class”
custom field and just input the class in the XHTML. I prefer to leave “Thumbnail Class” open, in case I want to style or align individual thumbnails differently.
That’s pretty much it. You can do a lot with this. For example:
- Add a link around the displayed thumbnail to a larger image, another page, or the single.php page.
- List posts by just their image.
- Creat kick-ass archive and search pages.
As I’ve said before regarding custom fields, their only limit is your imagination. Follow this tutorial series by subscribing to the feed.
If you have anything you would like to see done and think it might be
possible with custom fields, let me know because I’m always looking for
more things to play around with.
