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.
| 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.
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:
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.
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.
Comments 21
10-21-08
Have also been thinking of using wordpress for my new personal site. Thanks for the info – this is helpful!
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.
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.
10-21-08
Great tutorial! I’ll try it on my site.
Thanks
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!).
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.
10-21-08
[...] WordPress Custom Field post explains how to give each blog entry it’s own [...]
10-22-08
[...] Visit Source. [...]
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!
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.
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.
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.
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…
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.
05-13-09
[...] WordPress Custom Field Tutorial [...]
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!
06-26-09
@Jack, I’m glad you found it helpful!
07-22-09
tks for the effort you put in here I appreciate it!
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.
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.
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!