Custom Fields are one of the most powerful features in WordPress. Most newbies are either afraid of these mysterious input areas or simply don't even know they exist. In this post, my goal is to enlighten you on what exactly the Custom Fields are and provide some examples of what they can be used for. Let's get started, shall we?
Above I've embedded a screenshot of what the Custom Fields area looks like in WordPress 2.7. It may look a bit confusing at first, but it is incredibly simple to use.
To help me explain what it does, let me start off with an example. Do you notice the images I use above all of my posts here on ForTheLose.org? Well guess what? I use Custom Fields to display them. This is how I do it.
Under the "Name" section of the Custom Fields area, I enter the word "image." The only reason I use "image" is because that's what I decided to use when I was creating this theme. You see, in my theme files, I have WordPress checking for the variable called "image," so, that's what I use. You can of course use anything that you want, as long as it matches up with what your theme files are looking for.
(Now, odds are your theme files are NOT compatible with Custom Fields, and thus, they aren't "searching" for any Custom Field variable. I'll tell you later in this tutorial how to add Custom Field functionality to your themes.)
Anyway, back to the example. Like I said, under "Name" I have the word "image." Now, I can to assign that name a value. Since, in my example, I'm looking to have an image be displayed with my Custom Field, I'll put the url to the image. When all is said and done, this is what I'll end up with after I click "Add Custom Field" (which saves what I've just done and adds it to the post).
So, What Did We Just Do?
Simply put, we took the url of an image (in this case, lol.png) and wrapped it up inside a variable that we named "image." In our next step, we'll be telling our theme to retrieve the value of the Custom Field name of "image" and to echo it out using php. Don't worry, it's not hard at all.
Firstly what you'll want to do is open up the theme file you want to add this functionality to. In my case here, I'll be opening up the files of index.php, single.php, and any other file that has The Loop working inside of it. (Remember, I'm adding an image to the top of all of my posts so I'm looking to add this code to all of the places that posts are dealt with. You may or may not need to do this, depending on your needs.)
Once we have the file open, add the following line where you want this action to occur:
<a href="<?php the_permalink() ?>"><img src="<?php echo get_post_meta($post->ID, image, true); ?>" alt="Image" /></a>
And that's basically the gist of it. The code above creates a linked image. The image src is told to be the value of the Custom Fields variable "image." The get_post_meta part is simply a WordPress function that grabs the value of whatever Custom Field name you enter in it's parameters, and is echo'd out with the php function echo.
Let's Get Fancy
The code above will work perfectly fine as-is, but what if some posts don't have a value for "image?" What you'll end up having is broken HTML in those posts. Nobody wants that, right?
To remedy this, what we'll do is first check to see if the variable "image" has a value assigned to it. If it does, we'll continue like normal. If it doesn't, we'll simply skip over this part of the code or maybe use a default image or something. It's up to you. Here's the code to accomplish this:
<?php $thereisimage = get_post_meta($post->ID, image, true); if($thereisimage){ ?> <a href="<?php the_permalink() ?>"><img src="<?php echo get_post_meta($post->ID, image, true); ?>" alt="Image" /></a> <?php }else{ ?> <a href="<?php the_permalink() ?>"><img src="images/default.png" alt="Default Image" /></a> <?php } ?>
The code above creates a temporary variable called "thereisimage." (Again, it doesn't matter what you call this. Name it "poop" for all I care.) This variable is used to check if there is a value for the Custom Fields "image" or not. If there is, carry on like normal. If there isn't, activate the }else{ part of the code and print out a default linked image instead. Think of it as a safety net.
Other Functions for Custom Fields
Custom Fields, like I stated before, are extremely powerful. They're exactly what they say they are, Custom Fields. You essentially define what they are and what they do.
Even though displaying post images seems to be the most common use of these fields, there are many other uses that pop into mind. The first one I thought of was using them for displaying your mood. Simply have a name called "mood" (or whatever) and the value being your actual mood (happy, sad, crappy, etc...). Then in your theme files, you'll simply have something like:
My mood: <?php echo get_post_meta($post->ID, mood, true); ?>.
That's only one small example. Think of all of the other endless possibilities:
- tell your readers what the weather is like
- style the post differently by ID-ing the divs using the Custom Field values
- provide external links to articles
- tell your readers your favorite color (er..)
- etc...etc...
The list just goes on, and on, and on.
Get creative! If you have any questions, ask away in the comments. I hope some of you learned something today.
If you liked this article, I'd really, really appreciate some friendly social bookmarking!
If you liked this post, stay updated. Follow me on Twitter or subscribe to our RSS Feed via email.
Post Tags: How-To, Web Design, wordpress
I love the way you make things simple. Thanks
WPDONE´s last blog post: Interview With Pavel Ciorici - Successful, Writing in a Foreign Language.