USP Pro enables users to submit just about type of content imaginable. In this tutorial we’ll look at how custom fields are set up and displayed on the front-end of your site. Additionally, you can watch a video tutorial on how to display custom fields »
How USP Pro uses custom fields
There are form fields for post submission, contact forms, art-directed content, combo forms, and much more. USP Form fields include:
- Post/Page fields: such as Post Title, Post Author, Post Tags, Post Categories, and Post Content.
- User-registration fields: such as Nicename, Display Name, Nickname, First Name, Last name, and Description.
- Contact-form fields: such as Subject, Email, and CC.
- Custom fields: virtually any type of form field imaginable, including text input (default), checkbox, password, and radio (for select/option).
Any of these fields may be included in any USP Form. For example, you can include both Post-specific fields and contact-form fields to create a combo post/email form. Of the form fields listed above, everything except the Post/Page fields are stored in the database as WP custom fields that are attached to their respective submitted posts. That’s a bit abstract, so here is a detailed walkthrough of the process.
Collecting User Input with Custom Fields
After a form is submitted its non-post fields are attached to the submitted post as custom fields. To display the custom fields, you can use shortcodes and/or template tags to display the info as needed. For example, let’s say that we want to set up a USP Form that collects the following information:
- User’s Address
- User’s Telephone
- User’s Vehicle
Additionally, we will collect the Post Title, Post Author, and Post Content. To set this up as a form, we visit USP Forms > Add New, and add the following to the main content area of the form:
[usp_custom_field form="123" id="1"] [usp_custom_field form="123" id="2"] [usp_custom_field form="123" id="3"] [usp_name] [usp_title] [usp_content] [usp_submit]
Once the form is set, we need to define the custom fields. To do so, scroll down a bit beneath the USP Form’s content area and toggle open the meta-box/panel for Custom Fields. If it is not visible, you can enable it by clicking the “Screen Options” tab located in the upper-right corner of the admin screen. There you can check the box next to “Custom Fields” to display the Custom Field Panel. Once the Custom Fields are visible beneath the USP Form, you should see several ready-to-go fields that match the shortcodes used to create the form:
[usp_custom_field form="123" id="1"] [usp_custom_field form="123" id="2"] [usp_custom_field form="123" id="3"]
form is the ID of the USP Form and will be pre-populated with the correct form ID. The
id refers to the custom field itself. By default each of these three custom fields will have a value of
data-required#true. To use these custom fields to collect Address, Telephone, and Vehicle information, we need to add some further parameters. To do so, replace the three default values of
data-required#true with the following:
data-required#true|name#address|placeholder#Address|label#Address data-required#true|name#telephone|placeholder#Telephone|label#Telephone data-required#true|name#vehicle|placeholder#Vehicle|label#Vehicle
So the first line is for
[usp_custom_field form="123" id="1"], the second line is for
[usp_custom_field form="123" id="2"], and the third line is for
[usp_custom_field form="123" id="3"]. Don’t forget to click the “Update” button next to each custom field after making changes! Also remember to Update/Publish the USP Form itself.
Displaying Custom Fields via Template Tag
Once the USP Form and custom fields are set up, and a user has completed and submitted the form, the submitted content is ready to display in your theme template using any of the USP Pro Template Tags. For example, here is how to do it using the
<?php echo usp_get_meta(false, 'usp-custom-address'); ?> <?php echo usp_get_meta(false, 'usp-custom-telephone'); ?> <?php echo usp_get_meta(false, 'usp-custom-vehicle'); ?>
Notice here that each of the template tags reference “usp-custom-whatever”, where “whatever” is the
name parameter specified in the custom form-field. In other words, each custom-field name is prepended with “usp-custom-” when attached to the submitted post. Further, in addition to the collection of USP Pro template tags, you can use any of those included with WordPress (i.e., any that apply to custom fields).
Displaying Custom Fields via Shortcode
Instead of displaying custom fields via the theme template using template tags, it’s also possible to display custom fields using shortcodes. To do so for our working example, we would add the following to any WP Post or Page:
[usp_meta meta="usp-custom-address"] [usp_meta meta="usp-custom-telephone"] [usp_meta meta="usp-custom-vehicle"]
As you can see, the value of the
meta attribute refers to the name of the custom field, just as when using template tags. Check out a complete list of USP Pro Shortcodes that enable flexible display of any USP custom field.