Display Custom Business Meta Fields in Template – BuddyPress Business Profile

Get Started

This tutorial demonstrates how to display custom meta fields for a business profile in your WordPress theme. It includes an example to hook into the bp_business_profile_after_category_section action to display meta fields like Business Type, Visibility, Tagline, Special Offers, and Established Date.

Code Implementation

Step 1: Add Custom Fields (If Not Already Added)

Ensure you have already added and saved custom fields to your business profile. Here’s an example of custom fields added in the Create and Manage screens:

// Add custom fields to the Create and Manage Screens
add_action( 'bp_business_create_after_field', 'bp_business_add_custom_fields' );
add_action( 'business_profile_after_general_settings', 'bp_business_add_custom_fields' );

function bp_business_add_custom_fields( $business_id = 0 ) {
    // If $business_id is not provided or is 0, retrieve it dynamically
    if ( ! $business_id ) {
        $business_id = get_the_ID();
    }

    // Fetch saved meta values for the fields
    $business_type = get_post_meta( $business_id, 'business_type', true );
    $business_visibility = get_post_meta( $business_id, 'business_visibility', true );
    $business_tagline = get_post_meta( $business_id, 'business_tagline', true );
    $business_offers = get_post_meta( $business_id, 'business_offers', true );
    $business_date = get_post_meta( $business_id, 'business_date', true );

    ?>
    <div class="bp-business-custom-fields-wrapper">
        <!-- Example: Business Type -->
        <div class="bp-business-field bp-business-type">
            <label for="business-type" class="bp-business-label"><?php esc_html_e( 'Business Type', 'bp-business-profile' ); ?></label>
            <select 
                name="business_type" 
                id="business-type" 
                class="bp-business-select full-width">
                <option value=""><?php esc_html_e( 'Select Type', 'bp-business-profile' ); ?></option>
                <option value="small-business" <?php selected( $business_type, 'small-business' ); ?>><?php esc_html_e( 'Small Business', 'bp-business-profile' ); ?></option>
                <option value="enterprise" <?php selected( $business_type, 'enterprise' ); ?>><?php esc_html_e( 'Enterprise', 'bp-business-profile' ); ?></option>
                <option value="startup" <?php selected( $business_type, 'startup' ); ?>><?php esc_html_e( 'Startup', 'bp-business-profile' ); ?></option>
            </select>
        </div>
    </div>
    <?php
}

Step 2: Save Custom Fields

Ensure the custom fields are saved when creating or editing a business profile.

// Save custom fields on both create and manage screens
add_action( 'save_post_business', 'bp_business_save_custom_fields', 10, 3 );

function bp_business_save_custom_fields( $post_id, $post, $update ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    if ( $post->post_type !== 'business' ) {
        return;
    }

    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }

    // Fields and their sanitization
    $fields = [
        'business_type'       => 'sanitize_text_field',
        'business_visibility' => 'sanitize_text_field',
        'business_tagline'    => 'sanitize_text_field',
        'business_offers'     => 'sanitize_textarea_field',
        'business_date'       => 'sanitize_text_field',
    ];

    foreach ( $fields as $key => $sanitizer ) {
        if ( isset( $_POST[ $key ] ) ) {
            $value = call_user_func( $sanitizer, $_POST[ $key ] );
            update_post_meta( $post_id, $key, $value );
        }
    }
}

Step 3: Display Custom Fields in the Template

Hook into the bp_business_profile_after_category_section action to display the custom fields in the template.

// Display custom meta fields after the Category Section
add_action( 'bp_business_profile_after_category_section', 'bp_display_custom_meta_fields', 10, 1 );

function bp_display_custom_meta_fields( $business_id ) {
    // Fetch custom meta values
    $business_type       = get_post_meta( $business_id, 'business_type', true );
    $business_visibility = get_post_meta( $business_id, 'business_visibility', true );
    $business_tagline    = get_post_meta( $business_id, 'business_tagline', true );
    $business_offers     = get_post_meta( $business_id, 'business_offers', true );
    $business_date       = get_post_meta( $business_id, 'business_date', true );

    // Display custom meta fields if available
    ?>
    <div class="bp-business-info-widget-section bp-business-custom-fields-section">
        <h3 class="bp-business-screen-title"><?php esc_html_e( 'Business Details', 'bp-business-profile' ); ?></h3>
        <ul>
            <?php if ( $business_type ) : ?>
                <li class="bp-business-custom-field">
                    <strong><?php esc_html_e( 'Business Type:', 'bp-business-profile' ); ?></strong> 
                    <?php echo esc_html( ucfirst( str_replace( '-', ' ', $business_type ) ) ); ?>
                </li>
            <?php endif; ?>

            <?php if ( $business_visibility ) : ?>
                <li class="bp-business-custom-field">
                    <strong><?php esc_html_e( 'Visibility:', 'bp-business-profile' ); ?></strong> 
                    <?php echo esc_html( ucfirst( $business_visibility ) ); ?>
                </li>
            <?php endif; ?>

            <?php if ( $business_tagline ) : ?>
                <li class="bp-business-custom-field">
                    <strong><?php esc_html_e( 'Tagline:', 'bp-business-profile' ); ?></strong> 
                    <?php echo esc_html( $business_tagline ); ?>
                </li>
            <?php endif; ?>

            <?php if ( $business_offers ) : ?>
                <li class="bp-business-custom-field">
                    <strong><?php esc_html_e( 'Special Offers:', 'bp-business-profile' ); ?></strong> 
                    <?php echo esc_html( $business_offers ); ?>
                </li>
            <?php endif; ?>

            <?php if ( $business_date ) : ?>
                <li class="bp-business-custom-field">
                    <strong><?php esc_html_e( 'Established Date:', 'bp-business-profile' ); ?></strong> 
                    <?php echo esc_html( date( 'F j, Y', strtotime( $business_date ) ) ); ?>
                </li>
            <?php endif; ?>
        </ul>
    </div>
    <?php
}

Example Output

When the meta fields are populated, the output may look like:

<div class="bp-business-info-widget-section bp-business-custom-fields-section">
    <h3 class="bp-business-screen-title">Business Details</h3>
    <ul>
        <li class="bp-business-custom-field">
            <strong>Business Type:</strong> Small Business
        </li>
        <li class="bp-business-custom-field">
            <strong>Visibility:</strong> Public
        </li>
        <li class="bp-business-custom-field">
            <strong>Tagline:</strong> Excellence in Service
        </li>
        <li class="bp-business-custom-field">
            <strong>Special Offers:</strong> 10% off on all products
        </li>
        <li class="bp-business-custom-field">
            <strong>Established Date:</strong> January 1, 2023
        </li>
    </ul>
</div>

Styling

You can style the output with CSS by targeting the classes added to each section:

.bp-business-custom-fields-section {
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
}

.bp-business-custom-field {
    margin-bottom: 10px;
}

.bp-business-custom-field strong {
    font-weight: bold;
    color: #333;
}

This completes the tutorial to display custom meta fields in your business profile template.

Update on April 9, 2025

BuddyPress Business Profile