Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

Extend WordPress With Custom Fields

WordPress’ popularity has grown exponentially as of late. This rise in popularity is due in part to WordPress’ custom fields. Custom fields allow you to add little bits of data to posts. They have changed the way people look at WordPress. A couple of years ago, WordPress was a blogging platform — a good one, but a blogging platform nonetheless. Now it’s widely considered to be an excellent simple content management system. How did it evolve so quickly? Custom fields, that’s how.

How exactly did these bits of data transform WordPress? The fields could initially include the weather — as the codex points out — the temperature and various other not-particularly-useful things. And that was the story for a while. Then people started to realize that they could use the custom fields to store URLs of images. They could then pull these images to the home page to create magazine-style layouts. These magazine themes, as they became known, evolved, and eventually you were able to pull images automatically from posts. You can draw a direct line from WordPress’ popularity to the magazine themes to custom fields.

The Custom Field Syntax Link


In order to do more complicated things, you’ll need to understand the syntax. Creating a custom field is easy: it requires a name and a value. The name is constant, but the value can change with each post.

A real-world example: let’s say you run a blog about cameras. You have categories set up for each type of post (“Review,” “New,” etc.), and you tag the post with the manufacturer’s name. But you want to display the price and specifications of the camera. This is as easy as creating a new custom field with the name Camera_Specs and then typing the info into the value box. Click the “Add” button and you will have added the custom field to the post.

Displaying the field on the page is simple, too. In the single.php file, add the following code:

<?php echo get_post_meta($post->ID, "Camera_Specs", true); ?>

(You might want to wrap this in a paragraph, ordered list or the like. You can use HTML in the value of the field.)

Custom fields can be conditional, too. We can display a camera’s specs or, if that isn’t available, some generic text.

<?php $camera_specs = get_post_meta($post->ID, 'Camera_Specs', true);
if ($camera_specs) {
<?php echo $camera_specs; ?>

<?php } else { ?>

<p>No specification available.</p>

<?php } ?>

That’s the general syntax, and now the only limit is your imagination!

Spicing Up Post Titles Link


Post titles are usually fairly boring. You’re limited to text. Links aren’t possible, nor is HTML. Well, not anymore. Custom fields to the rescue!

Using a conditional statement and custom fields, adding any HTML to your posts’ titles is now possible. (This won’t work with RSS feeds or the like, but it works great for any titles on the blog itself.) We’ll use the custom field Post-Title:


You can add any HTML you like to your posts’ titles. Implementing it on your blog is easy, too. You’ll have to use the following code on all pages on which titles are displayed: the home page, archives, current posts, etc. The following snippet looks for the custom field and falls back on the_title:

<?php $post_title = get_post_meta($post->ID, 'Post-Title', true);
if ($post_title) {
<h2><?php echo $post_title; ?></h2>

<?php } else { ?>

<h2><?php the_title(); ?></h2>

<?php } ?>

An easy yet effective way to improve your website.

Only Display Posts With A Specific Custom Field Link

WordPress displays posts through something called a loop. Another WordPress function, query_posts, allows you to choose exactly which posts are displayed in your loop. One parameter lets you display only posts that have a custom field and/or that have a specific custom field value. Going back to our camera website, we could display only posts that have the custom field Camera_Specs:


If we wanted to display only cameras that had 10 megapixels (and if all posts had the custom field Camera_Specs_Pixels that specified the value of the number of megapixels), we could do so with the following:


You may want to do this on a custom page template. If so, just add the following to the top of the file and name it appropriately (e.g. camera-specs-pixels.php):

<?php /*Template Name: Camera Specs Pixels */?>

To make your new page template show up, create a new page, and then in the drop-down on the right, choose the page template you’ve just created. Publish the post, and you’re done!

Using Custom Fields To Create A Unique Design Link

WordPress 2.7 introduced the post_class function. This allows you to apply specific CSS classes to posts (thus giving them unique designs). Guess what? You can use custom fields to apply particular classes!

This one is a bit more involved. First, open your functions.php file and add the following code:

function shiftnews_post_class($classes) {
   global $post;
   $sn_post_class_array = array (
      get_post_meta($post->ID, 'post-class', true)
   $classes[] = implode(" ", $sn_post_class_array);
   return $classes;

You’ll then need to edit your single.php file, adding <?php post_class(shiftnews_post_class()); ?> to a DIV that wraps your content. Using the custom field post-class, you can then type in CSS classes (e.g. flower-bg or blue-content, which would apply the classes .flower-bg or .blue-content), thus adding them to the post.

The possibilities here are inspiring, and this is quite possibly the best way to create a unique post design for WordPress.

Set a different background for each post with custom fields Link


You could take this even further by allowing users to choose a background image through custom fields. Of course, you could just resize the image to 1920×1200, upload it and copy the URL into a custom field, ‘background’ and then put the following code in your header:

<?php if (is_page() || is_single()) {

<?php $background = get_post_meta($post->ID, 'background', true);
if ($background) {
<style type="text/css">body{ url(<?php echo $background; ?>) no-repeat fixed; }</style>

<?php }

But that would be a pain to do every single time you just wanted to change the background image. There is an easy way to do it: upload an image, copy the URL into a custom field and then use a script to resize the image and set it as the background.

First thing to do is to upload an image. We’re going to be resizing it to 1920px (although depending on your audience you may want to use a higher/lower resolution) so anything that’s 1200px wide or above should look fine.

Copy the relative URL of the image (ie /wp-content/… , not into a custom field called ‘background’ and click ‘add custom field’. Next, we need something to resize the images with. We’ll be using timthumb4. Upload it to /yourtheme/timthumb/ and we’re ready to go!

Open up your header once again and add (below your theme’s stylesheet) the following:

<?php if (is_page() || is_single()) {

<?php $background = get_post_meta($post->ID, 'background', true);
if ($background) {
<style type="text/css">background: url(<?php bloginfo('template_url'); ?>/timthumb/timthumb.php?w=1920&zc=1&src=<?php echo $background; ?>) fixed no-repeat;</style>

<?php }

What that does is takes the image from the custom field and then runs it through timthumb so it gets resized to fill the entire screen, even on large monitors (the image then gets cached, so it is only generated once). The resized image is then displayed as the background of the post.

If you’re having problems, make sure you’ve got the relative URL and not the absolute URL of the image, it is hosted on your server (you’re not hotlinking!) and that you have the file permissions set correctly (as shown in the timthumb wiki). This is one of my favourite things to do with custom fields as not only is it easy to do, but it’s also very effective in differentiating different blog posts; this technique is used to great effect on

Search Engine Optimization With Custom Fields Link

The “All in One SEO Pack” is consistently one of the most popular plug-ins for WordPress. It allows you to do things like specify your own title tag or meta description. It is powered by custom fields, meaning you can recreate it in your theme.

Start by adding the following code to your theme’s title tag:

<?php if ( is_single() || is_page() ) { ?><?php $title = get_post_meta($post->ID, 'Title', true);  if ($title) { ?>
<?php echo $title; ?> | <?php bloginfo('name'); ?>
<?php } else { ?>
<?php wp_title(''); ?> | <?php bloginfo('name'); ?>
<?php } ?>
<?php } ?>

Now, when a page or post is displayed, WordPress will look for the custom field Title. If it exists, its contents will be displayed; if it doesn’t, then the post’s title will be displayed. To use this new-found power, create the custom field Title and make its value what you want to be displayed in the title tag (note that | [Blog name] will be added).

You can apply the same idea to other elements, such as the description tag:

<?php if (is_single() || is_page() ) : if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<meta name="description" content="<?php $description = get_post_meta($post->ID, 'Description', true);  if ($description) { ?><?php echo get_post_meta($post->ID, "Description", true); ?>
<?php } else { ?><?php the_excerpt_rss(); ?><?php } ?>" />
<?php endwhile; endif; elseif(is_home()) : ?>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php endif; ?>

The code above should replace the entire description tag and allow you to use the custom field Description to display the contents of the description tag. If the custom field does not exist, then the excerpt is used on posts and pages, and the blog’s description (which you set when you installed WordPress) is used on the home page.

Read more on the topic in the article WordPress SEO: The Definitive Guide To Higher Rankings For Your Blog5.

Custom This, Custom That! Link

Custom fields are very powerful, and the only limit is your imagination! As we’ve seen in this post, you can do some really awesome things with WordPress’ custom fields. They can improve both your blog and its ranking in search engines. Enjoy!

If you’d like to do some further reading:

The possibilities for this are inspiring, and this is quite possibly the best way to create a unique post design for WordPress.

Of course, the other option is to use custom fields to include a style sheet that is specific to the post or even just to use inline styling.

You can add a style sheet to a post with a custom field value quite easily. First, add the following code to the header.php file, after your theme’s style sheet loads:

<?php if (is_page() || is_single()) {

<?php $stylesheet = get_post_meta($post->ID, 'Stylesheet', true);
if ($stylesheet) {
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?><?php echo $stylesheet; ?>.css" type="text/css" media="screen,projection,tv" /></h2>

<?php }

This tells WordPress to look for the custom field Stylesheet on posts and pages. All you’ve got to do is enter the name of the style sheet (so if it’s blue.css, just enter the value blue) and upload it to your theme’s directory.

A whole new style sheet might be overkill in some cases, though. If you’re changing just one or two styles, then inline styling might be the way to go. This is just as easy: paste the following code into your header.php file, again after your theme’s style sheet loads:

<?php if (is_page() || is_single()) {

<?php $styles = get_post_meta($post->ID, 'Styles', true);
if ($styles) {
<style type="text/css"><?php echo $styles; ?></style>

<?php }

This piece of code looks for the custom field Styles; put in it any styling you want to apply only to that post. For example:


There’s something for everyone here, so you can start to quickly create unique post designs however you prefer! You might want to look at Smashing Magazine’s previous post about custom fields10 as well.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10

↑ Back to top Tweet itShare on Facebook


Alex Denning is a WordPress developer from London, England. He sells WordPress themes and writes about WordPress .

  1. 1

    Custom fields is often not used to its full potential in WordPress – glad you guys have covered it here :)

    I’d love to know more about creating and using custom fields in the user/author profiles too please (with examples).

  2. 2

    Wow, didn’t realise wordpress got so complex for something so simple.

    If you are planning anything outside of a pure blog, I would go with Drupal ;).

    Most themes in Drupal output a range of body classes for advanced stylesheets.

  3. 3

    Hunter Satterwhite

    April 29, 2010 12:09 pm

    Great post by Smashing Magazine. I really like the practical application here and not the typical things I see where people try to create extensive functionality out of this by mimicking content types.

    When it’s time to get down and dirty I use PodsCMS for WordPress:

  4. 4

    For a first post, it is really helpfull that somebody added all these custom Field tips in one place!

  5. 5

    What a coincidence! I’ve been working on a WP based project where my client wants to set a different background for each post. I did some research about it and found nothing as helpful as the method you explained here under “Set a different background for each post with custom fields”.

    Thanks a lot! Really appreciate your work.

  6. 6

    Jean-Baptiste Jung

    April 29, 2010 6:34 am

    Amazing post Alex, congrats!

  7. 7

    Custom fields make WordPress seem a lot like MODx. That’s a good thing as long as the product keeps its focus.

  8. 8

    Custom field is one of the most powerful ability of WordPress. I think, to use custom field in a better way, we should create and use custom meta box. I’ve written an article to guide to create a better meta box for WP, hope it’s useful for everybody.

  9. 9


    April 29, 2010 6:38 am

    Amazing Post!!! WordPress Rulez

    • 10

      Thank you for your great plug-in.I have a problem.I use some same named field keys on snlige post.ex.)key=lib value=LibAkey=lib value=LibBkey=lib value=LibCkey=date value=11/20/2007key=publisher value=PubXThen, activated this plug-in using following conf.ini[lib]type = textfield, size = 20[date]type = textfield, size = 20[publisher]type = textfield, size = 20When editing above post, this plug-in’s GUI showed just one lib key and LibA value.After updated the post, lib – LibB and lib – LibC was gone. Could I use same named keys? Is it a matter of conf.ini description?

  10. 11

    Michael Chacon

    April 29, 2010 6:48 am

    I’ve been looking for a little more info on custom fields, thanks.

  11. 12

    Thomas McGee

    April 29, 2010 6:52 am

    That’s some useful info and several of which I’ve actually had some need of in the past. Definitely and article to keep on hand. Thanks!

  12. 13

    Really awesome post Alex,
    Thanks for sharing this useful information.

    • 14

      Hi there,I made a very small modification (added 2 lines of code) to get this pluign to look much nicier in wordpress 2.5It nows looks exactly like the other boxes in the post page, wich you can expand or hide Its beautiful.Please let me know if you want it. By the way, its a good ideia to publish this pluign in the directorycheers and thanksLeo,,

  13. 15

    WordPress 3.0, which will be out soon, brings more custom stuff. For example, custom post types:

  14. 16

    Greg Rickaby

    April 29, 2010 7:06 am

    Excellent stuff, I find folks don’t use custom fields enough!

  15. 17

    I’m kinda new developing WordPress Themes, the only ones I’ve created is the Theme on my Blog Paintbits and a new project I’m creating where I’m also designing from scratch a functional WordPress theme.

    From what “I got so far” you need to manually add a value each time you write a new post/article, for that sense I think there are better solutions compared to using Custom Fields. I can give you an example, you referred the use of Custom Fields to create Post Types, well with Taxonomies in WordPress you can do the same but being able to achieve a better interface for it since you can use a Admin Panel like Post Tags for your Post Types.

    But yes, there are lots of things you can do with Custom Types, again maybe it’s because I’m still fairly new developing themes, but I haven’t found the need for it outside of what WordPress can do already by other means. :)

    Great post by the way!

  16. 18

    Nikola Lazarevic

    April 29, 2010 7:26 am

    This is excellent post, thanks for superb tips and tricks!

  17. 19

    Customs fields are valuable and perfect for many purposes. However, unless i have not got into these enough – wouldn’t it be great if you could force these to be always visible – i.e. define “title_color” to always be a field that needs to be filled in and is always rpesent on the entry page, not having to be manually added each time. Wouldn’t it be great if custom fields had the ability to be more than text fields – a colour picker for example in the above. etc…
    Or am i really missing how much further this has progressed since my last checks?

  18. 20

    Wow, amazing information. I can’t wait to put the idea for custom post backgrounds in place. You should have called that tip “How to make a blog post look like Zune’s Now Playing view” :)

  19. 21

    thanks Alex For sharing useful information like this..its really inspired me..

  20. 22

    Nice post ! I use custom fields for most of my projects :)


↑ Back to top