Advertisement
WordPress

Quick Tip: A 4 Minute Crash-Course in WordPress Custom Fields

by

Today's Basix video quick tip topic comes from a question on Twitter, concerning the use of custom fields in WordPress. Luckily, as you'll find, attaching unique data to postings is as simple as assigning a value in the "Edit Post" page, and then referencing that information with the get_post_meta() method.

Prefer to watch this video on Screenr.com?


Step 1: Create a New Post

In your local testing environment, create a new posting in the WordPress admin panel, and scroll to the bottom, until you see the "Custom Fields" widget.

Custom Fields

This section allows for a key, and a value. For example, if you aren't taking advantage of the new "Post Thumbnail" feature, available in WordPress 2.9, and need a way to attach a thumbnail to each posting, this is where you'd accomplish that task. You could assign a key of "thumb," and a value, which is equal to a path to the desired thumbnail. Go ahead and fill this section with some test data - anything you wish. I'll use "difficulty" as my key," and "hard" as the value.


Step 2: Edit Index.php

Now visit your theme, and within the WordPress loop in your index.php page, reference the get_post_meta() method.

<?php echo get_post_meta($post->ID, 'difficulty', true); ?><

This method accepts three parameters.

  • The id for the desired post. You can use $post->ID or "the_id()" to insert this value.
  • The key that you require. Remember, you can insert multiple custom fields. This is why we need to reference the key, in my case, "difficulty."
  • A boolean, which determines whether you want the information returned as a string, or an array. As I'm echoing out my value, I've chosen true (or string).

Step 3: What If...

If you view run the website, you'll see the correct value. If you went with a thumbnail path in your custom field, make sure that you echo out that string from within an IMG tag, accordingly. However, there's one problem here; it's possible that not EVERY single post will have this "difficulty" custom field attached, yet we're blatantly assuming that there will be. This is inefficient. Instead, why don't we first create an "if" statement, and determine whether our desired key exists first. Smarter right?

<?php if ( get_post_meta($post->ID, 'difficulty') ) :  ?>
   <small> <?php echo get_post_meta($post->ID, 'difficulty', true); ?></small>
<?php endif; ?>

Conclusion

Custom fields are a staple in every experienced WordPress designer's toolbox. Learn them, and use them! Thanks for reading or watching!

Related Posts
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Querying Posts and Users by Meta DataMetadata
    So far in this series you've learned how to access WordPress meta data, and work with the arrays in which they are returned. We don't just add custom fields to WordPress posts so we can display this information, but it also so we can sort by it. Now that you know how to retrieve and display meta data, it's time to learn how to customize the WordPress loop to return only posts with specific meta values.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Working With LoopsMetadata
    In the first two parts of this series, we covered what meta data is in WordPress and how to work with the arrays that are typically returned. Now that you've learned to do the detective work necessary to find the structure of an array, it's time to learn to use loops to automate the process of outputting an array. Once you learn this important skill you will never have to write repetitive HTML markup again.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Understanding and Using ArraysMetadata
    In the first part of this series, we covered what WordPress meta data is, how it can be retrieved, and the various data types (such as objects or arrays) in which it can be returned. Now it's time to learn about the different types of arrays. When you write an array manually you know what its structure is an what the name of each index is. But when you are building arrays by querying a database, you are going to need to do some detective work to determine the structure of the data returned and the names of the indexes.Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    Creative Coding
    How to Add Custom Fields to AttachmentsHow to add custom fields to attachments 400
    You should be familiar with custom fields in WordPress. We use them on a post or a page to add extra data. In WordPress attachments are also saved as posts, so custom fields are available for them too. Today we'll see how we can add some custom fields so that attachments can carry more information than just the default data.Read More…