Skip to:
Content
Pages
Categories
Search
Top
Bottom

Forum Replies Created

Viewing 3 replies - 1 through 3 (of 3 total)
  • @jaxdestroyer

    Participant

    Without knowing the error itself I can only guess. In the example code I gave I open PHP <?php and close PHP ?> , however, if you already have it open it is unnecessary and can error out if you haven’t previously closed it.

    As suggested by @noizeburger, if you make the bp-custom.php page in wp-content/plugins (the actual plugins root directory not the buddypress specific directory) and put the code in there it should work and will still work if you end up changing themes later on as long as you put the images in a directory outside of the theme.

    I hope this helps.

    @jaxdestroyer

    Participant

    The only way I know how to hide it currently is through css. BP will give your sub group a class name based on what you sub group is called. For example, my sub group is About Me. The class name is about-me.

    To make sure you are getting the right class name I suggest you use Firefox firebug or chromes built in element inspector. You should also see another class name of bg-widget when using either tool.

    To make the css specific for that particular snippet all you need to do in your Themes or BuddyPress child themes style.css

    .bp-widget.about-me{
        display: none;
    }

    This will hide the whole sub group when someone is viewing the profile. It makes sure it has both class names before making it no longer display so the user can still see it when editing their profile.

    If you want to only get rid of specific rows that contain this information then BP still has you covered. They also make a class based on your input field name. Using Facebook as an example again the class is field_facebook. To be as specific as possible without going too overboard in your Themes or BuddyPress child themes style.css put in

    table.profile-fields tr.field_facebook{
       display:none;
    }

    This will only get rid of the one row, however, there is a caveat. If you alternate colors between rows it will still count the hidden field. I suggest that if you are going to use this make sure that the fields are at the bottom of the group so they no longer break flowof alternating colors.

    If you want to do multiple fields just seperate them via a comma as shown below

    table.profile-fields tr.field_facebook,
    table.profile-fields tr.field_twiitter{
       display:none;
    }

    @jaxdestroyer

    Participant

    I have Actually done this on my own site that I am developing. I at first Used Buddypress Facebook, Buddypress Googleplus and Buddypress Twitter and they work well enough but I wanted to be able to add some other sites as well as use my own icons. So I figured out what they did and updated it for my needs.
    Here is what I came up with. The following code will go into your themes functions.php.

    <?php
    //Social Media Icons based on the profile user info
    function member_social_extend(){
    		$dmember_id = $bp->displayed_user->id;
    		$fb_info = xprofile_get_field_data('facebook', $dmember_id);
    		$google_info = xprofile_get_field_data('googleplus', $dmember_id);
    		$twitch_info = xprofile_get_field_data('twitch', $dmember_id);
    		$twitter_info = xprofile_get_field_data('twitter', $dmember_id);
    		echo '<div class="member-social">';
    		if($fb_info||$google_info||$twitch_info||$twitter_info){
    			echo 'My Social: ';
    		}
    
    		if ($fb_info) {
    		?>
    		<span class="fb-info"><a href="https://www.facebook.com/<?php echo $fb_info; ?>"  title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/facebook.png" /></a></span>
    	<?php
    	}
    		?>
    		<?php
    		if ($google_info) {
    		?>
    		<span class="google-info"><a href="https://profiles.google.com/<?php echo $google_info; ?>" title="My Googleplus" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/google-plus.png" /></a></span>
    	<?php
    	}
    		?>
    		<?php
    		if ($twitch_info) {
    		?>
    		<span class="twitch-info"><a href="http://www.twitch.tv/<?php echo $twitch_info; ?>" title="My Twitch" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/twitch.png" /></a></span>
    	<?php
    	}
    		?>
    		<?php
    		if ($twitter_info) {
    		?>
    		<span class="twitter-info"><a href="https://twitter.com/<?php echo $twitter_info; ?>" title="My Twitter" target="_blank" class="twitter-follow-button""><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/twitter.png" /></a></span>
    	<?php
    	}
    	echo '</div>';
    }
    add_filter( 'bp_before_member_header_meta', 'member_social_extend' ); ?>

    I will explain the code to you so that you can use it for more than just these 4 sites.
    First the Variables

    $dmember_id = $bp->displayed_user->id;
    $fb_info = xprofile_get_field_data('facebook', $dmember_id);
    

    $dmember_id grabs the currently displayed user id.
    $fb_info gets the data that was placed the facebook text box I created in extended users profiles.
    The same goes for $google_info, $twitch_info, and $twitter_info all you need to do is change 2 simple things.
    $your_variablename_here = xprofile_get_field_data('your_textbox_field_name_here', $dmember_id);

    That textbox field name can be anything you want it to be as long as it is the same as the extended profile field name. For each different site you will need to do that line.

    echo '<div class="member-social">'; All this does is start a div with a class of member-social so you can box all the different icons in one place.

    The below code is optional but may be important if you want to prefix the icons with something.

    if($fb_info||$google_info||$twitch_info||$twitter_info){
    			echo 'My Social: ';
    		}

    This asks if any of the variables have data in them. If so then prefix the icons with “My Social: ” if not then show nothing. You will need to add your new variables each seperated with the horizontal bars as shown. So that it will show as long as any of them have one field filled in.

    if ($fb_info) {
    		?>
    		<span class="fb-info"><a href="https://www.facebook.com/<?php echo $fb_info; ?>"  title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/facebook.png" /></a></span>
    	<?php
    	}
    		?>

    This asks if $fb_info has any data then show the icon.

    The Below code can differ based on your preference.
    <span class="fb-info"><a href="https://www.facebook.com/<?php echo $fb_info; ?>" title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name/images/facebook.png" /></a></span>
    I wrapped each icon in its own span HTML tag. Then create the link.
    <a href="https://www.facebook.com/<?php echo $fb_info; ?>" title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name/images/facebook.png" /></a>
    In this example I am linking to facebook.com with the $fb_info data. Here is where the preference comes in if you want them to just put their whole social profile link in the profile field then all it needs to look like is
    <a href="<?php echo $fb_info; ?>" title="My Facebook" target="_blank"><img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name/images/facebook.png" /></a>
    the title=”put_hover_text_here” is what you want to show when hovering over the link the target= “_blank” makes the link open in a new tab.

    <img src="<?php bloginfo('wpurl'); ?>/wp-content/themes/your_theme_name_here/images/facebook.png" />
    This is where you placed the image of the icon. Currently this will point to the images folder of your theme and the image name of facebook.png as long as you updated the theme name.

    <?php
    	}
    	echo '</div>';
    }
    add_filter( 'bp_before_member_header_meta', 'member_social_extend' ); ?>

    this closes the if statement and closes the div that I made earlier. Then adds the function to the buddypress profile.

    here is an image of the results:
    social Results

    The Twitch icon I made myself but the others are free here http://icondock.com/free/vector-social-media-icons along with many more social sites. I used the 32px images.

    If you have any questions or need some extra explanation of this or want to add these social icons to the group header,or even add them to a users authorbox(this will require you to change your themes code) just PM Me or reply. I hope this helps anyone else looking to do something similar Note this will only send people to their respective social media profiles not allow them to follow or friend straight from your site.

Viewing 3 replies - 1 through 3 (of 3 total)
Skip to toolbar