How to Display FEP Custom Field Values On Posts & Pages

Hassan Akhtar

This is one of the most common questions asked by Frontend Publishing Pro users and in this post I will try to answer it as comprehensively as possible.

Why Can’t I See Custom Field Values?

Custom fields were introduced in the plugin to support the wide range of third-party plugins and themes that use post meta to store information. If you are not familiar with post meta here’s a helpful introduction to get you started.

Let’s say you are using All In One SEO on your website and you’d like your users to be able to enter keywords, description and SEO title for each post. With Frontend Publishing Pro custom fields you can easily do this. All you have to do is create three new fields with the correct meta keys and you’re set. The information entered by the users in these new fields will be used by All In One SEO without any extra steps. We have a helpful guide on how to find the meta keys for any plugin or theme in case you need it.

Another example could be WooCommerce product price. If you create a form for the WooCommerce ‘product’ post type and then create a custom field with the correct meta key, the product price entered by the user will automatically appear on your website (provided your theme supports WooCommerce, of course).

So in short, the custom field values are stored in the database as post meta but that’s where the role of FEP ends. Having said that, if you have created your very own fields then there is still a way to show them:

How to Display Your Own Custom Fields

We have written a small add-on that you can use to display your own custom fields. Just download it from the addons page, install it on your website like you would any other plugin and use one of these methods to display custom field values:

Shortcodes

The aforementioned add-on for FEP offers the following shortcode: 

wpfepp_custom_field

Here are the attributes it supports:

key (required) The meta key that you used when creating the custom field.

type (required) The type attribute can take one of these values:

  • rating Displays star rating
  • text Displays plain text
  • media Displays single media item
  • gallery Displays gallery of media items
  • list Displays list of items produced by multi-selects

not_found_error (optional) The text to display when the post does not have this particular meta item. Default is empty string.

before (optional) The text/html to display before the meta value. Default is empty string.

after (optional) The text/html to display after the meta value. Default is empty string.

In addition, the shortcode also accepts attributes specific to the type. Star rating can have a number attribute which will decide the number of stars to display. Gallery type accepts all attributes that the default gallery shortcode accepts. Media type accepts a size attribute where you can use keywords like thumbnail and full etc.

Shortcode Examples

Here are some common examples:

Display rating with 5 stars:

[wpfepp_custom_field key="your-star-rating-key" type="rating"]

Display rating with 10 stars or an error if no rating is found:

[wpfepp_custom_field key="your-star-rating-key" type="rating" number="10" not_found_error="No ratings"]

Display a full image:

[wpfepp_custom_field key="your-single-image-key" type="media" size="full"]

Display a thumbnail:

[wpfepp_custom_field key="your-single-image-key" type="media" size="thumbnail"]

Display simple gallery:

[wpfepp_custom_field key="your-image-gallery-key" type="gallery"]

Display a gallery customized using attributes offered by the official gallery shortcode:

[wpfepp_custom_field key="your-image-gallery-key" type="gallery" columns="3" size="medium" order="DESC" orderby="ID"]

Other custom field types like date and color can only be displayed as text.

Template Tags

If you don’t want to add shortcodes to every post individually you should add the shortcode to your theme files. You can use the do_shortcode php function for this purpose:

do_shortcode('[wpfepp_custom_field key="your-single-image-key" type="media" size="thumbnail"]');

This snippet should go within the loop, somewhere in single.php.

If you have any questions or concerns please feel free to get in touch with us.