Skip to content

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' );

This comment has been minimized.

Copy link
Owner Author

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 {


This comment has been minimized.

Copy link
Owner Author

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.


This comment has been minimized.

Copy link

commented Jan 12, 2016

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?


This comment has been minimized.

Copy link

commented May 29, 2017


Thanks for this tutorial. Does anyone know how we can also add social icons to members loop on members directory page?


This comment has been minimized.

Copy link

commented Jul 29, 2018

Hi David,

Thank you for sharing:D I was wondering if anyone knows why the code is displaying like this?

I have the Twitter field filled in and the icon png file uploaded.

Any help would be appreciated. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.