Tutorial: Creating Meta Boxes and Fields • Piklist

Piklist makes it radically easy to add meta boxes and fields to your posts, pages or custom post types. In this tutorial, we will create a meta box that includes three fields: SELECT, TEXT and COLORPICKER for standard posts:

The first step is to create the proper folder structure in your theme. Create a piklist folder, and then a parts subfolder, and then add a meta-boxes subfolder.. You can see the supported Piklist folder structure here.
Each file we add to the the meta-boxes folder will create a meta box on the post edit screen. Each field we include in this file will be part of this meta-box. Fairly straight forward. Ok, let’s create our meta-box file!
Create a new file: let’s call it demo-metabox.php. At the top of the file, we will add a comment block that will control the configuration of the meta box. This comment block is very similar to what you would see in a standard WordPress plugin or theme. Here are the minimum variables required:
```
<?php
/*
Title: My Demo Meta Box
Post Type: post
*/
```
This comment block tells Piklist you want to name your meta box, “My Demo Meta Box”, and have it display on the edit screen for a “Post”. To have this meta box work with a custom post type, you could also add a custom post type slug here as well. The Piklist comment block for meta-boxes supports a lot more than just these two variables. You can view the full list in our docs.
Now we start adding our fields. It’s best practice to make the “field” name all lowercase letters and numbers with no spaces or special characters if possible (i.e. facebook-page-url). The field label can be anything you want.

Let’s create our first field, a TEXT BOX:

piklist('field', array(
  'type' => 'text'
  ,'scope' => 'post_meta'
  ,'field' => 'demo_text'
  ,'label' => 'Text box'
  ,'description' => 'Field Description'
  ,'value' => 'Default text'
  ,'attributes' => array(
    'class' => 'text'
  )
  ,'position' => 'wrap'
));

This simple array will create a TEXT BOX that automatically saves as Post Meta. A few important things to note:

type => text: This tells Piklist what type of field you want to render.
scope => post_meta: Piklist will save this data as post_meta. This becomes more important as you mix and match fields. For instance, you could create a field on your post edit screen that saves the data as a comment or user data. Piklist allows for this type of flexibility.

Notice that this is very similar to the way you create fields for Settings Sections.

Now, let’s create our select field, a SELECT FIELD:

piklist('field', array(
  'type' => 'select'
  ,'scope' => 'post_meta'
  ,'field' => 'demo_select'
  ,'label' => 'Select box'
  ,'description' => 'Choose from the dropdown.'
  ,'attributes' => array(
  'class' => 'text'
  )
  ,'choices' => array(
    'option1' => 'Option 1'
    ,'option2' => 'Option 2'
    ,'option3' => 'Option 3'
  )
  ,'position' => 'wrap'
));

Notice that this array is very similar to the one used to create the TEXT BOX. Just two differences:

type => select: Tells Piklist that you want to render a SELECT field.
The choices array adds your choices.

That’s it! Everything else is the same.

One more field to go in this tutorial. Let’s create our COLORPICKER field. Normally, you would need to add Javascript and CSS to create this field… but not with Piklist!

piklist('field', array(
  'type' => 'colorpicker'
  ,'scope' => 'post_meta'
  ,'field' => 'demo_colorpicker'
  ,'label' => 'Choose a color'
  ,'value' => '#aee029'
  ,'description' => 'Click in the box to select a color.'
  ,'attributes' => array(
    'class' => 'text'
  )
  ,'position' => 'wrap'
  ));

Seriously, that’s all you need to create a COLORPICKER field. You will notice this is pretty much the same code used to create the TEXT BOX, except we set ‘type’ => ‘colorpicker’.

You new Meta Box should look like this:

Full Code Snippet:

<?php
/*
Title: My Demo Meta Box
Post Type: piklist_demo
*/
piklist('field', array(
 'type' => 'text'
 ,'scope' => 'post_meta'
 ,'field' => 'demo_text'
 ,'label' => 'Text box'
 ,'description' => 'Field Description'
 ,'value' => 'Default text'
 ,'attributes' => array(
 'class' => 'text'
 )
 ,'position' => 'wrap'
));

piklist('field', array(
 'type' => 'select'
 ,'scope' => 'post_meta'
 ,'field' => 'demo_select'
 ,'label' => 'Select box'
 ,'description' => 'Choose from the dropdown.'
 ,'attributes' => array(
 'class' => 'text'
 )
 ,'choices' => array(
 'option1' => 'Option 1'
 ,'option2' => 'Option 2'
 ,'option3' => 'Option 3'
 )
 ,'position' => 'wrap'
));

piklist('field', array(
 'type' => 'colorpicker'
 ,'scope' => 'post_meta'
 ,'field' => 'demo_colorpicker'
 ,'label' => 'Choose a color'
 ,'value' => '#aee029'
 ,'description' => 'Click in the box to select a color.'
 ,'attributes' => array(
 'class' => 'text'
 )
 ,'position' => 'wrap'
 ));
?>

Using these fields in a theme:

Where possible, Piklist uses the default WordPress functions to get things done, and using Post Meta is no different. You can use the get_post_meta() function to pull this data into your theme. Here’s how you would use these fields in your Single.php file:

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