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.

Featured Plugin - WordPress Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

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.

 

 

Featured Plugin - WordPress Google Maps Plugin

Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more

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.

Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

 

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:

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more

 

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.

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

 

Photo: Product Evaluation Form from BigStock

Tags

Comments (18)

  1. Have a look at this plugin: its brand new and has a couple of new things to it like:

    - the option to create “repeating” custom fields
    - the option of tying custom fields to certain page templates thus making it easy to control where the custom fields content appears :-)
    - the option of only targeting certain post types

    http://wordpress.org/extend/plugins/custom-fields-creator/
    It is part of a suite of plugins, the other two are called “Custom Taxonomy Creator” ans “Custom Post Type Creator”

    P.S. Maybe you should also mention the two accompanying plugins that go with “More Fields” called “More Types” and “More Taxonomies”

  2. hi joe, i m recently thinking bout using this plugin, the problem is, what if i have more than like ten custom fields, what do i gonna do with the conditional code;
    or is there any way to show the whole box, like your example something like that instead of showing one by one…

    thx for this useful article btw!

    regards

    Memphis

  3. Hello Memphis — The conditional code should continue to work for you no matter how many fields you use.

    As for your other point, I’m not exactly sure what you mean by “show the whole box” instead of one by one.

    • i just notice your comment box banned the php code input.
      in your example the box name “restaurant reviews”, then im thinking bout just putting the code “php meta(‘restaurant reviws’)” to show them all instead of putting each field key like “php meta (‘food’)”,”php meta (‘service’)” something like that.

      what if i have 2 more main input boxes, got any easier way to do it?

      thx

  4. Hi
    Great post!
    But how do I add a Date type to the Custom field? I would like to eventually like to sort my post according to validity date. As in I would like to have the default post date and validity date for the information I am posting. Please do let me know, any help would be greatly appreciated.

  5. I need your help ASAP please…

    I have a different code put in on a template page. This template page is used for several pages.

    Ex: I have the code Monday:  

    BUT, every time someone posts in the MONDAY on the back-end (no matter what page it’s on), it posts on ALL of the pages using the hw.php template page.

    How can I get it to ONLY post on that page that it’s being posted on?

    Please help!! I really need it ASAP….

    Thank you so much.

  6. What a life saver this plugin is! so wonderful of you to share the “if” code.
    I just wanted to ask how to format color and font and create wider returns between fields on the page (i put my custom fields on my pages)

    • Hi – You would just need to control the color by either wrapping it in a certain color like HTML, or you could put a div around it and do it in your CSS file.

      For example, you’ll notice that I used the “strong” tag to bold the text. You can do something like that except for color.

      As for more space, you’ll notice that I used a line break tag (the “br” tag). You can do similar things to increase the space.

      Basically, you can mark the code up like text. Just just look up how to do something with text (either with html or css), and then try it on the code.

    • It seems what you’re wanting to do is to have it work through the plugin. The code above just displays what you’re doing via your plugin. … You might go to the plugin author and ask him. He may have a solution for you.

Participate