An Introduction to Custom Fields
Published
August 29, 2009
Using custom fields can be confusing to new WordPress users. Scott Ellis provides an introductory explanation of how to use custom fields for image placement and the components that go into making custom fields work from front end placement to back end utilization and code.
Speakers
Tags
Language
Download
Subtitles
Subtitle this video →Producer
An 
Ruckus
WordPress.tv 
August 29, 2009 at 3:42 am |
Some helpful links:
http://codex.wordpress.org/Function_Reference/get_post_meta
http://codex.wordpress.org/Function_Reference/post_meta_Function_Examples
LikeLike
August 29, 2009 at 7:29 am |
Nice explanation!
I always wondered how these thumbnails are added to magazine layout themes and I had no idea! Indeed I was more interested on the PHP code of how making it work 😛
It seems that with custom fields we can do pratically any customization…
But I have 2 questions
Are custom fields limited to varchar values, or can we use any kind of data there? Does it have any size limit?
Ans what about these themes that have a stick post with a bigger image? Does it have 2 custom fields 1 for thumnail and 1 for stick image?
tnx again!
LikeLike
August 29, 2009 at 2:32 pm |
Hi, Scott
This is very helpful for those of us who aren’t programmers but want to maximize WordPress. Thanks for taking the time to submit this tip.
LikeLike
August 29, 2009 at 8:24 pm |
Justin Tadlocks Get the Image plugin can also help you to solve this task (also without CSS stuff in the php file 😉 ).
LikeLike
August 29, 2009 at 11:25 pm |
I would like to see a follow-up video explaining about that Custom Field Template that you told us to ignore. I know it’s created by coding in some WP hooks in functions.php as I have done it myself, but it would be cool to see your interpretation of doing this, might pick up some additional tips.
LikeLike
August 30, 2009 at 2:53 pm |
Thomas, that is a good plugin, Justin does great stuff but custom fileds can be used for a lot of things, images were just an easy example, hopefully viewers will find other creative uses. Not sure what you mean about all the css in the php?
LikeLike
August 30, 2009 at 3:11 pm |
I was just wondering about the styling, that you’ve got about 3 minutes into the video.
But I didn’t mean to take our eyes of off things. You’re absolutely right the custom fields can be a powerful tool. And I hadn’t really grasped how easy it is, before I saw your video. Good job.
LikeLike
August 30, 2009 at 5:10 pm |
This is very hard to follow. I admit, I’m not a newbie, but I am not terribly advanced, so I’m not sure where the problem is. One, I think you’re moving too fast. Two, when exactly should you first see the picture appear in the custom field? After you copy the url to the value field and update? or after you go into the home.php and change the code? That is completely unclear. This is such a great topic, so I hope if I post a few questions, it will become clear how to do this. I really do appreciate that you’ve posted this. Thanks!
LikeLike
August 30, 2009 at 5:13 pm |
also, my home.php doesn’t have the code you show. I am working in the theme Constructor. below is all the text in the home.php file:
LikeLike
August 30, 2009 at 5:38 pm |
Woopsie & sorry. below is the code in my file:
LikeLike
September 2, 2009 at 10:26 pm |
Consciência, you could use two custom fields for that if you wanted to. It would work just fine. I’ve read about some potential performance issues if you use a lot of custom fields but haven’t experienced it myself. We use several on citycrush.com including for the post thumbnail and the image in the post after you click through. The custom field type in the DB is “longtext” maximum size 4GB.
Driz – We used a plugin for that previously but moved to adding it to the functions.php and using wp hooks so it sounds like you are doing exactly what we would.
Thomas, most of what was in there was actual logic or just spitting out the html, not css styling, we keep all of that in the stylesheet. Glad you enjoyed the video.
Karen, sorry it felt fast, if you look at an example and watch the video I’m sure you’ll pick it up quickly. It took me a couple of rounds the first time I started playing with custom fields. Justin Tadlock has a good explanation here as well: http://justintadlock.com/archives/2007/10/24/using-wordpress-custom-fields-introduction.
The pictures will appear on the page where your custom field spits them out once you save the image url in the appropriate custom field. FYI, you code didn’t show up so visit http://www.vsellis.com/wordpress-how-to/using-custom-fields-in-wordpress/ and leave a comment and I’ll take a closer look.
LikeLike
September 10, 2009 at 4:33 pm |
Thanks for the reply!
I’d like to suggest a subject for a future tutorial.
I love Drupal’s ability to use blocks above and below main content area. It is much easier to implement than WordPress widgets.
But I know it can be done in WordPress too. I’ve seen some magazine themes that have a “horizontal sidebar” on the botton of the page, and recently I’ve also seen a premium theme that has a “top horizontal sidebar” and a “bottom horizontal sidebar”, together with standard right and left ones.
It would be great if we had a tutorial teaching how to do it!
LikeLike
September 12, 2009 at 7:21 am |
Hello all, just wanted to add one extra tidbit of info.
The first time you use custom fields, the “name” field is blank, so yes, you would be typing in “thumbnail” as seen in the video. But after your very first use, the “name” field will appear as a pulldown menu which displays ALL previously-used names. So you really don’t have to worry about typing it the right way every single time — just as long as you get it right the first time, you can just select it from the menu. Much faster, and it ensures you’re spelling it the same way every time.
I realize everyone will discover this on their own as they try it, but thought I’d mention it in case anyone was daunted by the prospect of having to be extra-careful about typing out those case-sensitive field names every time.
Case-sensitive is definitely important though… for one website I run, cnyradio.com , I originally used Tadlock’s “Newspaperize” theme, which used the custom keywords “thumbnail” and “image.” Later, I upgraded to a newer theme of his, but the theme was designed to seek out “Thumbnail” and “Image” with capital letters at the beginning. Rather than go through all my old posts to change the custom keywords (would have taken forever) I just changed the uppercase letters to lowercase in the theme templates.
If you want a good example of how different custom fields can help with your site design, check out cnyradio.com. It’s not as complex as the site shown in the video, but it’s (hopefully) still simple enough for newbies (like I was just 2 years ago) to understand.
My “loop” pages (home page, category pages, etc.) show 128×96 images invoked by the “thumbnail” custom field. When you click to read the full text of any post, a larger 200×150 image appears, invoked by the “image” custom field. If either field is blank or missing, then the site simply doesn’t display an image — the text takes up the entire width of the space.
Yes, it’s more work because I have to create 2 custom fields for each post, and I create 2 separate images. I do the latter for two main reasons. One, I don’t like relying on web browsers to resize images on-the-fly. Even if it looks OK on my computer, it may appear choppy on someone else’s.
Two, and more importantly, an image at 200×150 doesn’t always look so good when you simply resize it to 128×96. For example, the “fullsize” version of any mugshots I use will often include the subject’s name and a “courtesy line” to credit the photo source. But that text would be cluttered and tiny when the size is reduced, so when I make the thumbnail, I usually delete the “courtesy” line and bump up the text size of the person’s last name so it’s less cluttered and easier to read.
If anyone reading this does look at my site to see what I’m talking about, just a note that any “Picture of the Week” posts are done entirely differently. I won’t get into details, just wanted to avoid any confusion.
LikeLike
September 25, 2009 at 1:09 pm |
can we add custom fields to wordpress.com blogs?
LikeLike
September 28, 2009 at 3:24 am |
No; you cannot.
LikeLike
November 8, 2009 at 5:38 am |
I guess never say never, huh?
LikeLike