Buddypress Social Profile WordPress
- SOLVED
Hi,
I got this code from Buddypress forum, it works as it should but with one problem. When the user haven't filled in the social links. The widget area fall down under the content area until the user have filled in at least one social link in their custom xprofile field. Can be theme related.
/* -----------------------------------------------------
:: Function to Social Profile
-------------------------------------------------------- */
// <a href="http://stackoverflow.com/questions/7952977/php-check-if-url-and-a-file-exists" rel="nofollow">http://stackoverflow.com/questions/7952977/php-check-if-url-and-a-file-exists</a>
function is_200($url) {
$options['http'] = array(
'method' => "HEAD",
'ignore_errors' => 1,
'max_redirects' => 0
);
$body = file_get_contents($url, NULL, stream_context_create($options));
sscanf($http_response_header[0], 'HTTP/%*d.%*d %d', $code);
return $code === 200;
}
// Social Media Icons based on the profile user info
function member_social_extend(){
$dmember_id = $bp->displayed_user->id;
$profiles = array(
'Website',
'Email',
'Twitter',
'Facebook',
'Google+',
'Vimeo',
'LinkedIn',
'Pinterest',
'Instagram',
'Custom web link'
);
$profiles_data = array();
foreach( $profiles as $profile ) {
$profile_content = '';
$profile_content = xprofile_get_field_data( $profile, $dmember_id );
if ( !empty( $profile_content ) ) {
$profiles_data[ $profile ] .= $profile_content;
}
}
echo '<div class="member-social">';
if( !( empty( $profiles_data ) ) ) {
echo '<ul class="social-icons-profile">';
while ( list( $key, $value ) = each( $profiles_data ) ) {
$profile_icon_uri = get_stylesheet_directory_uri() . '/assets/images/' . sanitize_title( $key ) . '.png';
$profile_icon_uri_exists = is_200( $profile_icon_uri );
$default_profile_icon_uri = get_stylesheet_directory_uri() . '/assets/images/custom-web-link.png';
if( $profile_icon_uri_exists ) {
$profile_icon = $profile_icon_uri;
} else {
$profile_icon = $default_profile_icon_uri;
}
echo '<a href="' . $value . '" title="' . $key . '" target="_blank"><img src="' . $profile_icon . '" /></a>';
}
echo '<ul class="social-icons-profiles">';
echo '</div>';
}
}
add_filter( 'bp_before_member_header_meta', 'member_social_extend' );
Css
.social-icons-profile a {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
text-indent: -9999em;
background-color: #FAFAFA;
}
.social-icons-profile a img {
padding-top:5px;
margin-right: 10px;
}
Answers (2)
Romel Apuya answers:
you dont have li tah inside the ul..
/* -----------------------------------------------------
:: Function to Social Profile
-------------------------------------------------------- */
// <a href="http://stackoverflow.com/questions/7952977/php-check-if-url-and-a-file-exists" rel="nofollow">http://stackoverflow.com/questions/7952977/php-check-if-url-and-a-file-exists</a>
function is_200($url) {
$options['http'] = array(
'method' => "HEAD",
'ignore_errors' => 1,
'max_redirects' => 0
);
$body = file_get_contents($url, NULL, stream_context_create($options));
sscanf($http_response_header[0], 'HTTP/%*d.%*d %d', $code);
return $code === 200;
}
// Social Media Icons based on the profile user info
function member_social_extend(){
$dmember_id = $bp->displayed_user->id;
$profiles = array(
'Website',
'Email',
'Twitter',
'Facebook',
'Google+',
'Vimeo',
'LinkedIn',
'Pinterest',
'Instagram',
'Custom web link'
);
$profiles_data = array();
foreach( $profiles as $profile ) {
$profile_content = '';
$profile_content = xprofile_get_field_data( $profile, $dmember_id );
if ( !empty( $profile_content ) ) {
$profiles_data[ $profile ] .= $profile_content;
}
}
echo '<div class="member-social">';
if( !( empty( $profiles_data ) ) ) {
echo '<ul class="social-icons-profile">';
while ( list( $key, $value ) = each( $profiles_data ) ) {
$profile_icon_uri = get_stylesheet_directory_uri() . '/assets/images/' . sanitize_title( $key ) . '.png';
$profile_icon_uri_exists = is_200( $profile_icon_uri );
$default_profile_icon_uri = get_stylesheet_directory_uri() . '/assets/images/custom-web-link.png';
if( $profile_icon_uri_exists ) {
$profile_icon = $profile_icon_uri;
} else {
$profile_icon = $default_profile_icon_uri;
}
echo '<li><a href="' . $value . '" title="' . $key . '" target="_blank"><img src="' . $profile_icon . '" /></a></li>';
}
echo '</ul>';
echo '</div>';
}
}
add_filter( 'bp_before_member_header_meta', 'member_social_extend' );
Romel Apuya comments:
then add css
.social-icons-profile ul li{
display:block;
}
Veritus comments:
Your solution to ul is correct but the same issue appeirs when user don't fill in the social link.
Veritus comments:
Any advice to centering the icon in the page?
timDesain Nanang answers:
try to change this part:
echo '<div class="member-social">';
if( !( empty( $profiles_data ) ) ) {
echo '<ul class="social-icons-profile">';
while ( list( $key, $value ) = each( $profiles_data ) ) {
$profile_icon_uri = get_stylesheet_directory_uri() . '/assets/images/' . sanitize_title( $key ) . '.png';
$profile_icon_uri_exists = is_200( $profile_icon_uri );
$default_profile_icon_uri = get_stylesheet_directory_uri() . '/assets/images/custom-web-link.png';
if( $profile_icon_uri_exists ) {
$profile_icon = $profile_icon_uri;
} else {
$profile_icon = $default_profile_icon_uri;
}
echo '<a href="' . $value . '" title="' . $key . '" target="_blank"><img src="' . $profile_icon . '" /></a>';
}
echo '<ul class="social-icons-profiles">';
echo '</div>';
}
with:
if( !empty( $profiles_data ) ) {
echo '<div class="member-social">';
echo '<ul class="social-icons-profile">';
$default_profile_icon_uri = get_stylesheet_directory_uri() . '/assets/images/custom-web-link.png';
while ( list( $key, $value ) = each( $profiles_data ) ) {
$profile_icon_uri = get_stylesheet_directory_uri() . '/assets/images/' . sanitize_title( $key ) . '.png';
$profile_icon_uri_exists = is_200( $profile_icon_uri );
$profile_icon = $profile_icon_uri_exists ? $profile_icon_uri_exists : $default_profile_icon_uri;
echo '<li><a href="' . $value . '" title="' . $key . '" target="_blank"><img src="' . $profile_icon . '" /></a></li>';
}
echo '</ul>';
echo '</div>';
}// !empty
Veritus comments:
Your solution is correct Tim, that gets the problem away when the sidebar appeirs under the content when user haven't filled in social link..
Veritus comments:
trying to center the icons in the page, any advice?
timDesain Nanang comments:
css trick:
trys this:
ul.social-icons-profile{text-align:center !important;}
ul.social-icons-profile li{display:inline-block !important;}
timDesain Nanang comments:
or
.member-social{text-align:center !important}
ul.social-icons-profile{margin:0;padding:0;list-style:none}
ul.social-icons-profile li{float:none !important;display:inline-block !important}
Veritus comments:
Thank you Tim!
timDesain Nanang comments:
you are welcome.