Custom Fields Hacks For WordPress

Sashing Magacine

 

 

Enviado por luishernando a través de Google Reader:

 

 

Custom Fields Hacks For WordPress

vía Smashing Magazine de Jean-Baptiste Jung el 16/05/09

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

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 <title> Tag

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:

<title>  <?php if (is_home () ) {     bloginfo('name'); } 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 {         single_post_title();     } } elseif (is_page() ) {     bloginfo('name'); echo ': '; single_post_title(); } else {     wp_title('',true); } ?> </title>

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.

Source:

• How to: Redefine the title tag with a custom field

8. Disable Search Engine Indexing For Individual Posts

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.

Source:

• How to: disable search engine indexing of a single post

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

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

Sources:

• Useful custom functions for WordPress
• How to: Easily get the value of a custom field

10. Insert A "Digg This" Button Only When You Need It

The problem. To get traffic from well-known Digg.com, 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 'http://digg.com/tools/diggthis.js" 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

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 WpRecipes and Cats Who Code.

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

• Add Thumbnails to Wordpress with Custom Fields
  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 Fields
  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 Shortcodes
  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!

About the Author

This guest post was written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium. He blogs about WordPress at WpRecipes, about Photoshop at PsdRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter.

(al)

---

© Jean-Baptiste Jung for Smashing Magazine, 2009. | Permalink | 86 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: coding, custom fields, hacks, wordpress, wp

 

 

Cosas que puedes hacer desde aquí:

• Subscribirse a Smashing Magazine con Google Reader
• Empieza a utilizar Google Reader para mantenerte al día fácilmente de todos tus sitios favoritos.