Displaying Custom Fields on Posts

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

Attribute	Description	Example
`id`	Field key (required)	`id="event_date"`
`post_id`	Specific post (default: current)	`post_id="123"`
`before`	Text before value	`before="$"`
`after`	Text after value	`after=" 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

Setting	Form	Admin	Frontend
Frontend Only	Yes	No	Yes
Admin Only	No	Yes	No
Both	Yes	Yes	Yes

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 Type	How It Displays
Text/Textarea	Plain text output
Number	Numeric value
Date	Formatted date string
Select/Radio	Selected option label
Multi-Select	Comma-separated labels
Checkbox	Yes/No
Image	Image thumbnail
Gallery	Image gallery grid
File	Download link
URL	Clickable link
Email	Clickable mailto link
Color	Color swatch with hex
Oembed	Embedded 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