Skip to content
Create a gist now

Instantly share code, notes, and snippets.

<?php
// http://stackoverflow.com/questions/7952977/php-check-if-url-and-a-file-exists
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 profile',
'Facebook page',
'Google+',
'Vimeo',
'LinkedIn',
'Kickstarter',
'Behance',
'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 '<h3>Find me online:</h3>';
echo '<ul class="social-icons">';
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">';
echo '</div>';
}
}
add_filter( 'bp_before_member_header_meta', 'member_social_extend' );
@pragmatic-web
Owner

You probably also want some basic CSS like:

.social-icons a {
display: inline-block;
height: 64px;
width: 64px;
margin: 5px;
text-indent: -9999em;
}

.social-icons a img {
float:left;
}

@pragmatic-web
Owner

Add the functions to your WP theme's functions file to extend a BuddyPress profile.

You add fields as usual to the profile fields at: /wp-admin/users.php?page=bp-profile-setup

Then change the list of profiles ($profiles array) starting Line 19 above to include those you wish to loop through and display on a user's profile.

It checks for a specific icon, if not it uses a default one (which you'll need to upload to /wp-content/themes/your-theme/assets/images/custom-web-link.png).

To override the default icon, just upload a new icon to the same directory with the right name - it uses WP's sanitize_title() function so e.g. a field called 'Facebook Profile' would look for an image called facebook-profile.png.

@james2792

Hi There

Thanks for your contribution - extremely helpful!! I've used this code as you've laid it out above and worked perfectly.

However I tried it again and this time the link is there, but the icon is not visible for the different social networks. When I add the default icon image - it only shows that image in place of all other icons.

The image files are in the correct folder, with the correct file names as per the profile field labels - except the only icon that shows is the default icon (with links that are set in the profile fields).

Is there any fix that I can try to resolve this, or work around it? Maybe defining $profile_icon_uri individually for each profile field?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.