Installation

Plugin installation is pretty simple – once you downloaded it as a zip-archive, please go to Plugins > Add new and then click the Upload Plugin button.

The next thing I recommend you to do is to is to set your plugin license key, so you can get the latest plugin updates and stay fast and secure.

This plugin is intended to work without any additional option pages. So there is no license key settings page. You can set up your license key just by adding it into website options. Please run this code just once:

update_option( 'simple_meta_fields_license', 'YOUR LICENSE KEY IS HERE' );

Fields

Below is the description for all the available fields. No matter if you’re going to use them for meta boxes or option pages or the Gutenberg sidebars – all the parameters are the same.

Text Field

input text field

Usage:

array(
	'id' => 'my_field',
	'name' => 'my_field_name', // by default the same as "id"
	'label' => 'Label',
	'type' => 'text',
	'default' => '',
	'placeholder' => '',
	'class' => 'my-class-1 my-class-2', // CSS classes, space-separated or an array
)

Also supports maxlength and show_if parameters (more about conditional fields below).

Textarea

textarea field
array(
	'id' => 'my_textarea_field',
	'label' => 'Label',
	'type' => 'textarea',
	'default' => '',
	'placeholder' => '',
	'cols' => '',
	'rows' => '',
	'class' => array( 'my-class-1', 'my-class-2' ),
),

Also supports name, maxlength and show_if.

Number

number input field
array(
	'id' => 'my_num_field',
	'label' => 'Label',
	'type' => 'number',
	'min' => 1,
	'max' => 10000,
	'step' => 2,
)

Also supports name, class, placeholder, default, short_description and show_if.

Editor

Editor field allows you to save data with HTML tags.

code editor field

Usage:

array(
	'id' => 'my_editor',
	'label' => 'Label',
	'type' => 'editor',
	'description' => '',
	'rows' => '',
	'default' => '',
)

Also supports class, name and show_if.

This field also allows you to specify the list of allowed HTML tags and their attributes for sanitizing with wp_kses() function with simple_sanitize_editor_allowed_html filter hook.

Checkbox

checkbox field
array(
	'id' => 'my_checkbox',
	'label' => 'Label',
	'type' => 'checkbox',
	'short_description' => 'Yes'
	'default' => '', // 1 or 0, true or false
)

Also supports name, class and show_if.

Checklist

Sometimes you need multiple values to be selected and the Checklist field is the best and most elegant thing to do it.

checklist field

Usage:

array(
	'id' => 'my_checklist',
	'name' => 'my_checklist_field',
	'label' => 'Label',
	'type' => 'checklist',
	'default' => array( 'val1', 'val2' ),
	'options' => array(
		'val1' => 'Option 1',
		'val2' => 'Option 2',
		'val3' => 'Option 3',
		'val4' => 'Option 4',
	),
)

Select

select dropdown field
array(
	'id' => 'my_select_field',
	'label' => 'Label',
	'type' => 'select',
	'placeholder' => 'Select...',
	'options' => array(
		'val1' => 'Option 1',
		'val2' => 'Option 2',
	),
)

Also supports name, class, show_if and multiple.

If you provide 'multiple' => true and enqueue Select2 library in the WordPress admin, it will be automatically activated for this field, a good example here.

Radio

radio buttons field
array(
	'id' => 'my_radio',
	'name' => 'my_radio_bnts',
	'label' => 'Label',
	// 'inline' => true, // you can display radio buttons inline
	'type' => 'radio',
	'options' => array(
		'val1' => 'Option 1',
		'val2' => 'Option 2',
	),
	'default' => 'val1',
)

Image

image upload field
array(
	'id' => 'my_img',
	'label' => 'Label',
	'type' => 'image',
)

You can provide a default value as an image ID, name and description parameters are also supported.

This field allows not only chose multiple images but also change their order using drag and drop.

gallery field

Usage:

array(
	'id' => 'my_gallery',
	'label' => 'Label',
	'type' => 'gallery',
),

You can provide a default value as an array of image IDs, name and description parameters are also supported.

File

file field example
array(
	'id' => 'my_file',
	'label' => 'Label',
	'type' => 'file',
)

You can provide a default value as an attachment ID, name and description parameters are also supported.

Repeater field

Since version 2.5 my plugin allows you to use repeater fields. Here is how it looks like in Gutenberg sidebar settings:

In order to use a repeater field, please provide the field type repeater and then just the fields into subfields parameter.

An example of code:

array(
	'id' => 'my_repeater',
	'label' => 'Repeater',
	'type' => 'repeater',
	'subfields' => array(
		array(
			'type' => 'text',
			'id' => 'name',
			'label' => 'Name',
		),
		array(
			'type' => 'text',
			'id' => 'url',
			'label' => 'URL',
		),
		array(
			'type' => 'image',
			'id' => 'logo',
			'label' => 'Logo',
		)
	)
)

Sections and Tabs

There is also a possibility to organize fields in your meta boxes or settings pages. Depending on a meta box type it can be implemented in different ways.

TypeWhat is supported
Meta Boxes (Classic Editor)Tabs
Sidebars in Block EditorSections
Options PagesTabs and sections

It is quite easy to use:

  • In order to use sections, just provide 'sections' => array() with arrays of sections and put the 'fields' => array() with arrays of fields in it. You can find examples here.
  • In order to use tabs, just provide 'tabs' => array() with array of tabs and put either 'sections' => array() or 'fields' => array() in it. Here is an example for meta boxes and here is an example for options pages.

And of course you can put any field types in sections or tabs.

Conditional Logic

You can easily configure one field to be displayed depending on the value of another field. Just add show_if parameter.

Example:

conditional logic in WordPress meta boxes
add_filter( 'simple_register_metaboxes', 'misha_product_metabox' );
 
function misha_product_metabox( $metaboxes ) {
 
	$metaboxes[] = array(
 		'id'	=> 'my_product_metabox',
 		'name'	=> 'Meta Box',
 		'post_type' => array( 'product' ),
 		'fields' => array(
			array(
				'id' => 'product_type',
				'label' => 'Product type',
				'type' => 'radio',
				'default' => 'virtual',
				'options' => array(
					'virtual' => 'Virtual',
					'physical' => 'Physical',
				),
			),
			array(
				'id' => 'items_in_stock',
				'label' => 'Items in stock',
				'type' => 'number',
				'default' => 1,
				'show_if' => array(
					'id' => 'product_type',
					'value' => 'physical',
				),
			)
 		)
 	);
 
	return $metaboxes;
 
}

Take a look at this piece:

'show_if' => array(
	'id' => 'product_type', // ID of another field it depends on
	'value' => 'physical', // value of another field
),
NameDescription
id(String) ID of another field the current field depends on. It must be an ID of one of the following field types: checkbox, select or radio (these fields should be located outside the repeater field).
value(String|Array) Conditional value. If you’re passing a value of a checkbox field, you can use yes and no values. Multiple values are supported as an array.

How to Get (and Print) Custom Fields Values?

In order to get any custom field value, you can use WordPress default functions.

  • get_post_meta() – for posts, pages and custom post types.
  • get_term_meta() – for categories, tags and custom taxonomies.
  • get_option() – for fields in site option pages.
  • get_user_meta() – for users custom fields.
  • get_comment_meta() – for comments custom fields.

You can find the details description of all these functions in official WordPress documentation easily. The usage of all of them is quite similar (maybe except get_option()).

echo get_post_meta( $id, 'my_field', true );
// here we are printing the value of "my_field" custom field

So, as for get_post_meta(), get_term_meta(), get_comment_meta(), get_user_meta() you just have to pass an element ID in the first parameter and the field name in the second one. That’s pretty much it.

echo get_option( 'my_option' );
// here we are printing the value of "my_option" settings field

For website settings all we need is just a settings field name.

How to get ID of an element we want to print a custom field of?

Well, it depends on what type of element it is and where you are going to print the fields value. But there are some common rules.

  • For posts, pages and custom types in most cases you can use get_the_ID() function.
  • For terms on their archive pages – get_queried_object_id().
  • In order to get current user ID you can use get_current_user_id().

In the below example we are going to print a taxonomy additional content:

// term title (the standard way of printing it)
single_term_title();

// term content
echo wpautop( get_term_meta( get_queried_object_id(), 'my_content', true ) );

I used wpautop() function above as well to add paragraphs and new lines.

How to print an image?

When you work with Image or Gallery field, please keep in mind, that the plugin only stores image IDs in database.

So, when you are going to use any of the functions to get the field value, you will get a number.

Then you have to use one of these WordPress functions:

  • wp_get_attachment_image() – to get HTML tag of an image.
  • wp_get_attachment_url(), wp_get_attachment_image_src() – to get an attachment URL.

Once again, these functions are well documented in official WordPress docs. Here is a simple example:

$image_id = get_term_meta( get_queried_object_id(), 'my_img', true );

echo wp_get_attachment_image( $image_id, 'full' );

You can also see, that I added one more argument to the function, full means that we have to use the original image size, but there are some more of them could exist on your website, like thumbnail, medium, large etc.