The BuddyBuilder member’s directory template does not come with a search form similar to what we see in the BuddyPress default template. A search form comes in handy when users want to look for other members within the site when they are on the members page. Therefore in case your WordPress site has very many registered members it may be quite hard for members to find each other without a search form. This doc will walk you through the steps to add a Profile Search form to your BuddyBuilder Template.
Step 1: Create a Search Form
- To create a search form head over to you WP Admin Dashboard > Users > Profile Search.
- On the next page click on “Add New”. (It will then redirect you to a page where you can create a new form).
The form creation process is quite straightforward with the steps below:
- Enter the title of the profile search form
- Then Add several search fields as per your preference. For our case we added: “I am a”, “Looking For a”, “Birthday(Age)”, and “Country”. The four fields should give precise search results as per the members preference. Feel free to include more for further precision.
- Next move to the right column panel, under Form Settings, choose the Target Directory to be Members.
- Under “Add Form To Directory”, select YES.
- Next, select your preferred form template. For this case we recommend you to choose the horizontal template as it does not occupy much space.
- Once done you can proceed and publish your form.
Step 2: Accessing BuddyBuilder Member Directory
This step will now involve accessing the BuddyBuilder Members Directory template. You can add the search form in the default template or in any custom BuddyBuilder template. First you would need to access it via Elementor. To do so simply follow these steps:
- Go to your WP Admin > BuddyBuilder on the left panel.
- In the BuddyBuilder page, select your Member Directory Page Template.
- Next, click on “Edit Current”. This takes you to the frontend of elementor to edit the template you just selected.
Step 3: Editing BuddyBuilder Member Directory on Elementor
After the step above it should redirect you to Elementor’s frontend where you would need to edit the default member directory page. In this case we will not dwell on the styling and layout, rather, we will focus on showing you how to access the search form so as it looks similar to the BuddyPress template.
From your BuddyBuilder Members page template, you should find two or three BuddyBuilder Elements on the live preview which are: Members Navigation, Members Filters and Members Listing.
We do not have to delete any of these for they all have their own purpose. However I would recommend removing the filter module. Thus you are left with Navigation and Listing.
Next you need to go to the “Sweetdate” element section which is where you would find the “Profile Search” module.
Upon finding it, drag and drop it in between the BuddyBuilder’s Navigation and Listing modules.
Step 4: Editing the Profile Search Element
This step will focus on making several content and styling editions in your profile search element. We will show you how to call the search forms we created on step 1 into this element. Then we will finalize by customizing it and making it match the BuddyPress Members’ Page Template look.
- Therefore once you have dropped in the profile search module it should open its settings by default from the left panel of elementor.
- The first setting is to set up the search form you created on step 1. Simply select it from the drop down list under “Form”. (This should remove the error visible on the search form from live edition: i.e “BP Profile Search 5.3.3 error: Form ID “0” is empty or nonexistence”).
- To customize it further you can opt to remove the profile avatars that are displayed below it. This can be done by just turning off the “Show Profiles” toggle.
You can further opt to remove the details section for it to be minimalistic in terms of design. The final member’s directory page looks as shown in the image below where members can easily search for other members in the site using specified fields.
