USP Pro enables users to submit just about type of content imaginable. To help achieve this, USP makes use of WordPress’ Custom Fields. So when you build your form, you can add custom fields for just about anything, to collect phone numbers, addresses, favorite movies, current mood, and so forth. Then after a user submits your form, any custom fields are attached to the submitted post. This tutorial goes the next step and explains how to display any attached custom fields on the front-end of your site.

Video Tutorial

Check out more video tutorials for USP Pro »

Written Tutorial

For learning how to display custom fields, the above video tutorial really is recommended. But for those who want more details and/or prefer reading instead of watching, here is a written tutorial that explains what you need to know about displaying custom fields.

Pro Tip: As shown in the above video, the easy way to display custom fields on submitted posts is to use the free Helper Plugin. Alternately you can use shortcodes to display certain custom fields, as explained below.

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 Carbon Copy
  • Custom fields — virtually any type of field, including text input, checkbox, password, select, radio, and more

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 submit-post/contact form. Of the form fields listed above, everything except the Post/Page fields are stored in the WordPress database as 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. So for the user’s address, telephone, and vehicle, those fields will be implemented via custom fields. The other post-related fields — Post Title, Post Author, and Post Content — are not custom fields; they are considered part of the post itself.

Building the form

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"]

Here, the 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. So 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 custom-field definitions:

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"]. Note that you can configure your custom-field definitions using a wide variety of useful attributes. Check out the custom fields shortcode reference for a complete list.

Important! 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 usp_get_meta() tag:

<?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 relevant template tags that are included with WordPress core functionality.

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.

Related Posts