WordPress Custom Field

by Jin, 10-21-08 // 25 comments

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’).

wp_postmeta table

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.

body {
    background-color: #aaaaaa;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

#title a, #title a:visited {
    font-family:"Century Gothic", arial;
    font-weight:100;
    color: #ffffff;
    text-decoration: none;
}

By default, the blog article looks like this without custom field values applied:

plain article

Now let’s retrieve the values of the custom fields I set. In the header(<HEAD></HEAD>) part of the header.php file, I added the following snipplet:

<style type="text/css">

<?php
    $image = get_post_meta($post->ID, 'bg', true);
    $titlecolor = get_post_meta($post->ID, 'titleColor', true);
    $bgcolor = get_post_meta($post->ID, 'bgcolor', true);
?>

body {
    background-color: <?php echo $bgcolor ?>;
    background-image: url('<?php bloginfo('stylesheet_directory'); ?>/<?php echo $image ?>');
}

#title a, #title a:visited  {
    color: <?php echo $titlecolor ?>;
}

</style>

Now the article looks like what you’re seeing.

styled article
get_post_meta($post_id, $key, $single);

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

also feel free to contact me on twitter or via email
Woody 10-21-08

Have also been thinking of using wordpress for my new personal site. Thanks for the info – this is helpful!

Dmitry 10-21-08

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 10-21-08

@Woody, I’m glad you found this useful.

@Dmitry, yes, we should focus on writing the content instead of writing the platform indeed. :)

I thought about writing my blog in asp.net at first, but after seeing how much community support there is for WP, I changed my mind. I’m glad I did, I’ve been very impressed by WP.

JT 10-21-08

Great tutorial! I’ll try it on my site.

Thanks

Stefan Vervoort 10-21-08

@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!).

Jin 10-21-08

@JT, Thanks!

@Stefan, TY for the link! I’ve been meaning to get a good code formatting plugin but haven’t gotten a chance to search for it! I’ll definitely use the one you recommended.

[...] WordPress Custom Field post explains how to give each blog entry it’s own [...]

[...] Visit Source. [...]

Celosia 10-28-08

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!

Jin 10-28-08

Celosia, thank you for your comment.

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.

Jin 11-18-08

Hi Soupy, you don’t put that anywhere. That line was to explain the three variables of the standard syntax of the get_post_meta() function.

In my example I used “get_post_meta($post->ID, ‘bg’, true);”

so the 3 parameters are $post->ID, $key, and $single. Hope this helps to clear it up. Thanks for reading.

Brian 01-15-09

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.

[...] WordPress Custom Field Tutorial [...]

Jack Sowden 06-26-09

Just like to say thanks for this article, it helped me a great deal. Everyone else just seems to over complicate things!

Jin 06-26-09

@Jack, I’m glad you found it helpful!

MichaellaS 07-22-09

tks for the effort you put in here I appreciate it!

Shane 07-23-09

Man…

I was in such a rush, and have so ingrained the idea of seperating presentation from content, that I couldn’t see the solution sitting right in front of me.

Inline styles…geez. I’m gonna go cry in a corner now.

Victor Boba 10-09-09

Great post Jin. I just finished my C# blog using WP. I’m sure I’ll have use for Custom Fields somewhere. Your UI desing knowledge never dissapoints.

Rodrigo 11-20-09

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?

Thanks!

[...] 54. WordPress Custom Field [...]

Tre 05-23-10

This help when I use wordpress as a tool for my web design and web development projects.
Thanks. I will implement it right away.

rob 12-02-10

I’m wondering how to modify this function a bit to use a standard background image for the site unless a unique one is specified in the custom field. Anyone?

Tony 02-28-12

This is perfect. Exactly what I was looking for, a straight-forward no fluff explanation and instruction set on how to use wordpress primarily for its CMS power.