Bainternet WordPress Consultant
  • WordPress Services
  • Blog
    • Fancy Functions
    • ShortCodes
    • How To’s
  • Plugins
    • Post Editor Zen Coding
    • Advanced Code Editor 2.0
      • other older versions
    • ShortCodes UI
    • User specific Content
    • Simple QR Code
    • Sidebar per user role
    • Simple TOC
    • Post Creation Limits
      • Posts Creation Limits older versions
    • User Ranks
      • Bainternet User Ranks v1.0
    • Custom Category Template
    • Author category
    • Simple Gist Embed
    • WordPress Simple Instant Search Plugin
    • GoTo Redirect
    • Simple Google +1 plugin
  • About Me
    • Donations
  • Contact me

How I add a WordPress MetaBox

Posted on Jan 10, 2012
Ohad Raz
130 Comments
Fancy Functions,How To
  • Share on Facebook.
  • Share on Twitter.
  • Share on Google+
  • Share on LinkedIn
How I add a WordPress MetaBox

Contents
  • Background
  • Problem
  • Solution
  • ScreenShoots
  • Features
  • Usage
  • Download:
  • Documentation
  • License

   

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

Demo Metabox with input, textarea, checkbox and select fields Demo Metabox with radio and date fields Empty repeater field
Repeater field Time field Color Picker field
Image field File upload field WYSIWYG field
Taxonomy and posts fields

   

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:

You can download the class From GitHub to use it which also includes a demo plugin with the code from above to test it out, And the GitHub repository is for forking it and helping improve it.

   

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.

Issues and bugs
If you have any issues or bugs please use the Issue Tracker and not the comments bellow!

Incoming search terms:

  • taxonomy metabox bainternet
  • how to add form metabox on wordpress
  • wp meta box sortable
  • wordpress meta box dropdown
  • wordpress meta box button
  • wordpress dropdown meta box
  • wordpress custom meta box select post category
  • wordpress context normal advanced side

Related posts:

  1. WordPress Categories by year
  2. Custom taxonomies extra fields
  3. how to – WordPress Category Extra Fields






Loading comments...
  • About the author

    Ohad Raz

    I'm a WordPress Consultant, a WordPress Developer and a WordPress Freelancer
    Currently in my third year of Software Engineering B.Sce Degree.
    I've been developing Websites and web applications on WordPress for over 5 years.
    I live in Kiryat Gat , Israel.

    • Write an E-Mail
  • Other Methods of contact

    My profile on WordPress Answers

    profile for Bainternet at WordPress, Q&A for WordPress developers and administrators

    • My Code Poet listing

    • My Careers 2.0 Profile

    • My Gravatar.com Profile

    • My About.Me Profile

    • Contact Form

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.





  • Recent Comments

    • WordPress Developer Ohad Raz on Advanced Code Editor 2.0
    • WordPress Developer anupam on Advanced Code Editor 2.0
    • WordPress Developer Ohad Raz on how to – WordPress Category Extra Fields
    • WordPress Developer Luismin on how to – WordPress Category Extra Fields
    • WordPress Developer Ohad Raz on Advanced Code Editor 2.0
  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

  • Top Posts & Pages

    • WordPress Taxonomies Extra Fields the easy way
    • how to - WordPress Category Extra Fields
    • Custom taxonomies extra fields
    • How I add a WordPress MetaBox


  • About Me
  • Blog
  • Contact me
  • disclaimer
  • Donations
  • home posts
  • WordPress Services
© 2011 by Bainternet WordPress Consultant