Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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(
'Facebook profile',
'Facebook page',
'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 commented Mar 4, 2014

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 {


pragmatic-web commented Mar 4, 2014

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.

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