USP Pro makes it easy to collect any sort of data with user-submitted posts. For example, you could add some custom fields to submitted posts to collect information such as telephone number, street address, favorite color, and virtually anything else that’s required. Then once the post is submitted, the additional information is attached to the post as custom fields. This makes it easy to use and display the information anywhere in your theme. This tutorial explains further about displaying custom fields, along with some useful tips and tricks.
USP Pro Custom Fields
As of version 1.3 of USP Pro, any/all of the following shortcodes may be used to display custom-field data:
[usp_submitted][usp_images][usp_file][usp_filename][usp_meta][usp_all_meta][usp_image]
Each of these shortcodes have a functionally identical template tag for advanced implementation via the theme template. Further, each shortcode/tag accepts a variety of attributes to enable fine-grain control over the displayed output. In addition to these shortcodes/tags, WordPress provides its own robust set of tags that make it possible to display user-submitted content and custom fields just about any way imaginable.
Example
Here is a quick example of how to display custom-field data using the USP shortcode, [usp_meta]:
- Get the name of the custom field that you would like to display, for example,
usp-custom-field - Add the following shortcode to any Post, Page, or Custom Post Type:
[usp_meta meta="usp-custom-field"]
The [usp_meta] shortcode will display the custom-field data for the current post/page on which it’s been included. To display custom fields for all user-submitted posts, use the equivalent USP template tag usp_get_meta() instead:
- Get the name of the custom field that you would like to display, for example,
usp-custom-field - Add the following template tag anywhere in the WP Loop:
echo usp_get_meta(false, 'usp-custom-field');
Pro Tip: It’s also possible to display custom fields for any specific submitted post/page by specifying its ID via the first attribute. Here is an example doing so for post with ID 99:
- Shortcode:
[usp_meta id="99" meta="usp-custom-field"] - Template Tag:
usp_get_meta(99, 'usp-custom-field');
Note about special characters..
With textarea custom fields, any special characters will be encoded when the form is submitted. For example, angle brackets are encoded like < and >, single quotes are encoded like ', and so forth. So you need to decode the data before displaying on the front-end.
If you are using WordPress template tags or your own PHP script, you can use a function such as htmlspecialchars_decode() or html_entity_decode() to do the job. Here is a basic example:
<?php $custom_field = usp_get_meta(false, 'usp-custom-field');
$custom_field = htmlspecialchars_decode($custom_field); ?>If necessary, you also may use nl2br() to preserve line breaks:
<?php $custom_field = usp_get_meta(false, 'usp-custom-field');
$custom_field = htmlspecialchars_decode($custom_field);
$custom_field = nl2br($custom_field); ?>And done. For more information, check out the USP Pro template tags and shortcodes.
Helper Plugin
For those using the Helper Plugin to display custom fields on the front-end, all special-character decoding is handled for you automatically. There may be situations, however, where you need to manipulate the custom field output. No problem. The Helper addon provides a filter hook, usp_helper_display_frontend, that enables us to intercept the custom-field data. Here is a basic example showing how it works:
// USP Pro - Modify Custom Field Data
function usp_pro_modify_custom_field_data($output) {
$output = htmlspecialchars_decode($output, ENT_QUOTES);
$output = nl2br($output);
return $output;
}
add_filter('usp_helper_display_frontend', 'usp_pro_modify_custom_field_data');Simply add the function to your theme’s functions.php and customize as desired. Note that this hook filters all USP Pro custom fields, so maybe use some conditional logic if you are targeting only specific custom field(s).