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.
Table of Contents
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
If using the shortcode builder, use the custom field shortcode
[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
The shortcodes below will output a link to the file when used in the front-end user profile builder.
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]'>
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.