Skip to content

Instantly share code, notes, and snippets.

@pragmatic-web
Last active June 7, 2023 10:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save pragmatic-web/9352466 to your computer and use it in GitHub Desktop.
Save pragmatic-web/9352466 to your computer and use it in GitHub Desktop.
<?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
Copy link
Author

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
Copy link
Author

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.

@cwr047
Copy link

cwr047 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?

@jtmantis
Copy link

Hey,

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

@LeighJeffery
Copy link

LeighJeffery commented Jul 29, 2018

Hi David,

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

https://www.screencast.com/t/6Ua2lvYaNMZO

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