WordPress Custom Field

Before I launched this blog site, I was hesitant to use the current popular blog CMS softwares. To me, CMS = template generated, therefore not versatile to customization. I wanted each of my blog entries to have its own style. I wasn’t sure if it was possible to do with the CMS out there. After some research, I was sold on WordPress. I was very impressed by WP’s page template, but even more so with the custom field feature. It allows me to do exactly what I want with my blog.

In this article, I’ll review how easy it is to customize the background color, image and article title color of a particular blog entry by using custom field tags.

What Is a Custom Field

A custom field is a key+value pair that’s associated with a particular post. Once a key is made, it can be used for other posts, with different values. The key is the name of the custom field, and the value is the information contained by the field. The key+value information is also known as meta data. It is stored in a database table called wp_postmeta.

<Table: wp_postmeta>

Field

Type

Null

Key

Default

Extra

meta_id

bigint(20)

PRI

NULL

auto_increment

post_id

bigint(20)

IND

0

FK->wp_posts.ID

meta_key

varchar(255)

YES

IND

NULL

meta_value

longtext

YES

NULL

Setting a Custom Field

Setting up a customize field is very easy. In fact the feature is already in the WordPress admin panel. I’ll set up three custom fields. One for the background image(‘bg’), one for the background color(‘bgColor’), and one for the article title color(‘titleColor’).

Retrieving Value

Here’s what I have in my style.css for the BODY and #title (article title) tag. By default, there’s no background image used, only the placement of it. The background color is set to gray and the article title color is defaulted to white.

The syntax call for get_post_meta() function is rather simple. You give the post ID, the name of the field($key). $single is a boolean variable. When it’s set to true, it returns the value as a string. A custom field can have multiple values, in which case you would set this variable to false, returning an array instead.

That’s pretty much it. In my example, I’m mostly showing how to use custom fields to change a blog post’s simple visual appearance. You can also use the same concept to change layout, or additional textual content etc.

25 comments

So that’s how you do all these custom backgrounds… that’s very cool — didn’t know about this. I did notice the custom field thing in the admin controls but was a little confused about it’s function :)

When I started my blog I custom coded it in Rails because I wanted complete flexibility, but ended up migrating to WordPress. I think anyone starting a new blog should go with WP or similar for two reasons: 1) The post creation GUI is very powerful and allows you to format posts in a similar fashion to a desktop word processor. This makes life a lot easier. 2) Someone else is out there constantly making upgrades and updates to the CMS — you don’t have to worry about it.

But yeah.. this is great. I wonder if I can come up with some unique way of using it on my blog.

@Jin – Good job on this tutorial. You’ve explained it great! The code markup is a bit small though, could I recommend you to the FV Code Highlighter I use on my blog? You’ll have full control over your code rendering (colors, size etc!).

Hi Jin! Love your site. Thanks for shedding light re custom fields. I’m really interested in incorporating this in my WP site. The theme I’m using comes with a custom functions page. Instead of meddling with the actual files related to the theme, I make my changes in this file – which makes it easy to install the upgrades. Is it possible to retreive the custom fields that I’ve set through this file? It would be really neat if I can do it that way!

I don’t use the custom function page myself. I assume it’s a .php file that includes whatever functions you add in there yourself, and the functions in there can be accessed globally. The method I use to over write the default values in style.css has to be in the header of the html, typically is header.php, so I honestly don’t know if there’s another method.

you can retrieve custom fields’ values in your custom function file, however to render them to the corresponding css attributes, it will have to be called in the html header section. But since the intrisinc function get_post_meta() already does that, I don’t see the need to create a custom function for it. Sorry I know this doesn’t help much. Then again I’m not an expert on php or WP even.

Soup Soupy Dog 11-18-08

Hey, thank you for this article!

What do you mean at the end by, get_post_meta($post_id, $key, $single);

? Where do I place this? Kinda just threw that in there and I’ve got no idea what to do with it. Otherwise great write up.

Great post! Finally someone posted a straitforward explanation for how to retrieve custom field values.

now I can get my portfolio theme happening…

Dan 02-04-09

This clarifies somewhat the use of custom fields for me, but I’m still confused. I want to add a custom field that is displayed on all posts so rather then giving a post id I’d to display the value for that post, I need a mechanism whereby the value for that fields would show up for any post.

Great work! I’m working on modifying my template now. I was having one problem though – what happens if you want to create fallback content if you don’t create a custom on your post? It gives me a blank page and normal CSS fallback doesnt seem to work it just says there is url”" for the background. How would i make it if I didn’t have the field on a post for the page to follow the default style sheet?