Skip to content

Custom-Metabox Documentation

Custom-Metabox Documentation

Custom-Metabox Documentation

Quick Start

Download Custom-Metabox. Include the custom-metabox/class-ap-custom-metabox-apply.php with your plugin index.php or functions.php file. After that copy & paste this code.

add_filter('ap_meta_apply',function($fields){
	$fields = array();
	$fields[] = array(
		'label' = 'Personal Info',
		'id' = 'mi_tm_personal_section',
		'post_options' = array(
			'post_type' = "post",
			'context'   = 'normal',
			'priority'  = 'default'
		),
		'inputs' = array(
			array(
				'label' = 'Designation',
				'name' = 'designation',
				'class' = 'vvv',
				'type' = 'text',
				'default' = null,
				'description' = 'Ex: WordPress Developer',
			),
		)
	);
	return $fields;
});
new AP_Custom_Metabox_apply();;

Explain

“ap_meta_apply” with the filter hook new field has been added.

$fields = array();

First, reset Initially announced fields with this empty array.

                'label' = 'Personal Info',
		'id' = 'mi_tm_personal_section',
		'post_options' = array(
			'post_type' = "post",
			'context'   = 'normal',
			'priority'  = 'default'
		),
                 'inputs' = array()

Within this field, array passes the post type  & other properties.  Window title will be the “label” name.  Within “post_option” array. Inputs array contains all the fields array.
Add new field:

array(
	'label' = 'Designation',
	'name'  = 'designation',
	'class' = 'vvv',
	'type' = 'text',
	'default' = null,
	'description' = 'Ex: WordPress Developer',
			),

NOTE: – After add_filter  have to instantiate AP_Custom_Metabox_apply class.

Start with Apply class

Download Custom-Metabox. Include the custom-metabox/class-ap-custom-metabox-apply.php with your plugin index.php or functions.php file.  Uncomment new AP_Custom_Metabox_apply();  last line of  class-ap-custom-metabox-apply.php file.  Edit the fields array to add your own custom  metaboxes.
Add new meta box for ‘post’ post type

array(
    'label'         = 'Gallery Example',
    'id'            = 'gl_example_meta',
    'post_options'  = array(
        'post_type' = 'post',
        'context'   = 'side',
        'priority'  = 'default'
    ),
    'inputs'        = array(
        array(
            'name'          = 'gallery_example',
            'type'          = 'gallery',
            'class'         = 'glexmple',
        ),
    )
)

Preview of Custom Field

You can add Preview of the custom field after saving if necessary.
Note: – Preview is not supported for Repeater & gallery field.
Add a Preview 

add_filter('ap_meta_apply',function($fields){
   $fields = array();
   $fields[] = array(
      'label' = 'Personal Info',
      'id' = 'mi_tm_personal_section',
      'post_options' = array(
         'post_type' = "post",
         'context'   = 'side',
         'priority'  = 'default'
      ),
      'inputs' = array(
         array(
            'label' = 'Portfolio',
            'name' = 'portfolio_vd',
            'class' = 'vvv',
            'type' = 'text',
            'desc' = null,
            'default' = null,
            'description' = 'Ex: WordPress Developer',
         ),
      )
   );
   return $fields;
});
add_action('ap_display_function_portfolio_vd',function($v){
      $embed_code = wp_oembed_get($v, array('width' = 350, 'height' = 150)); ?
      <?php echo $embed_code;
});
new AP_Custom_Metabox_apply( );

Action hook “ap_display_function_(Custom Field name)”. For “portfolio_vd” field the action hook will be  “ap_display_function_portfolio_vd”. The first parameter contains the value of the field.  For example, I have embedded the URL here. So if you give a Youtube video URL after saving the post it will display the youtube video.

 
 
 
 
 
 
 
 
 
 
 

Repeater Field

add_filter('ap_meta_apply',function($fields){
   $fields = array();
   $fields[] = array(
      'label' = 'Personal Info',
      'id' = 'mi_tm_personal_section',
      'post_options' = array(
         'post_type' = "post",
         'context'   = 'normal',
         'priority'  = 'default'
      ),
      'inputs' = array(
         array(
            'name' = 'mi_experience_info',
            'label' = 'Repeater Field Example',
            'type' = 'repeater',
            'child_inputs' = array(
               array(
                  'name' = 'mi_job_title',
                  'type' = 'text',
                  'label' = 'Job Title',
                  'default' = 'professor'
               ),
               array(
                  'name' = 'mi_job_form',
                  'type' = 'text',
                  'label' = 'Form',
                  'description' = 'Ex: 25th August , 2015',
               ),
               array(
                  'name' = 'mi_job_to',
                  'type' = 'text',
                  'label' = 'To',
                  'description' = 'Ex: 25th June , 2017'
               ),
               array(
                  'name' = 'mi_job_responbility',
                  'type' = 'textarea',
                  'label' = 'Responsibilities',
               )
            )
         ),
      )
   );
   return $fields;
});
new AP_Custom_Metabox_apply( );

To add repeater field type will be “repeater “. Array Key “child_inputs”.  Within child_inputs array add all the field you want to repeat.

Dependency with Nested Dependancy

Nested dependency is available with Custom Metabox.

array(
    'label'         = 'Text Example',
    'name'          = 'text_example',
    'type'          = 'text',
    'class'         = 'texmple',
    'default'       = null,
    'placeholder'   = 'email',
    'description'   = 'write: email to see hidden Email field',
),
array(
    'label' = 'Email Example',
    'name' = 'email_example',
    'type' = 'email',
    'class' = 'emexmple',
    'default' = '[email protected]' ,
    'description' = 'write: [email protected] to see hidden URL field',
    'dependency' = array(
            'name'= 'texmple',
            'value' = 'email',
        )
),
array(
    'label' = 'URL Example',
    'name' = 'url_example',
    'type' = 'url',
    'class' = 'urlexmple',
    'default' = null,
    'placeholder'= 'google.com',
    'dependency' = array(
        'name'= 'emexmple',
        'value' = '[email protected]',
        'sub' = 'texmple'
    )
),
array(
    'label' = 'text 2',
    'name' = 'text2_example',
    'type' = 'text',
    'class' = 'txt2exmple',
    'default' = null,
    'placeholder'= 'abcd',
    'dependency' = array(
        'name'= 'urlexmple',
        'value' = 'google.com',
        'sub' = 'emexmple'
    )
),

What is  Dependancy?
A field will display depending on the value of another field.   This is called dependency.

array(
    'label'         = 'Text Example',
    'name'          = 'text_example',
    'type'          = 'text',
    'class'         = 'texmple',
    'default'       = null,
    'placeholder'   = 'email',
    'description'   = 'write: email to see hidden Email field',
),
array(
    'label' = 'Email Example',
    'name' = 'email_example',
    'type' = 'email',
    'class' = 'emexmple',
    'default' = '[email protected]' ,
    'description' = 'write: [email protected] to see hidden URL field',
    'dependency' = array(
            'name'= 'texmple',
            'value' = 'email',
        )
),

Suppose there Email example field will display if Text example field value is email. otherwise not.
What is  Nested Dependancy?
A field will display depending on the value of another dependent field. So the Dependent field Value is matched with given value the field will display if the dependent field is also displaying other both field will be hidden.

array(
    'label'         = 'Text Example',
    'name'          = 'text_example',
    'type'          = 'text',
    'class'         = 'texmple',
    'default'       = null,
    'placeholder'   = 'email',
    'description'   = 'write: email to see hidden Email field',
),
array(
    'label' = 'Email Example',
    'name' = 'email_example',
    'type' = 'email',
    'class' = 'emexmple',
    'default' = '[email protected]' ,
    'description' = 'write: [email protected] to see hidden URL field',
    'dependency' = array(
            'name'= 'texmple',
            'value' = 'email',
        )
),
array(
    'label' = 'URL Example',
    'name' = 'url_example',
    'type' = 'url',
    'class' = 'urlexmple',
    'default' = null,
    'placeholder'= 'google.com',
    'dependency' = array(
        'name'= 'emexmple',
        'value' = '[email protected]',
        'sub' = 'texmple'
    )
),

Suppose URL Example field will display if the Email example field value is “[email protected]” & Email example is also displaying. So the Text example field value is not “email” both fields will be hidden.
 
dependency array accepts three keys (name, value & sub).
‘name’ will be the class name of the dependent field. This is required.
‘value’ will be the value of the dependent field for which this field will display. This is also required.
‘sub’  is for nested dependency only. This is optional. ‘sub’ will be the class name of the dependent’s dependent field.

Fields

Text

array(
    'label'         = 'Text Example',
    'name'          = 'text_example',
    'type'          = 'text',
    'class'         = 'texmple',
    'default'       = null,
    'placeholder'   = 'email',
    'description'   = 'write: email to see hidden Email field',
),

Textarea

array(
    'label'         = 'Text Example',
    'name'          = 'text_example',
    'type'          = 'textarea',
    'class'         = 'texmple',
    'default'       = null,
    'placeholder'   = 'email',
    'description'   = 'write: email to see hidden Email field',
),

URL

array(
    'label' = 'URL Example',
    'name' = 'url_example',
    'type' = 'url',
    'class' = 'urlexmple',
    'default' = null,
    'placeholder'= 'google.com',
),

Email

array(
    'label' = 'Email Example',
    'name' = 'email_example',
    'type' = 'email',
    'class' = 'emexmple',
    'default' = '[email protected]' ,
    'description' = 'write: [email protected] to see hidden URL field',
),

Color

array(
    'label' = 'Color Example',
    'name' = 'clr_example',
    'type' = 'color',
    'class' = 'clrexmple',
    'default' = 'red',
),

Select/Dropdown

array(
    'label' = 'Select Example',
    'name' = 'select_example',
    'type' = 'select',
    'input_option' =array(
        'one' = 1,
        'two' = 2,
        'three' = 3,
    ),
    'class' = 'slexmple',
    'default' = 'one',
    'placeholder'= 'google.com',
),

Radio

array(
    'label' = 'Radio Example',
    'name' = 'radio_example',
    'type' = 'radio',
    'input_option' =array(
        'one' = 1,
        'two' = 2,
        'three' = 3,
    ),
    'class' = 'rdexmple',
    'default' = 'one',
    'placeholder'= 'google.com',
),

Gallery

  array(
            'name'          = 'gallery_example',
            'type'          = 'gallery',
            'class'         = 'glexmple',
        ),

We are still working with the PHP script. If you want to contribute you can send a pull request. More field type will be added.  We are trying to make the process easy of adding custom field type.

Leave a Reply

Your email address will not be published. Required fields are marked *