Getting Started With BuddyPress

Best of Wptuts 2011: Every week through January, we're going to revisit some of our favorite posts from 2011. With the recent popularity explosion of BuddyPress and a wide range of new BuddyPress themes available at ThemeForest, it makes good sense to kick off this 2011 recap with Adam Murray's incredible BuddyPress series!

We've all worked hard to establish that Wordpress is a great content management solution, but what about it's social networking aspect? Today, I want to walk you through the basics of using BuddyPress, a social networking system built on top of the Wordpress platform. Learning how to use this will add a really valuable item to your field of knowledge, especially as clients want social integration more and more every day.

I know personally that I have seen a real surge in the amount of clients that are wanting social networking directly on their site. While there are many ways to accomplish this, today I want to walk you through using the plugin BuddyPress. Built on top of the WordPress platform, it bills itself as - social networking in a box. And that is precisely what it is. Now let's dig into what exactly that means and how we can use it.

What We Will Do

In this tutorial, I will walk you from installing and configuring BuddyPress to enhancing it's basic functionality through the use of plugins, themes, and hacks. By the end of this tutorial, you should be able to understand how to:

Install Wordpress (for the beginners in the audience!)
Install and configure BuddyPress
Identify the key elements of BuddyPress
Edit the BuddyPress default theme
Install new plugins and themes

Step 1 Install Wordpress

If an error appears, don't worry! The issue will likely be in your wp-config.php file. Go there and figure out which setting above is incorrect.

If you already have Wordpress installed, then go ahead and skip to Step 2. If you don't know how to install Wordpress or you want a refresher, then keep reading!

First, be sure to download the latest version of Wordpress here. After that, you get to do the famous 5-minute Wordpress install, which is also outlined here.

From within your server's phpMYadmin, create a new database named "wordpress". If your server automatically creates database names, then notice the name of the database where you want to install Wordpress. You can add a new database on the very first page that comes up when you click on the phpMYadmin link.
In the wordpress folder, duplicate the wp-config-sample.php file, and rename it to wp-config.php.
Open wp-config.php in an editor, and starting at line 17, you want to edit the following with your configuration found on your local server's start page:
```
		// ** MySQL settings - You can get this info from your web host ** //
		/** The name of the database for WordPress */
		define('DB_NAME', 'database_name_here');

		/** MySQL database username */
		define('DB_USER', 'username_here');

		/** MySQL database password */
		define('DB_PASSWORD', 'password_here');

		/** MySQL hostname */
		define('DB_HOST', 'localhost');
```
Obviously, we named our database "wordpress" in step 1, so that goes there. If there was a custom database name created, then enter that name. Also, you want to take note of the username and password that was created by your server, and enter that in the appropriate spaces above. Some webhosts create these when you create a new database via the control panel, while some may require you to create these directly in phpMYadmin. To do that, click on the database that you've created, and then click on the "users" tab. From there, create a user with all privileges selected and give the user a password. This username and password can then be included in your wp-config.php file.

With wp-config.php still open, we also want to go ahead and get our unique authentication keys. To do that, visit https://api.wordpress.org/secret-key/1.1/salt/ and use the code that displays to replace lines 45-52:

	define('AUTH_KEY',         'put your unique phrase here');
		define('SECURE_AUTH_KEY',  'put your unique phrase here');
		define('LOGGED_IN_KEY',    'put your unique phrase here');
		define('NONCE_KEY',        'put your unique phrase here');
		define('AUTH_SALT',        'put your unique phrase here');
		define('SECURE_AUTH_SALT', 'put your unique phrase here');
		define('LOGGED_IN_SALT',   'put your unique phrase here');
		define('NONCE_SALT',       'put your unique phrase here');

Save and close wp-config.php.
Unzip the Wordpress folder you downloaded and copy it's contents to your site's root folder via FTP if you want Wordpress to control your root URL. Otherwise, if you are wanting Wordpress to run in a subdirectory, upload the entire folder named "wordpress", and rename it to the subdirectory name you want - like "blog".The URL will then be http://yoursite.com/blog.
Begin the installation process by visiting wp-admin/install.php.
If your wp-config.php settings are correct, then you will be prompted to enter the blog name, your email, and username info.

Now, Wordpress should be active and ready on your server. You can log in at http://yoursite.com/wp-login.php.

Step 2 Installing BuddyPress

The great thing about installing BuddyPress is that it is as easy as installing a plugin. If you've never done that with Wordpress, there are two ways:

Log in to your Wordpress Dashboard, look at the left side menu, and go to "Plugins -> Add New". There, search for BuddyPress, and install. That's it for the install via the Wordpress plugin installer.

You can also install the Buddypress plugin via FTP. First, download the latest version of BuddyPress here. After you download it, unzip the folder, and upload it to your wp-contents/plugins folder via FTP. Log in to your Wordpress Dashboard and go to "Plugins -> Plugins". Once there, activate the BuddyPress plugin and you're done!

Once BuddyPress is activated, you will notice a new BuddyPress menu item. Before we start configuring BuddyPress, I want to look at the key elements that it provides.

Step 2 Key Elements of BuddyPress

Members and Friends

BuddyPress uses and extends Wordpress' traditional user system. In BuddyPress, users are called "Members". Members can be friends with other members, follow other members' activity feeds via RSS and email, and participate in groups, among other things. Members can have extended profiles and personalized avatars, and can even be listed in a global forum directory on your site. These settings can also be changed in the "General Settings" of BuddyPress.

Extended Profiles

In contrast with Wordpress' standard user registration, BuddyPress allows for completely custom profile fields so you can tailor a user's profile to what you want and what the site is about. These fields are managed under "Profile Field Setup".

Groups

Groups are a great way to have members participate on the site. They are built around the bbPress forum structure and have three levels: public, private, or hidden.

Public group:
- Any site member can join the group.
- The group will be listed in the groups directory and in search results.
- Group content and activity will be visible to any site member.
Private group:
- Only users who request membership and are accepted can join the group.
- The group will be listed in the groups directory and in search results.
- Group content and activity will only be visible to members of the group.
Hidden group:
- Only users who are invited can join the group.
- The group will not be listed in the groups directory or search results.
- Group content and activity will only be visible to members of the group.

Groups can have their own moderators, who are set by admins, and members can easily set the amount of group activity notification that they receive. The group admin panel looks like this:

Messaging

Private messaging will allow your users to talk to each other directly, and in private. Not just limited to one on one discussions, your users can send messages to multiple recipients. Again, in addition to private messaging, admins and moderators can regularly communicate with members and groups. Plugins can also greatly increase the communication and messaging in you BuddyPress install.

Activity Streams

Like a status update or tweet, members can update their own activity streams. These can be followed by other members via RSS or email, and other members can be mentioned via the @ symbol. In addition, streams can be become favorites, commented on, and replied to.

Discussion Forums

Included in BuddyPress is bbPress, which allows for the creation of discussion forums. These can be extended through plugins or by editing the bbPress code located in wp-content/plugins/buddypress/bp-forums/bbpress/.

Blogs

BuddyPress also allows for the creation of Wordpress blogs for members. To activate this feature, you must also be using MultiSite in addition to BuddyPress. While this is outside the scope of this tutorial, BuddyPress and MultiPress are extremely friendly and using them hand in hand can be a great option for many sites.

Step 3 Configuring BuddyPress' Admin Settings

Before digging into the BuddyPress configuration, there are a couple of Wordpress settings that are important to note:

Make sure that under "Settings -> General" you check the box for "Anyone can register". Otherwise, new users will not be able to register an account. Once that is activated, in the default theme a link encouraging new user registration will appear in the right sidebar:
Next, you want to make sure that your permalinks are changed from the default. For most users, this will not be an issue. Here is a quick fix if your permalinks are still set to the default:
- Navigate to "Settings -> Permalinks"
- Select the "Custom Structure" radio button and enter
  - /%category%/%postname%/

After you have edited those core Wordpress settings, it is time to take a look at BuddyPress' settings. When you click on the new BuddyPress menu item, four sub items will appear:

General Settings
Component Setup
Forums Setup
Profile Field Setup

You will want to look at these and adjust them based on your social networking needs. They are very specific, and address everything from registration fields to forum support. I want to go over them more in depth for those of you who may be timid or for those of you who want to know more about the specifics.

General Settings

These settings are more specific that "Component Setup", and address individual aspects of BuddyPress and how BuddyPress and your Wordpress install interact. The specific settings are:

Base profile group name
Full Name field name
Disable BuddyPress to WordPress profile syncing?
Hide admin bar for logged out users?
Disable avatar uploads? (Gravatars will still work)
Disable user account deletion?
Disable global forum directory?
Disable activity stream commenting on blog and forum posts?
Default User Avatar

Component Setup

In component setup, you can enable and disable the key components of BuddyPress that I talked about earlier. More specifically, you can enable or disable:

Activity Streams
bbPress Forums
Blog Tracking (for MultiSite installs)
Friends
Groups
Private Messaging
Extended Profiles

Forums Setup

For a forum system, BuddyPress uses a basic form of bbPress. To install the forums initially, you will need to click on the button for "Set up a new bbPress installation".

Once you click this, you will be prompted to complete the installation. Click to confirm that, and you should receive a message that says: "All done! Configuration settings have been saved to the file bb-config.php in the root of your WordPress install". In addition to that file being created in the root, bbPress will also create a new database table. All of these settings can be seen in bb-config.php. I want to help walk you through the important parts, which are similar to th wp-config.php file that you have edited to install Wordpress.

First, we want to open up bb-config.php and look around. The first lines tell us the same database configuration information that is in the wp-config.php file. Around line 32, you will see:

	/**#@+
 * Authentication Unique Keys.
 *
 * Change these to different unique phrases!
 * You can generate these using the {@link https://api.wordpress.org/secret-key/1.1/bbpress/ WordPress.org secret-key service}
 *
 * @since 1.0
 */
define( 'BB_AUTH_KEY', 'put your unique phrase here' );
define( 'BB_SECURE_AUTH_KEY', 'put your unique phrase here' );
define( 'BB_LOGGED_IN_KEY', 'put your unique phrase here' );
define( 'BB_NONCE_KEY', 'put your unique phrase here' );
/**#@-*/

To get those Authentication Unique Keys, visit: https://api.wordpress.org/secret-key/1.1/bbpress/. Copy and paste the unique code that comes up and replace the 4 lines that start with the word "define".

For those of you who may be working with a forum that is primarily in another language, look at the code that starts on line 55:

	/**
 * bbPress Localized Language, defaults to English.
 *
 * Change this to localize bbPress. A corresponding MO file for the chosen
 * language must be installed to a directory called "my-languages" in the root
 * directory of bbPress. For example, install de.mo to "my-languages" and set
 * BB_LANG to 'de' to enable German language support.
 */
define( 'BB_LANG', '' );

Now, the instructions above that describe where to put the MO file are incorrect. Remember, we are not just using bbPress. We are using a version of bbPress that is integrated into BuddyPress. To find the root bbPress folder you will need to navigate to wp-content/plugins/buddypress/bp-forums/bbpress/. There, you can create a new folder named "my-languages", and drop your language files in. Then, you would edit bb-config.php accordingly.

Profile Field Setup

This is where you can add custom profile fields to reflect the site that you are creating. At the very basic level, users are only required to enter a name for their profile. This is highlighted below:

As you can see, they are required to enter the same standard Wordpress login credentials: username, e-mail address, and password. However, remember, we are creating a social network so we may want more profile fields. When you think about Facebook, the profile fields there include:

Current City
Hometown
Gender
Birthdate
Interests and Hobbies
Education and Work Experience
and many others.

These fields are all searchable, and really add to a user's experience as they are on your site interacting with others. This is not even to mention the possibilities for advertising (I know I've used Facebook Ads and targeted users based on profile fields) and other special functions.

Step 4 Configuring BuddyPress' Front-End Settings

While there are many settings that can be changed in the admin, you will find it necessary to update many things from the front-end of your site. I found it very frustrating the first time that I used BuddyPress, because I couldn't find out where to manage groups or many other tasks that were so important. So to alleviate that frustration for you, here are some important elements to configure and work with on the front-end when setting up your first BuddyPress site.

Activating the BuddyPress Default Theme

First and foremost, you will need to activate the BuddyPress default theme, or another BuddyPress compatible theme. This can be done by visiting "Appearance -> Themes", and activating it.After that, you will want to visit your site to get a feel for the theme. You will immediately notice that the default theme adds new navigation elements such as: activity, members, groups, and forums. With your pages that are listed by default, this navigation can get very full, so later I will outline for you how to edit this.

Using the Admin Bar

After you've activated your BuddyPress compatible theme, visit the home page and look at your admin bar.

Hover over the menu items and look at the drop-down elements. By using the admin bar, you will be able to:

track activity streams
send and receive messages
view and edit your profile
manage friends and requests
manage groups and requests
and view notifications.

Setting Up Groups

If you are using the discussion forums and you have not disabled groups in BuddyPress' "Component Setup" then you will need to create groups. One of the main flaws with BuddyPress that I have found is that, by default anyone can create a group, so I will also teach you how to disable that, which is a matter of simply commenting out some PHP.

To create a group you will need to:

Click on the "Groups" navigation tab in your header.
Click on "Create a Group".
Enter a group name and description.
Click on "Create Group and Continue".
Select whether or not you would like to enable the discussion forum, and what level the group will be: public, private, or hidden. These are described above. Go to the next step.
Next, upload a group avatar or go with the default.
Finally, invite connections or friends to the group. Admins can include any member.

Once you click "Finish", you will be taken to the group home page, which will be located at http://yoursite.com/groups/your-group-name/. From there, as the group admin you can post updates, manage the forum, and manage the group's members.

Congratulations on configuring BuddyPress, activating a theme, and creating your first group! Instead of stopping there, let's go a little bit deeper and let me share some practical things I have learned while using BuddyPress.

Step 5 Working with BuddyPress Plugins and Themes

Adding plugins and themes to BuddyPress works exactly like adding theme to Wordpress. Just make sure prior to installing either that they are BuddyPress compatible, as many plugins and themes are not.

To add a theme, add the theme folder to wp-content/themes/ via the admin dashboard at "Appearance -> Themes" or via FTP.
To add a new plugin, add the plugin folder to wp-content/plugins/ via the admin dashboard at "Plugins -> Add New" or via FTP.

Working with the BuddyPress Default Theme

As opposed to themes that you add later, the BuddyPress default theme is not located in the wp-content/themes folder. It is located in wp-content/plugins/buddypress/bp-themes/ and it is labeled bp-default. This is where you can edit the style and templates for the default theme. I mentioned a couple of shortcomings (in my opinion) that I want to walk you through correcting.

Editing the Default Header Navigation

By default, the header is set to display all new pages in addition to the BuddyPress items. If you end up adding multiple pages, this can quickly lead to a very full navigation menu. Furthermore, it may not end up looking well. To edit this to display only the elements that you want, let's add a custom menu via the functions.php.

First, open up the default BuddyPress theme's functions.php file. This can be found in wp-content/plugins/bp-themes/bp-default. Take a look at the first few lines of code:

	// Stop the theme from killing WordPress if BuddyPress is not enabled.
if ( !class_exists( 'BP_Core_User' ) )
	return false;

Underneath that, we want to enter our custom menu function.

//Register Custom Menu

function register_bp_default_menus() {
  register_nav_menus(
    array( 'header-menu' => ( 'Header Menu' ))
  );
}

add_action( 'init', 'register_bp_default_menus' );

Here we create the function for the new header menu, and name it appropriately. Then, we add the action that will create the new custom menu. Now, in the same bp-default folder, we open up header.php so that we can put this new custom menu next to the default BuddyPress elements. Scroll down to line 46, and you will see the code for that navigation menu.

	<ul id="nav">
				<li<?php if ( bp_is_front_page() ) : ?> class="selected"<?php endif; ?>>
					<a href="<?php echo site_url() ?>" title="<?php _e( 'Home', 'buddypress' ) ?>"><?php _e( 'Home', 'buddypress' ) ?></a>
				</li>

				<?php if ( 'activity' != bp_dtheme_page_on_front() && bp_is_active( 'activity' ) ) : ?>
					<li<?php if ( bp_is_page( BP_ACTIVITY_SLUG ) ) : ?> class="selected"<?php endif; ?>>
						<a href="<?php echo site_url() ?>/<?php echo BP_ACTIVITY_SLUG ?>/" title="<?php _e( 'Activity', 'buddypress' ) ?>"><?php _e( 'Activity', 'buddypress' ) ?></a>
					</li>
				<?php endif; ?>

				<li<?php if ( bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ) : ?> class="selected"<?php endif; ?>>
					<a href="<?php echo site_url() ?>/<?php echo BP_MEMBERS_SLUG ?>/" title="<?php _e( 'Members', 'buddypress' ) ?>"><?php _e( 'Members', 'buddypress' ) ?></a>
				</li>

				<?php if ( bp_is_active( 'groups' ) ) : ?>
					<li<?php if ( bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ) : ?> class="selected"<?php endif; ?>>
						<a href="<?php echo site_url() ?>/<?php echo BP_GROUPS_SLUG ?>/" title="<?php _e( 'Groups', 'buddypress' ) ?>"><?php _e( 'Groups', 'buddypress' ) ?></a>
					</li>

					<?php if ( bp_is_active( 'forums' ) && ( function_exists( 'bp_forums_is_installed_correctly' ) && !(int) bp_get_option( 'bp-disable-forum-directory' ) ) && bp_forums_is_installed_correctly() ) : ?>
						<li<?php if ( bp_is_page( BP_FORUMS_SLUG ) ) : ?> class="selected"<?php endif; ?>>
							<a href="<?php echo site_url() ?>/<?php echo BP_FORUMS_SLUG ?>/" title="<?php _e( 'Forums', 'buddypress' ) ?>"><?php _e( 'Forums', 'buddypress' ) ?></a>
						</li>
					<?php endif; ?>
				<?php endif; ?>

				<?php if ( bp_is_active( 'blogs' ) && bp_core_is_multisite() ) : ?>
					<li<?php if ( bp_is_page( BP_BLOGS_SLUG ) ) : ?> class="selected"<?php endif; ?>>
						<a href="<?php echo site_url() ?>/<?php echo BP_BLOGS_SLUG ?>/" title="<?php _e( 'Blogs', 'buddypress' ) ?>"><?php _e( 'Blogs', 'buddypress' ) ?></a>
					</li>
				<?php endif; ?>

				<?php wp_list_pages( 'title_li=&depth=1&exclude=' . bp_dtheme_page_on_front() ); ?>

				<?php do_action( 'bp_nav_items' ); ?>
			</ul><!-- #nav -->

Line 47-77 deal with the default BuddyPress items. We are concerned with line 79, which allows for new pages to be displayed.

	<?php wp_list_pages( 'title_li=&depth=1&exclude=' . bp_dtheme_page_on_front() ); ?>

In order to display our custom menu there, we want to replace that line with the following:

	&It;?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => false, ) ); ?>

This inserts the header menu that we created in our functions.php file, and also removes the <div> wrappers that accompany custom menus. However, if you leave it at this, you will end up with two unordered lists, as the custom menu still has the standard <ul> wrappers. To do away with that, we navigate back to our functions.php, and use preg_replace to replace those wrappers.

Below

add_action( 'init', 'register_bp_default_menus' );

add:

	// remove ul wp_nav_menu
function remove_ul ( $menu ){
    return preg_replace( array( '#^[^>]*>#', '#$#' ), '', $menu );
}
add_filter( 'wp_nav_menu', 'remove_ul' );

Add a couple of menu items to your custom menu, and enjoy! You have just added a layer of customization to BuddyPress' default theme.

Disabling the Ability for Anyone to Create a Group

To disable the "Create a Group" button, within the bp-default template, navigate to groups/index.php. Scroll down to line 7, which looks like this:

	<h3><?php _e( 'Groups Directory', 'buddypress' ) ?><?php if ( is_user_logged_in() ) : ?>  <a class="button" href="<?php echo bp_get_root_domain() . '/' . BP_GROUPS_SLUG . '/create/' ?>"><?php _e( 'Create a Group', 'buddypress' ) ?></a><?php endif; ?></h3>

I don't want to comment out the entire link for group creation, but I may want to limit it to myself as an admin. To do that, I simply replace

	<?php if ( is_user_logged_in() ) : ?>  <a class="button" href="<?php echo bp_get_root_domain() . '/' . BP_GROUPS_SLUG . '/create/' ?>"><?php _e( 'Create a Group', 'buddypress' ) ?></a><?php endif; ?>

with

	<?php if ( is_super_admin() ) : ?>  <a class="button" href="<?php echo bp_get_root_domain() . '/' . BP_GROUPS_SLUG . '/create/' ?>"><?php _e( 'Create a Group', 'buddypress' ) ?></a><?php endif; ?>

This ensures that only super admins can create new groups. All other users are met with a group directory, but not the button to create a new group.

A Few BuddyPress Plugins

I wanted to include a list of plugins that I have found to be invaluable as I have used BuddyPress to manage social networking sites. I am sure that you may have others, so I would love to hear about what has worked for you and how. Here's my list - in no particular order:

BP Group Documents - This plugin creates a document storage area within each group. Great for passing along resources to groups.
BuddyPress Group Email Subscription - This plugin allows people to receive email notifications of group activity, especially forum posts. Weekly or daily digests available. Each user can choose how they want to subscribe to their groups.
Welcome Pack - This plugin lets you automatically send registered uses a friend or group invitation, and a welcome message. It can also redirect them to a start page. You can also customise the default emails sent by BuddyPress to ensure that they match the brand and tone of your site.
BuddyPress Moderation - This plugin adds links/buttons to flag inappropriate content and gives a convenient way for moderators to view reports and take actions.
BuddyPress Forum Topic Mover - This plugin allows forum moderators and system administrators to move topics placed under the incorrect group in BuddyPress.
BuddyPress Announce Group - This plugin allows you to change any BuddyPress group into an announce-only group, where only admins and moderators can post.
s2member - If you are looking to start a membership forum, then s2member is a great plugin for you. Unlike Wishlist (which is also not free), s2member integrates with BuddyPress and Multisite. It does this by restricting URLs for certain levels of user. It also allows for custom login and registration pages, and has full documentation and a tutorial library for first time users.

There are many other plugins that allow for custom group front pages, chat features, and more. Be sure to visit the plugin repository here to browse through the plugins that are out there, and to find ones that offer the functionality that your site needs.

Conclusion

BuddyPress is a great solution if you are looking to build a social networking site on top of the Wordpress platform. If you are already familiar with Wordpress and how to develop with it, then using BuddyPress will come easily and naturally. In addition to that, you can easily add plugins and themes that are compatible to create exactly what you are looking for. I would love to hear of others' experiences with BuddyPress, and what plugins and configurations work for you.

Thanks for reading and I hope I've helped you learn something new about BuddyPress!

HIGHLIGHTS OF THE DAY