WordPress Media Uploader Custom Fields can be used for storing various information. You can create a relationship between other data such as adding users to the picture or writing additional information about the image. In this tutorial we will learn how to add custom fields to the media uploader.
We will create two fields here:
- Info – textarea
- Tags – checkboxes to tag users
Adding a WordPress Media Uploader Custom Field
To add a field you need to filter the hook
attachment_fields_to_edit such as this:
You then add a field by providing the field key/name as key and then an array that will define the field. To see some of the default fields that are set there, go to
wp-admin/media.php and find the function
Saving a Custom Field
When we add a field, we also need to save it. This can be done in hooks
attachment_fields_to_save. The first hook is an action and the second one is a filter.
Since filters return data, if you are using the second one, you will need to return the
$post. This filter can be also used to set error messages.
Adding a Media Uploader Textarea Field
Let’s now do some actual coding. We will now add a simple textarea field and save it. Let’s see how to add a custom field:
First, we are getting the value for the provided attachment (
$post). After that we are adding that field here and providing the
value parameter with the field’s value. To render our field as a textarea, we will have to set the parameter
Saving the Textarea Field
In this tutorial, I will work with the hook
edit_attachment. We will use that hook to save the data.
We are checking if the field is set for our attachment by checking
. That is because the custom fields are rendered like that. If that field has been posted, we will save the data.
You would need to validate it and sanitize it before saving it, but that is out of the scope of this tutorial.
Adding Media Uploader Field “Tags”
The Tags field will be a WordPress Media Uploader Custom Field that will render all our users and then we can tag them by checking them. We can look at it as we tag people on Facebook.
Here we are getting the tags from the database inside the variable
$tags. We are also getting all the users registered in our WordPress site. Next, we are creating a custom
html that will hold all our users with checkbox next to their names.
Since the custom field is made in this way:
we will have to create the attribute
name in similar way. We are adding the
tag key with the user’s ID as a key.
The last part of adding this field is to extend the variable
$form_fields with our field. To provide our custom
html as the input’s output, we need to add that output to the parameter
html and also assign
'html' to the parameter
Saving the WordPress Media Custom Field “Tags”
When we check or uncheck a user, WordPress will send a POST request to our site. Since all of those checkboxes will be in a form:
We will just need to get the
tags which will be an array of key => value pair and save them:
Adding custom fields can be a challenging task. You need to know a little bit more than just writing custom HTMLs. The WordPress Plugin API provides us with the hooks so that we can extend the current fields with others.
Have you ever added a custom field to the attachment page? Please share your experience here with us:)
If you want to jump to an article, you can do it here: