Easy Content Types is a very powerful plugin that makes it really easy to setup custom post types, taxonomies, and meta boxes. One of great but lesser known features of the plugin is that it has an API built in to allow users to register their own custom meta field types that can be used in the custom meta boxes. This tutorial is going to walk you through the process of registering your custom meta field types for Easy Content Types.
The main purpose of being able to easily register new field types is to have the ability to modify Easy Content Type’s behavior, without changing any of the core plugin files. This allows users to make their modifications, and still retain the ability to update the plugin to latest versions. All of the code I’m going to show you will be placed into a custom plugin, which you can download a the bottom of this page.
The entire process is explained in depth in the video, so I will only go into minimal detail here.
Adding new meta field types is quite simple. It requires a minimum of two functions, but no more than three. In order to register our new field types with ECPT, we will use the add_filter() hook. If you’re not familiar with filters, then please read my introductory post on them.
The first function we will write is the function that makes our new field types available to Easy Content Types.
1 2 3 4 5 6 7 | function sample_ecpt_field_types($field_types) { $field_types[] = 'textblock'; $field_types[] = 'textinput'; return $field_types; } add_filter('ecpt_field_types', 'sample_ecpt_field_types'); |
Assuming your plugin is active at the time of adding this function, you will now have two new field types available: “textblock” and “textinput”. This function works by taking an array of the existing field types, $field_types, and then adding two new array elements to it. The returned array is then passed through the “ecpt_field_types” filter, which makes the new types available.
Our field types are now available and you can create new fields with these types through The Easy Content Types interface. They won’t do anything yet, but they will be there.
Now we need to write the function that will output the field HTML inside the meta box.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function sample_ecpt_fields_html($field_html, $field, $meta) { switch($field['type']) : case 'textblock' : $field_html = $field['desc']; break; case 'textinput' : $field_html = '<input type="text" name="' . $field['id'] . '" id="' . $field['id'] . '" value="' . $meta . '" class="regular-text"/>'; break; endswitch; return $field_html; } add_filter('ecpt_fields_html', 'sample_ecpt_fields_html', 10, 3); |
This function has three parameters:
- $field_html – a string containing the HTML markup for the field
- $field – an array containing all information about the field (ID, type, description, etc)
- $meta – the value stored in the post meta table
Since we need to setup the HTML for each new field type, we perform a switch() statement on the $field['type'] array key. For the “textblock” field, we simply return the description of the field. For the “textinput” field, we setup a regular input field. This “textinput” will function exactly like the “text” field that comes with Easy Content Types, but it provides an excellent example.
Once we have setup each of our field type’s HTML, we pass the function through the “ecpt_fields_html” filter. This connects the HTML to the field types.
Both of your fields will function 100% now. You can add them to a meta box, and you can store information in the “textinput” field type. The “textblock” field type works really well for adding contextual information to your meta boxes. These are, of course, simply field type samples, but they should give you an idea of what is possible.
The way that we have just registered these fields is identical to the method I used in my ECPT Bonus Meta Field Types add-on plugin.
There’s just one more thing that we can do with our new field types, if we want. For some field, you may want to change the format of the field label. For example, in the “header” field that is available in ECPT Bonus Meta Field Types, the field label is placed in H4 tags, making it bolder. We can do this with these fields as well.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function sample_ecpt_field_labels($label, $field) { switch($field['type']) : case 'textblock' : $label = '<h4>' . $label . '</h4>'; break; case 'textinput' : $label = ''; break; endswitch; return $label; } add_filter('ecpt_field_label_filter', 'sample_ecpt_field_labels', 10, 2); |
This function works almost exactly the same as the one we used to setup the fields’ HTML, but only takes two parameters. The “textblock” label is placed in H$ tags, just like my “header” field type. The “textinput” field, however, has its label completely removed by setting $label to a blank string.
That’s it! Your field types are completely finished. In less than 60 lines of code, you have registered new field types for Easy Content Types.
Note, these field types will not be available in the ECPT meta box export function.
Download PluginRelated Items
thanks for writing the tutorial!
Of course!
Great tutorial, just what I needed for my custom metabox!
Hi Pippin,
I trying to get a metabox to show a list of custom posts, but i don´t know what the problem is.
case ‘selectPost’ :
$options = get_posts(array( ‘post_type’ => ‘city’));
foreach ($options as $option) {
$selected = ”;
if($meta == $option) { $selected = ‘selected=”selected”‘; }
$options .= ”. $option . ”;
}
$field_html = ” . $options . ” . __(stripslashes($field['desc']));
break;
endswitch;
Can you tell me what is wrong on the code, or the right way to do it??
thanks
How do you want to echo the options? As a list or as a drop down?
Hi Pippin,
I want to echo as a dropdown, showing all the custom post types
This should work for you:
Hi Pippin,
is possible add two or more inputs fields to one meta field type?
Yes, definitely. The data from the fields would be stored as an array. Are you familiar with how to set that up?
I have something like that but I know that it’s incorrectly written. Could you please correct this?
case 'slide':
$field_html = '';
if (is_array($meta)) {
$count = 1;
foreach ($meta as $key => $value) {
//print_r($value);
$field_html .= ''.
''.
''.
'Upload File'.
'Slide link URL:';
if ($count > 1) {
$field_html .= 'x';
}
$field_html .= '';
$count++;
}
} else {
$field_html .= ''.
''.
''.
''.
'Slide link URL:'.
''.
'';
}
$field_html .= '' . __('Add New', 'ecpt') . ' ' . __(stripslashes($field['desc']));
break;
The code has been added wrong, so in this case I will try to explain. I would like to add two repeatable input fields to one field type. The first as a upload input and the second as a classic text input field to the url link. Please paste the sample code, if there is no problem.
Can you paste your code into snippi.com and then share the link? That will let me look at what you have so far.
Hi Pippin,
I’d like to be able to add the following as a single meta entry or at least keep the GUI nice and clean.
Shipping Data meta comprising of “weight”, “length”, “depth”, “width” and present it on one line.
So instead of
“Shipping Data”
Weight [input field]
Length [input field]
Depth [input field]
Width [input field]
I’d like to be able to go
“Shipping Data” : “Wt” [input field] “L x D x W” [input field] [input field] [input field]
First thing I need to grasp is whether meta data can be stored as an array within an array and if that can be done within your framework of ECPT.
Or is there an easier way to do this with CSS?
thanks
For what it’s worth I have been hacking the bejeezas out of a certain ecommerce plugin and I’m trying to bring my wordpress skills upto the point where I no longer need to do that, i.e. try to do as much as possible with hooks/filters, with the help of your fine tutorials.
Failing that I need to know at which stage and how to ask the developers for hooks.
You can definitely store the info as an array. All you need to do is use HTML array notation for the field names, such as name=”meta_name[field]”
Make sense?
Hi Pippin,
First of all – thanks for great plugins, content and tutorials! It has all helped me a lot.
I was wandering. I have made a custom meta box with a multiple select box that lists all posts from a defined custom post type – see paste bin: http://pastebin.com/WHGNx9Su
You can then choose some posts and save their ID’s in an array.
Would it be possible with ECT to make this kinda box and to choose the posts types you want in the select box?
Fx if I make a CPT of ‘Slides’ then create a box that lists all Slides.
Make another CPT – fx ‘Spots’, and create another meta box listing all the Spots.
I hope this make sense, or else I’ll try and elaborate.
Thanks
It’s definitely possible! If you follow the guide on this post it will show you how