Create and Display WordPress File Upload Fields

One feature common to most websites is the presence of file upload fields in their registration/sign up forms. This can be handy if you are building a school website that requires the student to upload their ID during registration to ascertain if they are indeed students of the school.

If you are building such a school website with WordPress, using the default registration form is out of the equation because:

* It resides outside of your website.
* Not in conformity with your site design.
* Difficult to extend, most especially for non-developers.

In this tutorial, you will learn how to use the file upload feature in ProfilePress.

Let’s Begin

First off, we need to create two file upload custom fields for the driver’s license and résumé.

To create the custom fields, go to Settings >> Custom Fields and click the Add New button.

Fill out the form as shown in the screenshots below, where the options form field accepts comma-delimited values of file extension that the upload field will consider valid and acceptable.

The form is pretty self-explanatory.

Having done that, let us proceed to add them to the registration form.

Adding File Upload Fields to Registration & Edit Profile Forms

To add the driver’s license and résumé file upload fields to a registration form and edit profile forms, use the custom field block if using the drag-and-drop builder.

If using the shortcode builder, use the custom field shortcode [reg-cpf] and [edit-profile-cpf] for registration and edit profile forms respectively.

Here’s a registration form with a driver’s license and résumé file upload fields.

Displaying Uploaded Files on User Profiles

To display a link to users’ uploaded files on their profiles, open up the user profile builder and add the custom field block where you want it shown.

If using the shortcode builder, use the profile-file shortcode.

The shortcodes below will output a link to the file when used in the front-end user profile builder.

[profile-file key="drivers_license"]

[profile-file key="resume"]

What if you don’t want just the URL of the files? This can come in handy when the uploaded file is an image and you would want to display the image rather than link to it.

The above can be achieved with the profile-file shortcode like so:

<img src='[profile-file key="resume" raw]'>

Other Integrations

The uploaded files are also automatically shown on the default WordPress user profile and the Account Details section of the My Account page.

If you have any pre-sale questions, inquiring or contributions, get in touch.