Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Custom Fields Hacks For WordPress

In our previous articles on WordPress hacks, we discussed the incredible flexibility of WordPress, which is one of the biggest reasons for its popularity among bloggers worldwide. Custom fields in particular, which let users create variables and add custom values to them, are one of the reasons for WordPress’ flexibility.

In this article, we’ve compiled a list of 10 useful things that you can do with custom fields in WordPress. Among them are setting expiration time for posts, defining how blog posts are displayed on the front page, displaying your mood or music, embedding custom CSS styles, disabling search engine indexing for individual posts, inserting a “Digg this” button only when you need it and, of course, displaying thumbnails next to your posts

1. Set An Expiration Time For Posts Link

Image source: Richard Vantielcke1

The problem. Sometimes (for example, if you’re running a contest), you want to be able to publish a post and then automatically stop displaying it after a certain date. This may seem quite hard to do but in fact is not, using the power of custom fields.

The solution. Edit your theme and replace your current WordPress loop with this “hacked” loop:

if (have_posts()) :
     while (have_posts()) : the_post(); ?>
         $expirationtime = get_post_custom_values('expiration');
         if (is_array($expirationtime)) {
             $expirestring = implode($expirationtime);

         $secondsbetween = strtotime($expirestring)-time();
         if ( $secondsbetween > 0 ) {
             // For example...

To create a post set to expire at a certain date and time, just create a custom field. Specify expiration as a key and your date and time as a value (with the format mm/dd/yyyy 00:00:00). The post will not show up after the time on that stamp.

Code explanation. This code is simply a custom WordPress loop that automatically looks to see if a custom field called expiration is present. If one is, its value is compared to the current date and time.

If the current date and time is equal to or earlier than the value of the custom expiration field, then the post is not displayed.

Note that this code does not remove or unpublish your post, but just prevents it from being displayed in the loop.


2. Define How Blog Posts Are Displayed On The Home Page Link


The problem. I’ve always wondered why 95% of bloggers displays all of their posts the same way on their home page. Sure, WordPress has no built-in option to let you define how a post is displayed. But wait: with custom fields, we can do it easily.

The solution. The following hack lets you define how a post is displayed on your home page. Two values are possible:

  • Full post
  • Post excerpt only

Once more, we’ll use a custom WordPress loop. Find the loop in your index.php file and replace it with the following code:

<?php if (have_posts()) :
    while (have_posts()) : the_post();
         $customField = get_post_custom_values("full");
         if (isset($customField[0])) {
              //Custom field is set, display a full post
         } else {
              // No custom field set, let's display an excerpt

In this code, excerpts are displayed by default. To show full posts on your home page, simply edit the post and create a custom field called full and give it any value.

Code explanation. This code is rather simple. The first thing it does is look for a custom field called full. If this custom field is set, full posts are displayed. Otherwise, only excerpts are shown.


3. Display Your Mood Or The Music You’re Listening To Link


The problem. About five or six years ago, I was blogging on a platform called LiveJournal. Of course it wasn’t great as WordPress, but it had nice features that WordPress doesn’t have. For example, it allowed users to display their current mood and the music they were listening to while blogging.

Even though I wouldn’t use this feature on my blog, I figure many bloggers would be interested in knowing how to do this in WordPress.

The solution. Open your single.php file (or modify your index.php file), and paste the following code anywhere within the loop:

$customField = get_post_custom_values("mood");
if (isset($customField[0])) {
    echo "Mood: ".$customField[0];

Save the file. Now, when you write a new post, just create a custom field called mood, and type in your current mood as the value.

Code explanation. This is a very basic use of custom fields, not all that different from the well-known hack for displaying thumbnails beside your posts’ excerpts on the home page. It looks for a custom field called mood. If the field is found, its value is displayed.


4. Add Meta Descriptions To Your Posts Link


The problem. WordPress, surprisingly, does not use meta description tags by default.

Sure, for SEO, meta tags are not as important as they used to be. Yet still, they can enhance your blog’s search engine ranking nevertheless.

How about using custom fields to create meta description tags for individual posts?

The solution. Open your header.php file. Paste the following code anywhere within the <head> and </head> tags:

<meta name="description" content="
<?php if ( (is_home()) || (is_front_page()) ) {
    echo ('Your main description goes here');
} elseif(is_category()) {
    echo category_description();
} elseif(is_tag()) {
    echo '-tag archive page for this blog' . single_tag_title();
} elseif(is_month()) {
    echo 'archive page for this blog' . the_time('F, Y');
} else {
    echo get_post_meta($post->ID, "Metadescription", true);

Code explanation. To generate meta descriptions, this hack makes extensive use of WordPress conditional tags to determine which page the user is on.

For category pages, tag pages, archives and the home page, a static meta description is used. Edit lines 3, 7 and 9 to define your own. For posts, the code looks for a custom field called Metadescription and use its value for the meta description.



The problem. Many bloggers have asked me the following question: “How can I link directly to an external source, rather than creating a post just to tell visitors to visit another website?”

The solution to this problem is to use custom fields. Let’s see how we can do that.

The solution. The first thing to do is open your functions.php file and paste in the following code:

function print_post_title() {
  global $post;
  $thePostID = $post->ID;
  $post_id = get_post($thePostID);
  $title = $post_id->post_title;
  $perm  = get_permalink($post_id);
  $post_keys = array(); $post_val  = array();
  $post_keys = get_post_custom_keys($thePostID);

  if (!empty($post_keys)) {
      foreach ($post_keys as $pkey) {
          if ($pkey=='url1' || $pkey=='title_url' || $pkey=='url_title') {
              $post_val = get_post_custom_values($pkey);
      if (empty($post_val)) {
          $link = $perm;
      } else {
          $link = $post_val[0];
  } else {
      $link = $perm;
  echo '<h2><a href="'.$link.'" rel="bookmark" title="'.$title.'">'.$title.'</a></h2>';

Once that’s done, open your index.php file and replace the standard code for printing titles…

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

… with a call to our newly created print_post_title() function:

<?php print_post_title() ?>

Now, whenever you feel like pointing one of your posts’ titles somewhere other than your own blog, just scroll down in your post editor and create or select a custom key called url1 or title_url or url_title and put the external URL in the value box.

Code explanation. This is a nice custom replacement function for the the_title() WordPress function.

Basically, this function does the same thing as the good old the_title() function, but also looks for a custom field. If a custom field called url1 or title_url or url_title is found, then the title link will lead to the external website rather than the blog post. If the custom field isn’t found, the function simply displays a link to the post itself.


6. Embed Custom CSS Styles Link


The problem. Certain posts sometimes require additional CSS styling. Sure, you can switch WordPress’ editor to HTML mode and add inline styling to your post’s content. But even when inline styling is useful, it isn’t always the cleanest solution.

With custom fields, we can easily create new CSS classes for individual posts and make WordPress automatically add them to the blog’s header.

The solution. First, open your header.php file and insert the following code between the <head> and </head> HTML tags:

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

Now, when you write a post or page that requires custom CSS styling, just create a custom field called css and paste in your custom CSS styling as the value. As simple as that!

Code explanation. First, the code above makes sure we’re on an actual post’s page by using WordPress’ conditional tag is_single(). Then, it looks for a custom field called css. If one is found, its value is displayed between <style> and </style> tags.


7. Re-Define The <title> Tag Link


The problem. On blogs, as on every other type of website, content is king. And SEO is very important for achieving your goals with traffic. By default, most WordPress themes don’t have an optimized <title> tag.

Some plug-ins, such as the well-known “All in One SEO Pack,” override this, but you can also do it with a custom field.

The solution. Open your header.php file for editing. Find the <title> tag and replace it with the following code:


<?php if (is_home () ) {
} elseif ( is_category() ) {
    single_cat_title(); echo ' - ' ; bloginfo('name');
} elseif (is_single() ) {
    $customField = get_post_custom_values("title");
    if (isset($customField[0])) {
        echo $customField[0];
    } else {
} elseif (is_page() ) {
    bloginfo('name'); echo ': '; single_post_title();
} else {
} ?>

Then, if you want to define a custom title tag, simply create a custom field called title, and enter your custom title as a value.

Code explanation. With this code, I have used lots of template tags to generate a custom <title> tag for each kind of post: home page, page, category page and individual posts.

If the active post is an individual post, the code looks for a custom field called title. If one is found, its value is displayed as the title. Otherwise, the code uses the standard single_post_title() function to generate the post’s title.


8. Disable Search Engine Indexing For Individual Posts Link


The problem. Have you ever wanted to create semi-private posts, accessible to your regular readers but not to search engines? If so, one easy solution is to… you guessed it! Use a custom field.

The solution. First, get the ID of the post that you’d not like to be indexed by search engines. We’ll use a post ID of 17 for this example.

Open your header.php file and paste the following code between the <head> and </head> tags:

<?php $cf = get_post_meta($post->ID, 'noindex', true);
    if (!empty($cf)) {
    echo '<meta name="robots" content="noindex"/>';

That’s all. Pretty useful if you want certain info to be inaccessible to search engines!

Code explanation. In this example, we used the get_post_meta() function to retrieve the value of a custom field called noindex. If the custom field is set, then a <meta name=”robots” content=”noindex”/> tag is added.


9. Get Or Print Any Custom Field Value Easily With A Custom Function Link


The problem. Now that we’ve shown you lot of great things you can do with custom fields, how about an automated function for easily getting custom fields values?

Getting custom field values isn’t hard for developers or those familiar with PHP, but can be such a pain for non-developers. With this hack, getting any custom field value has never been easier.

The solution. Here’s the function. Paste it into your theme’s functions.php file. If your theme doesn’t have this file, create it.

function get_custom_field_value($szKey, $bPrint = false) {
  global $post;
  $szValue = get_post_meta($post->ID, $szKey, true);
  if ( $bPrint == false ) return $szValue; else echo $szValue;

Now, to call the function and get your custom field value, use the following code:

<?php if ( function_exists('get_custom_field_value') ){
        get_custom_field_value('featured_image', true);
} ?>

Code explanation. First, we use the PHP function_exists() function to make sure the get_custom_field_value function is defined in our theme. If it is, we use it. The first argument is the custom field name (here, featured_image), and the second lets you echo the value (true) or call it for further PHP use (false).


10. Insert A “Digg This” Button Only When You Need It Link


The problem. To get traffic from well-known, a good idea is to integrate its “Digg this” button into your posts so that readers can contribute to the posts’ success.

But do all of your posts need this button? Definitely not. For example, if you write an announcement telling readers about improvements to your website, submitting the post to Digg serves absolutely no value.

The solution. Custom fields to the rescue once again. Just follow these steps to get started:

  1. Open your single.php file and paste these lines where you want your “Digg this” button to be displayed:
    <?php $cf = get_post_meta($post->ID, 'digg', true);
      if (!emptyempty($cf)) {
      echo '" type="text/javascript">'} ?>
  2. Once you’ve saved the single.php file, you can create a custom field called digg and give it any value. If set, a Digg button will appear in the post.

Code explanation. This code is very simple. Upon finding a custom field called digg, the code displays the “Digg this” button. The JavaScript used to display the “Digg this” button is provided by Digg itself.

Bonus: Display Thumbnails Next To Your Posts Link


The problem Most people knows this trick and have implemented it successfully on their WordPress-powered blogs. But I figure some people still may not know how to display nice thumbnails right next to the posts on their home page.

To view examples of this well-known trick, visit my blogs WpRecipes13 and Cats Who Code14.

The solution.

  1. Start by creating a default image in Photoshop or Gimp. The size in my example is 200×200 pixels but is of course up to you. Name the image default.gif.
  2. Upload your default.gif image to the image directory in your theme.
  3. Open the index.php file and paste in the following code where you’d like the thumbnails to be displayed:
    <?php $postimageurl = get_post_meta($post->ID, 'post-img', true);
    if ($postimageurl) {
          <a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php echo $postimageurl; ?>" alt="Post Pic" width="200" height="200" /></a>
    <?php } else { ?>
          <a href="<?php the_permalink(); ?>" rel="bookmark"><img src="<?php bloginfo('template_url'); ?>/images/wprecipes.gif" alt="Screenshot" width="200" height="200" /></a>
    <?php } ?>
  4. Save the file.
  5. In each of your posts, create a custom field called post-img. Set its value as the URL of the image you’d like to display as a thumbnail.

Code explanation The code looks for a custom field called post-img. If found, its value is used to display a custom thumbnail.

In case a post-img custom field is not found, the default image is used, so you’ll never have any posts without thumbnails.

More Custom Field Resources Link

  • Add Thumbnails to WordPress with Custom Fields15
    A very detailed article about adding thumbnails to your posts with custom fields. A great follow-up to the last hack we showed!
  • How to Use WordPress Custom Fields16
    Want to know more about custom fields? Then this article is definitely for you.
  • Creating Custom Write Panels in WordPress
    A very detailed tutorial on creating custom write panels in WordPress using custom fields.
  • Custom Shortcodes17
    A cool WordPress plug-in for managing custom fields using the insert shortcodes.
  • More Fields
    The More Fields plug-in allows you to create more user-friendly custom fields. Definitely interesting for when you create WordPress-powered websites for clients!


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


This guest post was written by Jean-Baptiste Jung, a 28-year-old blogger from Belgium, who blogs about Web Development on Cats Who Code, about WordPress at WpRecipes and about blogging on Cats Who Blog . You can stay in touch with Jean by following him on Twitter.

  1. 1

    Liam McCabe

    May 13, 2009 1:33 am

    Wow some useful stuff :)

  2. 2

    Quakeulf >:3

    May 13, 2009 1:38 am

    Doesn’t the newest version of WP do some of this by default already? I think 2.7.* and above have added some extra functionality regarding post display, but I could be wrong. :3

    Nice cat btw, cute little :3 mouth it has. :3

  3. 3

    Good list. Some of them can be very useful. Keep up the good work.

  4. 4

    I use custom fields on my site for multiple purposes:
    – linking to different sources
    – meta descriptions
    – geo-locations (area / street / places, which i can use for Google Maps)
    – embed videos from different sources and display them always on the same place on a post page.

  5. 6


    May 13, 2009 1:46 am

    Still learning PHP. I like WordPress Platform to do PHP programming. Lots of plugin some more.

  6. 7

    Well it will be nice to notice that you used one of my photograph to illustrate this article without my consent.

    (SM) Sorry for inconvenience, Riri. We added the link now. And we’ll explicitly point our writers to the image credit issues. Thank you.

  7. 8

    I like wordpress, but i am also a good developer. Any application, program, script etc that needs so much hack is NOT an extensible program. WordPress has too much down sides. Definatly the best blogging tool, but WP is putting its users on a one-way track. Too few built-in extensible options. I hope WP devs will include more customizable options in 3.x versions.

  8. 9

    wawooo… this is something what i have been looking for :) thanks a lot

  9. 10

    Richard S Davies

    May 13, 2009 3:08 am

    Can’t a lot of these be done with the default WP functionality, or some plugins, like All in One SEO.

    • 11

      I mean like this: $out = . . $title . . .attribute_escape($value). . . // switchEditors.go( $name’); ;

  10. 12

    Wow perfect timing! I was just looking for a good tutorial on integrating the thumbnails next to my post deal. Thanks a bunch.

  11. 13

    Vanilla Man

    May 13, 2009 3:33 am

    This is definitely great collection of custom fields tricks! Thanks a lot!

  12. 14


    May 13, 2009 3:50 am

    Great post, I always have problems with my Digg button though? I can only get it to display top left, which then throws out the image if there is one?

    Does anyone know a way round this please? .


  13. 15

    Great post !

    Very useful ideas.


  14. 16

    Great Article, Nice tricks, I like the custom CSS one most.
    Thanks, I enjoyed this article and i like your blog

  15. 17

    Tom Bradshaw

    May 13, 2009 4:08 am

    Really useful post, thanks alot!

  16. 18

    I use this nice little plugin to expire posts on several of my WP sites:

  17. 19

    Chris Wallace

    May 13, 2009 4:58 am

    #10 should be used more often. Nobody wants to digg a post about your cat peeing on you while you are sleeping.

  18. 20

    A little confused by #2 – I thought this functionality was already included in WP by using the -More- tag? Same for the bonus hack… I can upload an image and display it already in WP. Though I suppose the hack may cut down on some time.

  19. 21

    Ferran Riera

    May 13, 2009 5:06 am

    I think that flutter is another good option to use custom fields

  20. 22

    2nd and 4th points are useful..thanks


↑ Back to top