Add Extra Boxes to Your Write/Edit Page: WordPress Custom Fields Plugin


Have you ever wished you weren’t limited to just the meta boxes you find on your editing screen: categories, tags, the excerpt, etc.? Sure, some plugins add extra boxes for you, but what if you could add your own – whatever you liked?

With the More Fields plugin, you can. Set up text boxes, drop down menus, radio buttons, and much more. Then display your content from those custom fields in your theme wherever you like.


Why Do I Need My Own Custom Fields?

If you are regularly dealing with the same types of information, and it would help for that information to be displayed on your page in a special way, then custom fields are the way to go.

For example, if you review a lot of restaurants, it would probably be helpful if you could make your review posts look more like a professional review site with a short, easy to read summary at the beginning that goes over the quality of the food, the quality of the service, the price, etc.

You basically set up a form on your editing screen, then you fill out your form, and the results get displayed in the proper place.

An Example

In order to run through the plugin, we’re going to pretend that we have blog where the user often reviews restaurants, and so we’re going to set up some custom fields that will be on the editing screen. We’ll then take the information entered into those custom fields and make it so that it appears at the top of each review like this:

Food: Excellent
Service: Good
Atmosphere: Laid-back

 

Step 1: Add a Main Input Box

The first thing we need to do is add a main input box that will contain each of our three fields (Food, Service, Atmosphere). You can add as many different boxes or fields as you like. In this case, we’ll just go with the one box and three fields.

Add a new input box via the first screen of the settings page. Here you can choose where the box will appear on the edit screen – under the main editor box (on the left) or over on the right-hand side where your category and tag boxes are.

You can also control which user roles will see this new field.

 

 

Step 2: Set Up Fields

After the basic input box is created, you will need to edit it in order to add your actual fields.

On the set-up screen, you’ll put in your info and then choose the type of field you would like, for example, a text box, a WYSIWYG editor, a check box, a file list, etc.

In this case, because this is just meant to be a short glance at the overall review, we’re going to choose a “select” field type. This will allow us to set up some predetermined words to “select” from a drop down box (e.g. Excellent, Good, Just OK, Not Great, Bad).

Once we do that and save it, that field is ready to go. So we can already see it when we go to write a new post. In the editing screen, over on the right-hand side, we now have a new box labeled “Food” that has a drop down menu with the selections we put in.

 

Step 3: Setting Up the Other Fields

We’ll set up the other fields in the same basic way. We’ll choose the drop down style (“select”) again for the Service category; however, for Atmosphere we’ll choose a text box, so we can enter a short descriptive phrase that may not be same all the time (funky, laid-back, beachy, etc.).

Once that’s complete, we can see our Restaurant Reviews box with our three fields in it on the right-hand side of the editor.

Step 4: Displaying the Contents of the Fields

OK, so the boxes of the fields are set up, but we still need to insert some code into our theme so that when we fill in the boxes, that content will show up in the post.

When you click into a field to edit it, near the top you will see a little piece of code that’s automatically generated for that field. It looks like this …

<?php meta('food'); ?>

 

All of your code for each field will be the same as above; however, the name (‘food’ in this case) will be changed depending the name of your field.

So we want to insert that code into our theme. We’re going to put all three fields at the top of the content in our single.php file. (It should be inside the loop.)

But because that code will only output the value we put in the box, we’ll need to also put some labels in the theme so people know what we’re talking about. We’ll make the labels bold and put each on it’s own line.

<strong>Food:</strong> <?php meta('food'); ?>
<br />
<strong>Service:</strong> <?php meta('service'); ?>
<br />
<strong>Atmosphere:</strong> <?php meta('atmosphere'); ?>

 

The Result

Here’s the result:

 

A Problem

And so everything above worked fine, but we still have one problem. If we don’t write a review every single post, then because we added some labels above, those labels are still going to show up with other posts.

The Solution

There are a few different solutions to this problem.

1. You could get another plugin called “More Types” by the same authors as this plugin and make a new type of post only for reviews. This may be somewhat complicated for some. But it can be a good option. We will go over the “More Types” plugin in another post.

2. You could get a plugin called “Custom Post Template.” That plugin was looked at in this post: WordPress Custom Post Template Plugin. This plugin lets you easily make templates for your posts, so you could make a “review” template and only use it on your review posts.

3. The third solution is to use conditional code. This means that if you fill in your Restaurant Review fields, it will show. But if you don’t fill them in, it won’t.

As an example, we’ll take one line of code from above (plus the <br /> to make the line break).

<strong>Food:</strong> <?php meta('food'); ?>
<br />

 

We’ll make that conditional in this way:

<?php $food= get_post_meta($post->ID, 'food', true);
if($food) : ?>
<?php echo '<strong>Food: </strong>'; ?>
<?php meta('food'); ?>
<br />
<?php endif; ?>

 

You can take this same code and just substitute in the name of your field wherever you see the word “food.”

<?php $food= get_post_meta($post->ID, 'food', true);
if($food) : ?>
<?php echo '<strong>Food: </strong>'; ?>
<?php meta('food'); ?>
<br />
<?php endif; ?>

 

Of course the capitalized version of “Food” above is just the label, so it doesn’t have to be the same name as your field. You can make it anything you like. But make sure you replace all the lower case versions of “food” with the name of your field.

And so you can just follow that same basic pattern for each of your fields. When I put all three of mine together, it looked like this:

 

<?php $food= get_post_meta($post->ID, 'food', true);
if($food) : ?>
<?php echo '<strong>Food: </strong>'; ?>
<?php meta('food'); ?>
<br />
<?php endif; ?>


<?php $service= get_post_meta($post->ID, 'service', true);
if($service) : ?>
<?php echo '<strong>Service: </strong>'; ?>
<?php meta('service'); ?>
<br />
<?php endif; ?>

 

<?php $atmosphere= get_post_meta($post->ID, 'atmosphere', true);
if($atmosphere) : ?>
<?php echo '<strong>Atmosphere: </strong>'; ?>
<?php meta('atmosphere'); ?>
<br />
<?php endif; ?>

That gives my restaurant posts the review information, but it leaves my regular posts looking regular.


And that’s it. It may be a little slow going at first, but if you have a site that could be served by some extra customization like this, then you’ll find the initial time spent well worth it. And keep in mind, of course, there are all sorts of meta boxes you can put in your site for all kinds of content.

 

Photo: Product Evaluation Form from BigStock