To create an advanced search that can be opened and closed we are going to use the plugin shortcodes ultimate
1- Install shortcodes ultimate plugin
2- Go to child theme folder using ftp or your hosting file manager.
Create a new folder, name it members
Now, paste the file attached there, in your new folder. ( the members-loop.php )
3- Go to WP-ADMIN - USERS - PROFILE SEARCH (make sure you have bp profile search plugin installed ) and create your own advanced search form.
Once done, go back to find your shortcode:
Copy the shortcode and go to Appearance > Edit > members-loop.php (you can also use file manager or ftp to access the file at your child theme )
REPLACE "SHORTCODE HERE" with your search form shortcode.
Finally, add this css to style.css or quick css ( IMPORTANT: The css may need some changes, such as colors…)
.su-spoiler-style-fancy .su-spoiler-title {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #23aa7d !important;
font-size: 0.9em;
color: white;
}
.two.columns.bglabel.hz-checkbox label {
text-align: left;
}
#horizontal_search {
padding-bottom: 30px;
padding-left: 100px;
}
.search2 #search-bar {
display: block !important;
}
#search-bar {
display:none;
}
.search2 {
margin-top: 5%;
}
.two.columns.bglabel label {
text-align: left;
}
.custom.dropdown.expand a {
text-align: left;
}
form#horizontal_search label {
text-align: left;
}
label.bp_search_form_filter {
float: left;
font-weight: 600;
font-size: 18px !important;
}
.two.columns.bglabel.hz-checkbox {
float: left;
width: 30%;
}
.two.columns.hz-checkbox-name {
width: 100%;
}
.two.columns.hz-checkbox-name label {
font-size: 18px !important;
float: left;
clear: both;
}
.su-spoiler-content.su-clearfix .editfield {
margin-top: 1% !important;
float: left !important;
width: 34% !important;
}
.two.columns.hz-textbox {
float: none;
}
.su-spoiler-content.su-clearfix #buddypress {
margin-top: 2%;
background: #f0f0f0;
padding-top: 40px;
padding-bottom: 40px;
}
.su-spoiler-content.su-clearfix {
padding-top: 0px !important;
margin: 0px !important;
}
.su-spoiler-content.su-clearfix .kleo-selectbox .expand {
height: 30px !important;
}
.two.columns.hz-checkbox-name label {
font-size: 18px !important;
float: left;
clear: both;
padding: 15px;
font-weight: 600;
}
