Grow your CSS skills. Land your dream job.

#65: Advanced Uses for Custom Fields in WordPress

More than any other single feature, what makes WordPress a CMS (as opposed to just a blogging platform) is custom fields. Custom fields are chunks of data that travel along with posts and pages in key/value pairs. This data can be pulled out and used in your templates as you choose, allowing for all kinds of smart and interesting things to be done.

Links from Video:

Comments

  1. Bill
    Permalink to comment#

    Quality screencast Chris! I spent the entire day yesterday building a site in WordPress that could have benefited tremendously if I saw this earlier.

    I do wonder, however, since you use WordPress as a CMS on these sites, when you then hand it over to the client, what is your client’s reaction to understanding all of these custom fields?

    Since you can create custom field name/value pairs in any way you want, there is no real standard for the client to adhere to in creating new fields. Obviously, if the value of a custom field is not compatible with the code you are looking for in your page templates, things can get messy. Do you provide detailed documentation to the client?

    I am a newbie in working with WordPress, so please bear with me, but do you create user accounts for your clients with a certain “role” to prevent these issues? What role do you set for them? Or, do you give them an administrator role since it is now the client’s site? (Sorry, went off on a tangent there)

    • Usually at Chatman Design we stay pretty involved with the sites after they launch, so we are rarely in a position where we just “hand it off” and never touch it again. Although more to the point, even those those custom field keys can be anything, it creates that handy drop-down menu for previously used keys so there is a low chance of error.

      When I am in a position to fully hand off a site to a client, I do create documentation and often times screencasts to explain things =)

    • Good question Bill… this is why I tend not to use WordPress as a CMS and build them specifically for the clients needs.

    • Awesome question Bill, and great response from Chris. I primarily use Drupal for all Client sites that I will be handing over 95% control of the site to. Simply because most of using that system is point and click and it is extremely simple for the client to use. Using WordPress sounds like a great option for when not giving control to the client. I can see many benefits to that. Great screencast!

  2. Edward
    Permalink to comment#

    Another awesome video. It just reinforces the fact that WordPress is one fantastic CMS! Can’t wait for the book – I just know it’s going to be a superb resource.
    Thanks again. Edward

  3. Edward
    Permalink to comment#

    I know custom fields have been used for thumbnail images and the like for a while but this video takes it to a new level – great stuff.
    But, from a clients point of view, where do they get the ‘path’ for the images to add into the custom field? If they upload images through the interface in the Media sidebar tab where do they get the url?
    Redards, Edward

    • This is something you’d just have to teach them.

      Personally I rarely use the built in media uploaded, but even if you do, if don’t use the rich text editor (or quick jump over to the code view), you can find the URL for an image you upload.

    • Donna
      Permalink to comment#

      I wondered the same thing about this myself. It seems too clunky for the user to have to “find” the path. I experimented with the media upload but it isn’t all that user friendly. I decided that custom write panels is the way to go and to implement a browse button.

    • I combat this by doing the following:

      Change the settings in wordpress admin so that all images go into uploads folder (not in date format).
      Then I hard code the path right up to /uploads/ in the template file.
      Then only the image name needs to go into the custom field.

      eg. <img src="http:///www.site.com/wp-content/uploads/ID, 'image', true'); ?>" width="10" height="" alt="#" />

    • <img src="http:///www.site.com/wp-content/uploads/ID, ‘image’, true); ?>/” width=”10″ height=”” alt=”#” />

    • Aparently I cant type php in here. But maybe you get the idea

  4. thank you very much for enlightening us. You really helped me open my eyes with your video tutorials. I made my own website thanks to you. Thank you so very very much

  5. kyle
    Permalink to comment#

    Something on Custom Write Panels might be a good followup screencast for this:

    http://wefunction.com/2008/10/tutorial-creating-custom-write-panels-in-wordpress/

    I think there are some plugins out now that make this even easier.

    • Donna
      Permalink to comment#

      Yes, I would love to see more on this. I wrote a custom write panel following the article on wefunction but there are a few plugins that are great (more-fields, custom field template)! With a custom write panel, you have more control however so I’m still debating on which way to go.

  6. Justin
    Permalink to comment#

    Just to throw this out into the conversation … PODS http://pods.uproot.us/ I’m using this plugin for WordPress and have found it great because content exists apart from specific posts/pages … relationships can be made between content types … data exists in it’s own database tables … I have found it specifically useful for allowing clients to edit content.

  7. Kris
    Permalink to comment#

    I’ve been wondering about the custom fields for quite some time, thanks for this video. It’s pure awesomeness.

  8. henry
    Permalink to comment#

    Wow! This came at the right time!!! Thanks Chris for some reason every time I’m looking for stuff on the web you always seem to bust out with an awesome screencast about it!! keep up the awesome work!

  9. I learned more than just custom fields in this one. I was spying on the rest of your code. Thanks!

  10. Custum fields are something I have never realized to true potential of – until now. Thanks for another awesome screen cast Chris!

  11. This is a really neat screen cast for those unfamiliar with the power of WordPress, I plan on showing someone I was trying to convince to use WP for non-blog website. The only thing that was too elegant was the recommended product, I don’t think WP has a very graceful way of handling this, but one option that is fairly painless is creating a template that just shows that little bit of content (i.e. no header) and then in the custom field put the URL to that page and on the product template loop through them and make an iframe with that content.

    If there was any solution in WP it would involve putting the ID of the product page you want to recommend query the DB for that info and loop through each of the results.

    Sorry for being vague, but I am not very familiar with WP functions.

  12. Permalink to comment#

    Hey Chris, this was a great tutorial and I enjoyed watching it. However I couldn’t help but notice a potential security hole with the way the price information is handled in foxy cart. From what I observed, prices are sent to foxy cart via a hidden field. This seems insecure in that someone could go into firebug and modify the hidden field value. This would then change the price that is sent to foxy cart. Not being a user of foxy cart I don’t know whether there is a way to deal with this. Anyways, thanks for the tutorials and keep up the good work.

    • I think with FoxyCart there is a certain amount of ambiguity afforded to users. It is not meant to be a full blown CMS, but rather a simple system for small businesses to get up and running in e-commerce. I think the assumption is that they won’t willy-nilly process orders, but someone will look at the order and the prices and any questionable amounts will be rejected.

    • I think that’s exactly right. If you see a $100 product come through and a receipt total of $0.02, it’s fairly obvious what is going on.

      Is there risk of manipulation? Sure. Number of your customers who A) know how to manipulate the DOM and B) are jerks willing to risk the embarrassment of being caught = low number.

  13. Hey Chris, you should do a screencast using Flutter. It uses custom fields, but I think it makes it more self-expanatory when handing it off to the user.

    • I agree. I have only toyed with flutter a little, but its pretty good, its the CCK of Drupal for WordPress.

    • Boo yea, I knew it existed. I hope it works well. I have been using “more fields” plugin to get the extra inputs, but flutter makes a different kind of post! I love it.

    • Yeah, that would be super useful…because I’ve been messing around with Flutter but it’s a little difficult to figure out. It’s lacking severely in documentation and use examples. I also considered Pods for awhile, which also was a little obtuse.

      I wish I could see a nice working example / walk-through for both of these plug-ins!

    • Hassan
      Permalink to comment#

      yeah, it would be great. Chris, is there somewhere in your site we could send our request for screencasts? something like “Send me your idea for the next screencast”… That would be great…

    • Fredrik
      Permalink to comment#

      Yes! Flutter is awesome. I’ve started to use it on every website I make for clients. It makes it so easy for clients to update their own sites, and with “in page editing” it’s so easy a really novice user can understand how to update a page in just minutes.

      And on the back-end it’s super easy to implement the Flutter custom fields, you just call the function get(‘fieldname’);

      I haven’t had time to explore all the input types yet, but one use I had for the date field was on a restaurant site where the client would input all the daily lunches they served for the whole week, this was easy to code with flutter and even easier for the client to just choose date and other stuff in the custom write panel.

  14. Thanks for the video. The quality of video is too good, and its size is big. Can you make FLV versions of videos for fast downloading. I think if you give 2 options: m4v files and FLV files, it may be better, at least for me. Thank you very much.

  15. Thanks for the awesome screencast, I’ve just begun to figure out small bits of using custom fields like sending a thumbnail through the RSS feed. I just learned a lot more about custom fields, page templates, and PHP!

    Keep up the good work! I really appreciate you creating these video tutorials for free!

  16. Permalink to comment#

    @Chris I don’t see any other comments about the “full screen” view of this cast – so I wonder if it’s on my end; BUT, using firefox in winXP, I see the screencast with motion, ok (too small) however completely still (like a screenshot) when I expand to full screen. That’s never happened before (and in fact didn’t happen when I just watched Remy Sharp’s current screencast). The still image is “captured” at the point I select “expand” so changes depending up on the point in the cast where the button is clicked. Even with the still image, it seems I can change the volume however.

    What is happening??? None of your previous casts had this problem. Did you do something different this time?

  17. Michael
    Permalink to comment#

    Fantastic tutorial.

  18. Chris, Why not use a small amount of php along with the custom field so that the client need only type in the image name? This shrinks the margin of error down to just their knowledge of the file name.

    Although it does remove the clients flexibility to store images anywhere they choose.

    Thoughts?

  19. Jack Feefofe
    Permalink to comment#

    Wow! Great screencast! WordPress seems to be pretty powerful, but I still think Drupal has more options.

    I do see a problem with your code, however. It obviously works but may not be the best way to handle this.

    You should not have to create an IF statement for every category and product (to be used as a recommended product). What if there were many categories and thousands of products? Technically, for this to be a true CMS, you would be able to add a new product as a post and then immediately use this new product’s name as a “recommended” product in another product, all without changing the code! Currently, you would have to create another ELSE IF statement in the template’s code, if I understood correctly.

    I have absolutely no experience in WordPress, so I have no idea of another way to do it, but I am assuming that there should be a way. If not, then there seems to be an issue with using WordPress as a true CMS.

    Nonetheless, you do a fabulous job explaining and showing on these screencasts! I truly enjoy them! Thank you!

  20. I’ve always been a bit confused on the use of Custom Fields in WP but I had many “light bulb” moments watching your screencast. Thanks! It was also great getting a feel for how to set up ecommerce in WP. I’m impressed by how intuitive it is to implement FoxyCart. Thanks again for sharing your knowledge and for giving us a tour of your top quality work…

  21. Joshua Gruzard
    Permalink to comment#

    Where does the page template attribute come from? I’ve been playing around with wordpress and it doesn’t seem to auto-generate when creating a page, or post. Is it a plugin? Sorry if it is a dumb question. I am very much an amateur.

  22. Hi Chris,

    Great screencast! I already use custom fields but I didn’t know about the use of vertical bars.

    Do you know how to list all values of a custom field?? For example, I have a site that always uses one of five values for a given custom field. Almost like categories. However I would like to be able to print out all the existing values for that field and enable the user to “filter” content by clicking on a link that sends them to an “archive” for that value. I’d like to do it automatically so that a sixth or seventh value could be added easily by the site owner without me having to change the template. Any ideas?

  23. chad
    Permalink to comment#

    @chris have you thought about using Flutter? http://flutter.freshout.us/. Basically it allows you to create custom write boards and places them in the vertical global navigation on the left hand side. It has some really nice features like image uploads and cropping and being able to pull basically any data like you have done above. The biggest advantage I guess is that you can build the forms so you are not using a the generic wordpress page or post interface and that the client would never have to set a key for the custom field and never have to select the category or parent. That is something that is defined when you build the form.

    • I tried Flutter before on my personal weblog (still a WIP). At first it looks really nice but you soon encounter many problems with it. For instance, you can only give a label along with the custom field, you can’t give a description to explain how to actually use the field. More importantly, Flutter uses its own functions to retrieve the custom field so whenever you disable Flutter, you’re page and post is broken.

      Luckily I found another plug-in, namely Custom Field Template (http://wordpress.org/extend/plugins/custom-field-template/) which does a much better job than Flutter. You assign a new custom field template to specific pages, categories or (and this is interesting) page template and then enter the details about all the available fields that should show up in an INI-like format. CFT allows you to customize anything: you can enter HTML before and after the field, you can give it custom styles and event handlers, you can make a new TinyMCE instance or a date picker to enter the field’s data,… It’s very complete and yet very easy-to-use for the blog author to fill in the custom fields. I’m using it – and I love it!

    • chad
      Permalink to comment#

      Good to know! The description part is cool, looks a little cleaner also. I think using custom write panels is the way to go with something that is so heavily reliant on custom fields.

  24. Great screencast, as usual.

    One tip, which is VERY helpful:

    This makes just one call to the database to retrieve all your custom fields on your product detail pages. It will speed things up tremendously.

    The single line of code above will get all the custom fields and put them into a mutli-dimentional array. Then, in your code, you just reference the name of the custom field and the index of the field.

    Ex:

    $custom_fields[‘_photo_1_large’][0]

    I personally like using a one-to-one relationship between my custom field names and the data – no arrays, but with a bit of code to determine the length of each field’s array, you could just pull out the x number of values for a specific custom field.

    You can also take this custom fields concept one step further and read data from a inventory management system or any other system. Then, using XMLRPC, you could update the WP site with that data. For instance, if you wanted to have your posts updated with stock status, like “In Stock”, “Ships in 2 Weeks” or prices, or whatever, you could update your site on a scheduled basis (once an hour, once a day – whatever). Basically, it’s a nice way to integrate systems together.

    Here’s an example (it’s not done yet) of a WP real estate site that will eventually grab real estate listings from a multiple listing service, and will be updated on a daily basis using all custom fields and XMLRPC. Currently, it just grabs some test data from a separate database and creates/updates the properties on the site via XMLRPC.

    There is not a single line of code in the post body of any property page – 100% custom fields.

    http://www.risaweiss.com

    • WP stripped out my line of php code!

      $custom_fields = get_post_custom();

      Let’s see if it takes it this way.

  25. Excellent screencast! Thanks.

  26. There is so much fantastic cleverness packed into this! It’s all so intuitive. Nice to know you’re still human and haven’t yet figured out an elegant solution for everything (i.e. the recommended products).

    Man, this is such an antidote to my tussles at work with horrible Joomla extensions. I have to try and style stuff made by guys who can’t even write proper html, much less separate presentation and content. Sometimes just looking at the code makes me want to cry.

    Thanks for making me smile again. Code is poetry.

  27. TheDoc
    Permalink to comment#

    Couldn’t have picked better timing, Chris.

    I literally just started looking into Custom Fields the day before you posted this. I swear sometimes you’re just reading my mind!

    • Fredrik
      Permalink to comment#

      I feel the exact same way, that happens all the time for me on css-tricks, It’s weird, but awesome :D

  28. John
    Permalink to comment#

    Watched the screencast last night on my 46″ Panasonic through a PS3. Makes watching your stuff even more enjoyable. Tob job Chris cheers.

  29. Very nice screencast. I’m still learning my way around wordpress. Your vidcast definitely helps. :)

  30. Chris Hajer

    I agree with you, around 40:00 that that’s not the best way to do related products. I was with you up until that point.

    And I was really hoping to see the templates for the envisioncad.com/training/courses/ and SPECIFICALLY the RSS feed for that page of courses.

    Very cool. Sorry the comment it so late: I just finally got through the screencast, across 4 days.

    Thank you. Hope you can make it to The Taste of Chicago while you’re here. Good times.

  31. Hi Chris,

    Just wanted to give you a HUGE thank-you for sharing your uses of custom fields and foxycart with everyone. It looks like the perfect fit for a website I’m about to work on and I really didn’t want to use wp-ecommerce! Really appreciate your work!

    Regards

  32. Chris,

    what video service are you using to host the product videos? Is it in house or are you hosting them elsewhere (vimeo, flickr, etc) and just embeding the code. I’m about to be in a similar situation (in house produced videos of products).

    As always, a great video (that actually renewed some of my interest/faith in wordpress). Thanks.

    Evan.

  33. Permalink to comment#

    Hi,
    Thanks for this screencast. I haven’t watched the whole thing yet so maybe the answer is in the screencast, but was just wondering if a child page can have more than one parent page, in the same way that a post can belong to more than one category?

  34. brat
    Permalink to comment#

    What you use the font

  35. cdawg
    Permalink to comment#

    Is it possible to query for custom fields by author? Let me explain. Using TDO Mini Forms, I am allowing users to submit posts which will act as their profile page. I do not want to allow access to the backend, so I need to populate a template page with each users value for each custom field. Can I get custom fields by post author? Please help. Any suggestions for a different method would be great, too! Thanks!

  36. this is very informative blog on wordpress that i think is thr best software better than joomla better than drupal and os commerce.
    no crush in wordpress ……………………………..

  37. Bernhard
    Permalink to comment#

    Hir Chris,
    Thanks a lot for your informative website!
    I found out, that in password protected pages, only the_content is protected, but not the content of the costum fields. do you have any idea, how to password protect the content of costum fields in wp-page?
    Bernhard

  38. Permalink to comment#

    Hey Chris,

    Have you ever seen the plugin Supple Forms? It’s a great way to make a nice interface for your custom fields. It’s also less confusing for the client. Just a thought to make this process easier. :) Really enjoyed your presentation at Front-End.

  39. Hey Chris, I am currently working on an ecommerce site where I was planning on using the custom fields to pull the information just as you are showing. I had to re-consider this because someone I am working with told me that using the custom fields could slow the page and even crash it because it makes so many sql server calls. Your site seems to be working just fine. Do you see this as a valid concern?

    Thanks!

    • I think that sounds insane to me.

      There MIGHT be a little extra database action involved but I’m sure it’s very fast and not noticeable.

      Do they have any information to back it up?

  40. David
    Permalink to comment#

    Hi Chris, thanks for the incredible tute, I got a ton of great information form this and you cleared my thinking on a project I am working on.

    I realise this was a while ago so apologies for posting on an old thread, but I am wondering if you know of a way or can recommend a way to add custom fields to user profiles? I am setting up a company blog and the company has 30+ employees and each employee needs to be setup to be an Author on the site. Problem is I need to have a lot of information stored for each employee, including multiple photo’s, bio (long and short) and list of areas of responsibility within the company so they can be searched.

    I was thinking of using custom fields per author to handle this but I don’t see a way to add custom fields into users. Any ideas?

  41. I am working on a custom form where a user can submit a post, but the image uploaded doesn’t create a url in the post_thumbnail custom field I created. The image shows in the post on the single page, but the url doesn’t fill into the custom field. How do I get the image uoloaded in a custom form, to save its url in my custom field? I am lost. I have tried for days to get this to work properly. Can anyone help?

  42. Not sure if you’re still responding to this thread…

    First, GREAT tutorial! It has really helped me setup my client’s WordPress/eCommerce site. I’d never really used the parent/child feature or the query_posts on a page before…which brings me to my question:

    Is there a way to break the posts on a page up into multiple pages? My client has about 50 products, but we want roughly 9 per page with navigation buttons to view the rest.

    I’ve seen various posts about doing this, but none of them work in my situation.

    Thanks for your help!!!

  43. what a great tutorial. I wondered how did you do the store navigation ? how do you target each categories link ? thanks

  44. Maj
    Permalink to comment#

    Hello Chris,
    I’ll start by thanking you for this wonderful video on WordPress custom fields. Also, I find many other posts on this blog extremely useful.

    With regards to this post, I have a question if you can help me. I’m creating a custom page named “Videos”. And I’m using a custom filed where I place Youtube embed code in. I’m having more than one video on this page called through the same custom field.

    I want to create a new page for every 6 videos so there will be pagination in this “Videos” page. Just like how WordPress index page spits outs a set number of posts and create more pages when there’s more items.

    Is this possible?

    Please help me when you get a chance.

    Thank you for your time.
    Maj.

  45. James
    Permalink to comment#

    Thanks for this video, it made it all so much clearer

  46. Permalink to comment#

    This is a cool plugin for those who need a little help with custom fields, it help me a lot on a project: http://www.advancedcustomfields.com/ (no, I don’t work for ACF, just a fan of CC and ACF)

  47. Permalink to comment#

    hi chris, i like your screencast about custom fields….i want to master the wordpress custom fields,,,,can i have a example of fitness foundation site woldpress folders to view all the codes,,,,it will really help me a lot…i want to study the codes you use in index.php, page.php, and etc…pls im begging you….am i newbie in wordpress….thanks for advanced

  48. This tutorial has helped me considerably. Chris Coyier you must be at least, a minor deity!

    Thanks

  49. James
    Permalink to comment#

    Has anyone ever told you, you have a great tutorial voice?

  50. James
    Permalink to comment#

    42 – lol, of course.

  51. said lamasdya
    Permalink to comment#

    Hello thank you for the lesson from a new link to download the video on Youtube quality bad
    Codes and unclear to readers

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".