How I add a WordPress MetaBox

   

Background

When coding a plugin or developing a theme, sometimes i find myself the need to create a custom metabox which will extend my theme or plugin functionally and since its usually the same thing over and over (with a few exceptions) i use a ready made PHP class/script for that and there are a million of tutorials, scripts and classes that do just that all over the web. So if there are a million like that all over the web way create another one?

   

Problem

most of the scripts and classes are just fine if you are looking to create simple fields (input,radio,checkbox,select,image upload and textarea) but like I posted above there are a few exceptions were you need a more complex (like a time and date, taxonomy list dropdown, post list dropdown, color picker and WYSIWYG editor) which a fewer can handle but when i started coding Shortcodes UI i needed to create a field that can repeat it self as many times as needed so i coded the metabox from scratch and when the same question came up at WordPress answers i answered it but once again coded the metabox from scratch. So basically there was no good metabox script for creating repeater fields.

   

Solution

When looking for a solution i found a class by Cory Crowley which derived from Meta Box script by Rilwis. So I forked it and modified it to my needs. And then My Metabox class was born.

   

ScreenShoots

   

Features

• Works with plugins as well as themes
• Works with all post types (page,post,custom).
• Available fields are:
  • Input
  • Textarea
  • Radio button
  • Checkbox
  • Select Dropdown
  • File Upload
  • Image Upload
  • WYSIWYG editor
  • Date Picker
  • Time Picker
  • Color Picker
  • Taxonomy List Dropdwon
  • Post list Dropdown
  • Repeater Field
• OOP Code all the way (which means easy to extend and modify).

   

Usage:

First thing you need to do is include the class

//include the main class file
require_once("meta-box-class/my-meta-box-class.php");

Then setup your metabox configuration:

/*
* configure your meta box
*/
$config = array(
	'id' => 'demo_meta_box', 			// meta box id, unique per meta box 
	'title' => 'Demo Meta Box', 		// meta box title
	'pages' => array('post', 'page'), 	// post types, accept custom post types as well, default is array('post'); optional
	'context' => 'normal', 				// where the meta box appear: normal (default), advanced, side; optional
	'priority' => 'high', 				// order of meta box: high (default), low; optional
	'fields' => array(), 				// list of meta fields (can be added by field arrays) or using the class's functions
	'local_images' => false, 			// Use local or hosted images (meta box images for add/remove)
	'use_with_theme' => false 			//change path if used with theme set to true, false for a plugin or anything else for a custom path(default false).
);

Next you need to initiate your metabox:

/*
* Initiate your meta box
*/
$my_meta = new AT_Meta_Box($config);

Add some fields to your metabox:

/*
* Add fields to your meta box
*/

//text field
$my_meta->addText($prefix.'text_field_id',array('name'=> 'My Text '));
//textarea field
$my_meta->addTextarea($prefix.'textarea_field_id',array('name'=> 'My Textarea '));
//checkbox field
$my_meta->addCheckbox($prefix.'checkbox_field_id',array('name'=> 'My Checkbox '));
//select field
$my_meta->addSelect($prefix.'select_field_id',array('selectkey1'=>'Select Value1','selectkey2'=>'Select Value2'),array('name'=> 'My select ', 'std'=> array('selectkey2')));
//radio field
$my_meta->addRadio($prefix.'radio_field_id',array('radiokey1'=>'Radio Value1','radiokey2'=>'Radio Value2'),array('name'=> 'My Radio Filed', 'std'=> array('radionkey2')));
//date field
$my_meta->addDate($prefix.'date_field_id',array('name'=> 'My Date '));
//Time field
$my_meta->addTime($prefix.'time_field_id',array('name'=> 'My Time '));
//Color field
$my_meta->addColor($prefix.'color_field_id',array('name'=> 'My Color '));
//Image field
$my_meta->addImage($prefix.'image_field_id',array('name'=> 'My Image '));
//file upload field
$my_meta->addFile($prefix.'file_field_id',array('name'=> 'My File '));
//wysiwyg field
$my_meta->addWysiwyg($prefix.'wysiwyg_field_id',array('name'=> 'My wysiwyg Editor '));
//taxonomy field
$my_meta->addTaxonomy($prefix.'taxonomy_field_id',array('taxonomy' => 'category'),array('name'=> 'My Taxonomy '));
//posts field
$my_meta->addPosts($prefix.'posts_field_id',array('post_type' => 'post'),array('name'=> 'My Posts '));

/*
* To Create a reapeater Block first create an array of fields
* use the same functions as above but add true as a last param
*/

$repeater_fields[] = $my_meta->addText($prefix.'re_text_field_id',array('name'=> 'My Text '),true);
$repeater_fields[] = $my_meta->addTextarea($prefix.'re_textarea_field_id',array('name'=> 'My Textarea '),true);
$repeater_fields[] = $my_meta->addCheckbox($prefix.'re_checkbox_field_id',array('name'=> 'My Checkbox '),true);
$repeater_fields[] = $my_meta->addImage($prefix.'image_field_id',array('name'=> 'My Image '),true);

/*
* Then just add the fields to the repeater block
*/
//repeater block
$my_meta->addRepeaterBlock($prefix.'re_',array('inline' => true, 'name' => 'This is a Repeater Block','fields' => $repeater_fields));

and last just close the declaration of you metabox:

/*
* Don't Forget to Close up the meta box deceleration
*/
//Finish Meta Box Deceleration
$my_meta->Finish();

and you should get something that looks like the images from above.

   

Download:

   

Documentation

Proper documentation will be added soon to the GitHub Wiki.

   

License

This Class is licensed under GNU version 3 which basically means you can do any thing you want.

As always feedback is more the welcome.