Examples of adding fields to WordPress Metabox

A few days ago, we was talking about how to construct a WordPress metabox for a couple of fields, today we will extend that example with several examples of code for adding different kinds of fields.

Examples of adding fields to WordPress Metabox

The fields of a regular WordPress metabox are almost always constructed using a <p></p> HTML tag so, in general, the main structure of any field for a metabox should be like this.

<p>
 HTML code for one field: <label>, <input>, textarea... whatever 
</p>

Including the HTML code of any field inside a <p></p> HTML tag, we can easily take advantage of the WordPress standard CSS for admin environment. All fields will be perfectly distributed inside the metabox, they keep the margins, paddings, etc. without any additional CSS rules. But, let’s go with the examples.

A regular INPUT

If you want, you can change the value of the attribute type for introducing, instead of a simple text, also an email, or an url, a password, a number, etc… But, be carefull with the value date, time or similars because the field doesn’t works (extending a selector for years/month/day) in all browsers.

<p>
<label for="field_id">Introduction text</label>
<input type="text" value="value_for_field" class="field_classes" name="field_name"
placeholder="Some text" id="field_id" />
</p>

Remember that, if you want you can also use just the type text for the field in combination with the corresponding WordPress escape functions applied to the value. See the next example for an URL field.

<p>
<label for="field_id">Introduction text</label>
<input type="text" value="<?php esc_url ( $field_value); ?>" class="field_classes"
name="field_name" placeholder="Some text" id="field_id" />
</p>

It produces the same result but, using text for the attribute type, it is avoided the browser checking of the field so that, we can introduce our own checking routines, for example, during saving process, or via an AJAX call, etc.

Textarea

It’s very important to use an escape function, always that you want, for example, to allow HTML tags inside the textarea field.

<p>
<label for="field_id">Introduction text</label>
<textarea class="field_classes" name="field_name" rows="5" cols="80" id="field_id">
<?php esc_textarea ( $field_value ); ?></textarea>
</p>

Checkbox

In this case, we directly already insert a hidden field for avoiding NULL values of checkbox as we saw in a former article about null values.

<p>
<label for="field_id">
<input type="hidden" value="0" name="field_name" />
<input type="checkbox" value="1" class="field_classes" name="field_name" 
<?php checked ( TRUE, $actual_value, TRUE ); ?> id="field_id" />
&nbsp;Description text</label>
</p>

Radio

<p>
<legend for="field_id">Introduction selection text</legend>
<label for="field_id_1">
    <input type="radio" value="value_1_for_field" class="field_classes" name="field_name" placeholder="Some text" id="field_id_1" />&nbsp;Value 1
</label>
<label for="field_id_2">
    <input type="radio" value="value_2_for_field" class="field_classes" name="field_name" placeholder="Some text" id="field_id_2" />&nbsp;Value 2
</label>
<label for="field_id_3">
    <input type="radio" value="value_3_for_field" class="field_classes" name="field_name" placeholder="Some text" id="field_id_3" />&nbsp;Value 3
</label>
</p>

Select

<p>
<label for="ProductNameID">Select your Product</label>
<select id="ProductNameID" name="ProductName">
    <option value="0">No product selected</option>
    <option value="2143">King size Table</option>
    <option value="2144">Big Table</option>
    <option value="3551">Medium Table</option>
    <option value="2145">Small Table</option>
    <option value="2847">Tiny Table</option>
    //... the rest of products.
</select>
</p>

I hope these examples are useful for you.

Have a nice WordPressing!

Leave a Comment

   Mandatory field
You can use these HTML tags inside the commment.
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>