Just Custom Fields

How can i add my own component (new field type)?

To add your custom component (field type), you need to follow several easy steps:

Include files

Require a main plugin file in your plugin/theme:

Plugin Name: My Super Plugin
Description: Extension 0f Just Custom Fields
Version:     1
Author:      Me
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html

// including main JCF file
require_once WP_PLUGIN_DIR . '/just-custom-fields/just-custom-fields.php';

// including our new component
require_once WP_PLUGIN_DIR . '/jcf-components/JustField_Menu.php';

Create Component Class

Extend your component class from \jcf\core\JustField and defined required methods:

  • __construct() – this method registers field idBase and title.
  • field() – this method is called on post edit screen and creates HTML form control for your field
  • save() – this method processes data passed from the post edit screen and preprocesses them before saving to the post meta table
  • form() – this method generates field settings edit form (Shown on field create or update)
  • update() – this method preprocesses data passed from the fields settings form. They will be stored as the field settings.
  • shortcode() – this method process output of shortcode call inside post content or do_shortcode() function. If you don’t use shortcodes – you can skip this method.

class JustField_MyField extends \jcf\core\JustField
	public function __construct()
		$field_ops = array( 'classname' => 'my_field_class' );
		parent::__construct('my_field', __('My Field Name', \JustCustomFields::TEXTDOMAIN), $field_ops);

	 * 	draw field on post edit form
	 * 	you can use $this->instance, $this->entry
	public function field()
		<div id="jcf_field-<?php echo $this->id; ?>" class="jcf_edit_field <?php echo $this->fieldOptions['classname']; ?>">
			<?php echo $this->fieldOptions['before_widget']; ?>
				<?php echo $this->fieldOptions['before_title'] . esc_html($this->instance['title']) . $this->fieldOptions['after_title']; ?>
				<br />
				<input type="text"
					   name="<?php echo $this->getFieldName('val'); ?>"
					   id="<?php echo $this->getFieldId('val'); ?>"
					   value="<?php echo esc_attr($this->entry); ?>"/>
				<?php if ( $this->instance['description'] != '' ) : ?>
					<p class="howto"><?php echo esc_html($this->instance['description']); ?></p>
				<?php endif; ?>

			<?php echo $this->fieldOptions['after_widget']; ?>

	 * 	save field on post edit form
	public function save( $values )
		$values = $values['val'];
		return $values;

	 * draw form for 
	public function form()
		$instance = wp_parse_args((array) $this->instance, array( 'title' => '', 'description' => '' ));
		$description = esc_html($instance['description']);
		$title = esc_attr($instance['title']);
		<p><label for="<?php echo $this->getFieldId('title'); ?>"><?php _e('Title:', \JustCustomFields::TEXTDOMAIN); ?></label> <input class="widefat" id="<?php echo $this->getFieldId('title'); ?>" name="<?php echo $this->getFieldName('title'); ?>" type="text" value="<?php echo $title; ?>" /></p>
		<p><label for="<?php echo $this->getFieldId('description'); ?>"><?php _e('Description:', \JustCustomFields::TEXTDOMAIN); ?></label> <textarea name="<?php echo $this->getFieldName('description'); ?>" id="<?php echo $this->getFieldId('description'); ?>" cols="20" rows="4" class="widefat"><?php echo $description; ?></textarea></p>

	 * 	update instance (settings) for current field
	public function update( $new_instance, $old_instance )
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['description'] = strip_tags($new_instance['description']);
		return $instance;


Register Your Component

Add a function call to the jcf_register_fields hook with a field registration code:

add_action('jcf_register_fields', 'register_justfield_my_field');
function register_justfield_menu() {
	$jcf = JustCustomFields::run();
	$jcf->registerField( 'JustField_MyField' );

For more information on adding new components, please check our article in Examples section.