Memory Wiki

I'll start with Step 1 — thorough research of BuddyPress's existing API before writing any code. ## Step 1 — Research Let me examine all the relevant BP files to understand the existing API.

Let me find where BuddyPress is actually installed.

BuddyPress 14.4.0 IS installed and active. Let me now research the BP API properly.

Good - all BP functions exist. Now let me research the BP API properly using docker exec to read the files.

Now I have the full picture. Let me check the theme's functions.php for existing hooks, then implement.

Now I have a complete understanding of the architecture. Let me implement this step by step. ## Step 2 — Implementation First, let me create the mu-plugin for the profile card functionality:

Now let me create the JS file:

Now let me update the community-3col.php template. I need to modify the profile_field category section to render interactive cards:

Now let me update the JS localization to include BP avatar/cover URLs:

Now let me verify the PHP syntax of all modified files:

PHP syntax checks pass. Now let me test that the xprofile fields are created by triggering the `bp_init` action:

## Summary ### What I Did I thoroughly researched BuddyPress's existing API and then implemented interactive profile field cards for the community 3-column template. ### Files Created/Modified 1. **CREATED: `/var/www/html/wp-content/mu-plugins/profe-profile-cards.php`** — A mu-plugin containing: - `profe_ensure_xprofile_fields()` — Creates BP xprofile fields (Bio, Location, Employer, Primary Language) if they don't exist, hooked to `bp_init` - `profe_ajax_save_profile_card()` — AJAX handler using `xprofile_set_field_data()` for bio/location/employer/primary_language and `wp_update_user()` for display_name - `profe_trigger_tracker_recalc()` — Triggers the profile tracker recalculation after saves - `profe_profile_cards_enqueue()` — Loads CSS/JS on the community template page - Full CSS for the interactive card UI (dark theme consistent with #1a1d2e background, #262a3e borders, #288a7a teal accents) - BP template rendering (avatar templates + cover image templates) via `bp_avatar_get_templates()` and `bp_attachments_get_template_part()` 2. **CREATED: `/var/www/html/wp-content/themes/profe-theme/assets/js/profe-profile-cards.js`** — JavaScript handling: - Click-to-expand card toggle - AJAX save for text fields (bio, location, employer, primary_language, display_name) - Redirect to BP's native change-avatar/change-cover-image pages for avatar/banner uploads - Status update indicators and auto-refresh after save 3. **MODIFIED: `/var/www/html/wp-content/themes/profe-theme/page-templates/community-3col.php`** — Updated the right sidebar profile widget: - Profile field list items are now `.clickable-item` with `data-slug` attributes - Each of the 7 profile_field items expands into an interactive card below the items list - **profile_pic card**: Shows current avatar (or "no photo" placeholder) - **banner card**: Shows current cover image (or "no image" placeholder) - **display_name card**: Text input pre-filled with current value + Save button - **bio card**: Textarea pre-filled with current value + Save button - **location/employer/primary_language cards**: Text inputs pre-filled + Save button - All upload fields use BP's API: `bp_core_fetch_avatar()`, `bp_attachments_get_attachment()`, `xprofile_get_field_data()` - Avatar and banner cards redirect to BP's native `/profile/change-avatar/` and `/profile/change-cover-image/` pages ### What I Used From BP's API - `xprofile_set_field_data()` — For saving bio, location, employer, primary_language - `xprofile_get_field_data()` — For fetching current values - `xprofile_get_field_id_from_name()` — For checking field existence - `BP_XProfile_Field` — For creating new fields - `bp_core_fetch_avatar()` — For showing current avatar - `bp_get_user_has_avatar()` — For checking if avatar exists - `bp_attachments_get_user_has_cover_image()` — For checking cover image - `bp_attachments_get_attachment()` — For fetching cover image URL - `bp_avatar_get_templates()` — For rendering BP's avatar JS uploader templates - `bp_attachments_get_template_part()` — For cover image uploader templates - `bp_loggedin_user_domain()` — For linking to BP's native upload screens - Hook: `bp_init` — For ensuring xprofile fields exist - WP hook: `wp_ajax_profe_save_profile_card` — Custom AJAX endpoint ### Issues Encountered 1. **BP xprofile fields didn't exist**: The fields Bio, Location, Employer, Primary Language have not been created in the database yet. My `profe_ensure_xprofile_fields()` function (hooked to `bp_init`) is designed to auto-create them on first run, but I couldn't confirm it fired yet within the tool call limit. The function is correct — it uses `xprofile_get_field_id_from_name()` to check and `BP_XProfile_Field` to create. Visiting the site after activating the mu-plugin should trigger field creation. 2. **Avatar/Cover image upload**: For true inline upload without page navigation, you'd need to integrate BP's plupload-based JS uploader (`bp-plupload.min.js`, `avatar.min.js`). I chose the redirect-to-BP-native-page approach which is simpler, 100% uses BP's existing API, and avoids duplicating BP's complex upload/crop JS flow. 3. **Syntax**: Both PHP files pass `php -l` syntax validation with zero errors. ### To Complete The fields need to be created by visiting the community page (which loads the mu-plugin and triggers `bp_init`). After that, the interactive cards will work. For avatar/banner upload, the user clicks "Upload via BuddyPress" which opens BP's native upload page, and after uploading there they return to the community page.