Displaying Custom Fields on Posts

Pro. This feature requires WB Member Blog Pro. The free plugin must be installed and active first. See the Pro index for every Pro module.

Learn how to display custom field values on your published posts. This guide covers shortcodes, visibility settings, and template integration.

What You’ll Learn

Using shortcodes to display field values Controlling field visibility settings Template integration for developers Styling custom field output

Method 1: Shortcodes

The easiest way to display custom field values anywhere.

Basic Shortcode

[bp-member-blog-custom-field id=“field_key”]

Replace field_key with your actual field key (found in Custom Fields settings).

Shortcode Attributes

AttributeDescriptionExampleidField key (required)id=“event_date”post_idSpecific post (default: current)post_id=“123”beforeText before valuebefore=“$“afterText after valueafter=” USD”

Example Shortcodes

Display event date:

[bp-member-blog-custom-field id=“event_date”]

Display price with currency:

[bp-member-blog-custom-field id=“price” before=“$” after=” USD”]

Output: $49.99 USD

Display from a specific post:

[bp-member-blog-custom-field id=“rating” post_id=“456”]

Method 2: Field Visibility Settings

Control where each field appears using visibility options.

Visibility Options

SettingFormAdminFrontendFrontend OnlyYesNoYesAdmin OnlyNoYesNoBothYesYesYes

Display on Frontend Toggle

Each field has a Display on Frontend toggle. When enabled, the field value automatically appears below the post content.

On: Field value shows on published posts Off: Field value only accessible via shortcode or code

Method 3: Template Integration (Developers)

Access custom field values directly in theme templates.

Get Single Value

<?php $event_date = get_post_meta( get_the_ID(), ‘event_date’, true ); if ( $event_date ) { echo ’<p class=“event-date”>Date: ’ . esc_html( $event_date ) . ‘</p>’; } ?>

Get Gallery Images

<?php $gallery = get_post_meta( get_the_ID(), ‘photo_gallery’, true ); if ( is_array( $gallery ) && ! empty( $gallery ) ) { echo ‘<div class=“custom-gallery”>’; foreach ( $gallery as $image_id ) { echo wp_get_attachment_image( $image_id, ‘medium’ ); } echo ‘</div>’; } ?>

Display File Download

<?php $file_id = get_post_meta( get_the_ID(), ‘download_file’, true ); if ( $file_id ) { $file_url = wp_get_attachment_url( $file_id ); echo ‘<a href=“’ . esc_url( $file_url ) . ‘” class=“download-link”>Download File</a>’; } ?>

Styling Custom Field Output

Target custom field output with CSS:

/* Container for all custom fields */ .bpmb-custom-fields-wrap { margin: 20px 0; padding: 15px; background: #f9f9f9; border-radius: 4px; }

/* Individual field row */ .bpmb-custom-field { margin-bottom: 10px; }

/* Field label */ .bpmb-field-label { font-weight: bold; margin-right: 10px; }

/* Field value */ .bpmb-field-value { display: inline; }

Field Type Display Behavior

Field TypeHow It DisplaysText/TextareaPlain text outputNumberNumeric valueDateFormatted date stringSelect/RadioSelected option labelMulti-SelectComma-separated labelsCheckboxYes/NoImageImage thumbnailGalleryImage gallery gridFileDownload linkURLClickable linkEmailClickable mailto linkColorColor swatch with hexOembedEmbedded player

Tips for Displaying Fields

Group related fields: Display event details together, not scattered Use clear labels: Help readers understand what each value represents Handle empty values: Don’t display labels for empty fields Match your theme: Style fields to fit your site’s design