Template Customization – Wbcom Designs Docs

Override Member Blog templates in your theme to customize the appearance and layout of member blog pages.

Template Files

Member Blog uses template files for rendering the frontend interface. These can be overridden in your theme for complete design control.

Template Directory Structure

/templates/
├── posts.php              # Published posts list
├── draft-posts.php        # Draft posts list
├── pending-posts.php      # Pending review posts list
├── edit.php               # Post editor form
└── peepso/                # PeepSo-specific templates
    ├── posts.php
    ├── draft-posts.php
    ├── pending-posts.php
    └── edit.php

How to Override Templates

Method 1: Theme Override (Recommended)

Create a folder in your theme: your-theme/bp-member-blog/
Copy the template file from plugins/buddypress-member-blog/templates/
Edit your copy in the theme folder
Changes are preserved when the plugin updates

Example:

your-theme/
└── bp-member-blog/
    ├── posts.php         # Your customized posts template
    └── edit.php          # Your customized editor template

Method 2: Child Theme Override

For themes you don’t control:

Create a folder in your child theme: child-theme/bp-member-blog/
Copy and modify the template files there
Child theme templates take priority over parent theme

Available Templates

posts.php

Displays the list of published posts in the member dashboard.

Used When: Member views their “Published” tab

Key Elements:

Post title with edit link
Featured image thumbnail
Publication date
View count
Edit/Delete action buttons

draft-posts.php

Displays draft posts that haven’t been published yet.

Used When: Member views their “Drafts” tab

Key Elements:

Draft post title
Last modified date
Continue editing link
Delete draft button

pending-posts.php

Displays posts awaiting admin approval.

Used When: Member views their “Pending Review” tab

Key Elements:

Pending post title
Submission date
Status indicator
Edit link (if allowed)

edit.php

The post creation and editing form.

Used When: Member creates or edits a post

Key Elements:

Title input field
Content editor (based on Editor setting)
Featured image uploader
Category selector
Submit/Save Draft buttons

Template Variables

These variables are available in template files:

Common Variables

Variable	Type	Description
`$user_id`	int	The displayed user’s ID
`$current_user_id`	int	The logged-in user’s ID
`$is_own_profile`	bool	Whether viewing own profile
`$posts_per_page`	int	Pagination setting

Post Loop Variables

Variable	Type	Description
`$post`	WP_Post	Current post object
`$post_id`	int	Current post ID
`$post_title`	string	Post title
`$post_status`	string	Post status (publish, draft, pending)
`$edit_url`	string	URL to edit the post
`$delete_url`	string	URL to delete the post (with nonce)

Form Variables (edit.php)

Variable	Type	Description
`$is_edit`	bool	Whether editing existing post
`$post_data`	object	Post data for editing
`$categories`	array	Available categories
`$selected_cats`	array	Currently selected category IDs
`$editor_type`	string	Selected editor (editorjs, medium, classic)

Template Hooks

Use these hooks to add content without overriding entire templates.

Before/After Content

// Add content before the posts list
add_action( 'bp_member_blog_before_posts_loop', function() {
    echo 'My Posts
';
});

// Add content after the posts list
add_action( 'bp_member_blog_after_posts_loop', function() {
    echo 'End of posts
';
});

Form Hooks

// Add field before the submit button
add_action( 'bp_post_before_submit_button', function() {
    echo 'Custom content here
';
});

// Add field after the category selector
add_action( 'bp_post_after_category', function() {
    echo 'Additional options
';
});

PeepSo Templates

If using PeepSo instead of BuddyPress, templates are loaded from the peepso/ subdirectory. Override these the same way:

your-theme/bp-member-blog/peepso/posts.php

Styling Templates

CSS Classes

All templates output elements with consistent CSS classes:

/* Main container */
.bp-member-blog-wrapper { }

/* Post list */
.bp-member-blog-posts { }

/* Individual post item */
.bp-member-blog-post-item { }

/* Post title */
.bp-member-blog-post-title { }

/* Action buttons */
.bp-member-blog-actions { }
.bp-member-blog-edit-btn { }
.bp-member-blog-delete-btn { }

/* Dashboard tabs */
.bp-member-blog-tabs { }
.bp-member-blog-tab-active { }

/* Pagination */
.bp-member-blog-pagination { }

Adding Custom Styles

Add CSS in your theme’s stylesheet or use the Customizer:

/* Example: Style the post list */
.bp-member-blog-post-item {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.bp-member-blog-post-item:hover {
    background: #f9f9f9;
}