Custom Fields Hacks For WordPress

• 13 min read
• WordPress, Hacks, Custom Fields, Techniques (WP)
• Share on Twitter, LinkedIn

About The Author

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 … More about Jean-Baptiste ↬

Email Newsletter

Your (smashing) email

Weekly tips on front-end & UX.
Trusted by 200,000+ folks.

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

Image source: Richard Vantielcke

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:

<?php
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...
             the_title();
             the_excerpt();
         }
     endwhile;
endif;
?>

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.

Source:

• How to: Set a post’s expiration date and time on your WordPress blog

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

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
              the_title();
              the_content();
         } else {
              // No custom field set, let's display an excerpt
              the_title();
              the_excerpt();
    endwhile;
endif;
?>

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.

Source:

• How to: Manually define whether to show full posts or excerpts on your home page

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

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.

Source:

• How to: Display your current mood on your posts

4. Add Meta Descriptions To Your Posts

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.

Sources:

• Unique meta description and meta keyword tags in your WordPress themes
• How to: Create a meta description function for your WordPress blog

5. Link To External Resources

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.

Sources:

• Hacking WordPress theme: external URL for post title
• How to: Link to an external resource in the post’s title

6. Embed Custom CSS Styles

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; ?>
        <style>
    <?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.

Source:

• How to: Embed CSS in your posts with a custom field

7. Re-Define The