13
I’ve explained how to use advanced custom fields in WordPress, and promised to explain how to add custom field post images to a WordPress RSS Feed. We’ll, I haven’t forgotten, and, luckily, it’s fairly simple thanks to a great plugin. Go ahead, download and install it. Next, open up the custom-fields-for-feeds.php file to edit.
Replace it with the following if you want it to display an image for a post.
<?php
/*
Plugin Name: Custom Fields for Feeds
Plugin URI: http://justintadlock.com/archives/2008/01/27/custom-fields-for-feeds-wordpress-plugin
Description: This puts images or videos into your feeds through the use of custom fields. You can alter the custom field Keys and what is displayed.
Author: Justin Tadlock
Version: 1.0.1 Beta
Author URI: http://justintadlock.com
License: GPL
*/
/* Copyright 2007 Justin Tadlock (email : justin@justintadlock.com)
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
/*
Modified by Daniel of doDesign to specifically show images.
http://dodesign.us/blog/custom-field-images-in-wordpress-feeds/
*/
add_filter('the_content', 'custom_fields_for_feeds');
function custom_fields_for_feeds( $content ) {
global $post, $id;
$blog_key = substr( md5( get_bloginfo('url') ), 0, 16 );
if ( ! is_feed() ) return $content;
// Place your own four custom fields by replacing the capital text
$image = get_post_meta($post->ID, 'POST_IMAGE_URL', $single = true);
$image_alt = get_post_meta($post->ID, 'POST_IMAGE_ALT', $single = true);
$image_width = get_post_meta($post->ID, 'POST_IMAGE_WIDTH', $single = true);
$image_height = get_post_meta($post->ID, 'POST_IMAGE_HEIGHT', $single = true);
// If there's an image, display the image with the content
// Feel free to change the styling of the image border
if($image !== '') {
$content = '<p style="float:right; padding:1px; border:1px #dddddd solid; margin-left:15px; width:'.$image_width.'px; height:'.$image_height.'px;">
<img src="'.$image.'" alt="'.$image_alt.'" width="'.$image_width.'" height="'.$image_height.'" />
</p>' . $content;
return $content;
} // End if image
// If there's not an image, just display the content
else {
$content = $content;
return $content;
}
} // End function
?>
Code updated May 24, 2009
Next, close that file and download and install the Get Custom Field Values for WordPress. From now on, whenever you want a thumbnail to appear in your RSS Feed you need to create four custom fields. The first custom field should be called POST_IMAGE_URL. The value for this field should be nothing more than the URL to the image. Be sure to link directly to the image. The next two custom fields are called POST_IMAGE_WIDTH and POST_IMAGE_HEIGHT. The value for these custom fields is the height and width of the thumbnail. Do not add “px” to the end of the number when entering the value. The final custom field value is called POST_IMAGE_ALT. This is the alt text for the image.
What the custom fields should look like.
Update: It seems like a lot of people are having trouble. I’ve reworded the post to make the instructions more clear. Feel free to leave more comments. (May 25, 2009)
I’m a little confused on what parts of the PHP to change. I know you say, “replace the capitalized words with the custom field keys.” But I compared the script on this page to the “custom-fields-for-feeds-sample.txt” file contained in the plugin download and the plugin Author has replaced ‘post_image_url’, ‘post_image_alt’, etc. with the custom field keys.
Could you please add a link to a sample PHP script where you’ve already placed example custom field keys?
Also, with this plugin, is there a way to control where in the RSS Feed the image appears? I’d like my custom field image to appear after the title, but before the excerpt and content.
Thanks for your help!
Hi, sorry about the confusion. I wasn’t really clear in my post and updated it. What you should do is just replace the file (that came with the plugin) with the contents above. Just click on “View Plain” and copy and paste it.
I’m not 100% sure where you want the image to go, but if you don’t want it to be on the right side of the post, you can edit the following code:
$content = '<p style="float:right; padding:1px; border:1px #dddddd solid; margin-left:15px;">Change it to:
_$content = '<p style="padding:1px; border:1px #dddddd solid;">See how that works out!
- Daniel
Daniel,
Thanks for all of the work you did on this. I think I followed the instructions. Here is the code I have in my custom-field-for-feeds.php.
I used the four custom fields as instructed. But my RSS feed still shows no images. I don’t get any errors.
Any suggestions.
*/
add_filter(’the_content’, ‘custom_fields_for_feeds’);
function custom_fields_for_feeds( $content ) {
global $post, $id;
$blog_key = substr( md5( get_bloginfo(’url’) ), 0, 16 );
if ( ! is_feed() ) return $content;
// Place your own four custom fields by replacing the capital text
$image = get_post_meta($post->ID, ‘POST_IMAGE_URL’, $single = true);
$image_alt = get_post_meta($post->ID, ‘POST_IMAGE_ALT’, $single = true);
$image_width = get_post_meta($post->ID, ‘POST_IMAGE_WIDTH’, $single = true);
$image_height = get_post_meta($post->ID, ‘POST_IMAGE_HEIGHT’, $single = true);
// If there’s an image, display the image with the content
// Feel free to change the styling of the image border
if($image !== ”) {
$content = ‘
‘ . $content;
return $content;
} // End if image
// If there’s not an image, just display the content
else {
$content = $content;
return $content;
}
} // End function
?>
I was able to
Where you have:
I’m assuming that is referring to the variable $IMAGE correct? If so, then if we created something different, say $thumbnail, the this should be updated to $thumbnail instead.
Hi Joshua,
I’m pretty sure you’re correct. I’ve updated the post and capitalized that part as well.
Thanks!
update for Daniel’s code:
<p style="float:right; padding:1px; border:1px #ddd solid; width:'.$IMAGE_WIDTH.'px; height:'.$IMAGE_HEIGHT.'px;">to ensure that it’ll be correct displayed. b/c if we are using FLOAT we have to define width of element, otherwise it can be displayed as block element (simple p, div, …)
Thanks Rolandinsh! I’ve updated the post.
What am I doing wrong?! I tried the following and my rss feed didn’t change at all.
Joshua,
I’ve updated the code completely. Turns out I made a few big errors!
Take a look at the new code and try it out.
One thing though. The following is not going to display since there is nothing in between the “A” tags:
- Daniel
Oh I think the img tag was removed from within the link, I did have something there! Still an issue though? What I have is two custom fields, thumbnail and url. I want to be able to display the thumbnail, which will also be clickable and go to the url.
So I had the following defined:
// Place your own four custom fields by replacing the capital text
$image = get_post_meta($post->ID, ‘thumbnail’, $single = true);
$the_url = get_post_meta($post->ID, ‘url’, $single = true);
// If there’s an image, display the image with the content
// Feel free to change the styling of the image border
if($image !== ”) {
$content = ‘
‘ . $content;
return $content;
} // End if image
But it’s not working? Does the rss feed take time to update with the changes?
Hi Joshua,
I’m sorry, but I don’t know. You might be able to find help on the plugin site or on the WordPress.org forums.
I believe I found what the issue is. I am using only a title, thumbnail and url for my posts, no actual content. The thumbnail and url are custom fields.
Recently, I’ve been starting to add content to each post and after doing so, noticed that the thumbnail was now appearing in the rss feed.
Not sure why it took content to do so. Is there a different way to write the script so that it wouldn’t need to depend on having content in order to display the thumbnail and url?
Thanks!
I have justin’s plugin installed on my blog but I cant get it to work.
I have a magazine style theme and for my thumbnails to show up I have to enter “screen” in the custom field. What do I need to change in his plugin for this to work with my theme?
THANKS
M@tt
Hi Matt,
What do you enter in “screen?” Is it only the URL? Also, do you have custom fields for the height, width, and alt?
What do you mean what do I enter in for the screen? Do you mean the value?
My theme’s thumbnail height is suppose to be
width : 120px and height : 100px
Under settings then media I put in for thumbnail default size to be 120 by 100
Can you email me if you have the solution?
When i replace the code..
i am getting this error
XML Parsing Error: XML or text declaration not at start of entity
Location: http://192.168.0.111/wordpress/?feed=rss2
Line Number 1, Column 3:
Matt, see if this works:
thayanithi,
It seems like you’re hosting the site locally, not online. Maybe that’s the error? Was it working before you replaced the code?
Hi, Daniel…
Thanks a lot for your help..
But, custom-field image is not shown in the feed. This image comes under the element..
let me know how can i put the image inside the element..
Thanks in advance
comes as child of content:encoded element..
Hi thayanithi,
I’m not sure why that is. Can you post a link to your site online or a screenshot of your feed? Thanks.
I managed to make’it to work but instead of a image it just shows the alt text.
Hi Andreeib,
I’ve updated the post and made the directions clearer. See if that helps!
Here is what I entered and noting happened. Please help.
// Place your own four custom fields by replacing the capital text
$image = get_post_meta($post->ID, ‘post-img’, $single = true);
$image_alt = get_post_meta($post->ID, ‘Preview Image’, $single = true);
$image_width = get_post_meta($post->ID, ‘150′, $single = true);
$image_height = get_post_meta($post->ID, ‘110′, $single = true);
Hi Heather,
The problem is where you put the 150 and 110.
That part is for custom field names only. The 150 and 100 would be a value. I’m assuming that all your thumbnails are going to be 150px wide and 110px tall. If that’s the case this should work. Also, I’ve updated the original post to make it clearer.
Very nice tutorial, I just finished writing WordPress Mass Custom Fields Manager Plugin, you can get it on my blog. Please leave a feedback if you use it.
Is there a way to get this to work when you don’t make use of the_content, now in only see an image in my feed when i add some text in the content? But i don’t have to use the_content.
Hi Tony,
I’m not sure how to do that. Perhaps you can trick WordPress into thinking there is content by posting just a space in the content. The best way to do this, I think, is to add the following as the content (you have to use the HTML editor, not visual):
Let me know if that works.
- Daniel
That space solution seems to work Daniel. Have you managed to figure out an easier more automated solution rather than manually adding every time?
Thanks
Hey, I haven’t really looked into it since. I know it’s kinda a pain, but it’s the best I could come up with
Especially since the insert character button in WP 2.7 doesn’t function correctly in Firefox! I guess i’ll just have to type the 6 extra characters from now on
Thanks again for the the tutorial and for the solution.