How to create a private online campus with BuddyPress (2nd part)

7 September 2011 by Hèctor | 1 Comment

At the first part of this tutorial, we defined the kind of system we wanted to create. At this post we will see how we actually achieved it with the help of WordPress, BuddyPress, some plugins and a bit of coding.

Installation process

Step 1. Installation of WordPress and BuddyPress

This is an easy part of the process. All we are doing is a standard installation. In our case, we installed WordPress 3.2.1 on http://buddypress-campus.rubiomarin.com/.

Starting from this fresh install, we will install BuddyPress. As stated on http://buddypress.org/about/requirements/ we have these requirements for BuddyPress:

A working installation of WordPress version 3.2.1 or greater.
PHP version 5.3 or greater.
MySQL 4.1 or greater.
The mod_rewrite Apache module enabled.

Assuming you have got them all, it’s time to install BuddyPress. All you have to do is logging it as admin on your WordPress site, and then go to Plugins / Add New. You will then face a search form where you will type “BuddyPress” (without quotes) and click on the “Search plugins” button.

You will get then a list of plugins. Choose BuddyPress (in our case is version 1.2.10) and click on its “Install Now” link. This will download the install package, unpack it, and finally install the BuddyPress software. If everything has run smoothly, you will be offered a link to activate the plugin. Click it

BuddyPress themes

Once you activate the plugin, you will see a message asking you to activate a BuddyPress compatible theme to take advantage of all of the features. There are other BP-compatible themes out there but as we said above, we want to keep things easy as so we will use the bundled BuddyPress theme.

From the Dashboard, click on the Appearence / Themes link. Choose and activate the theme named “BuddyPress Default 1.2.9″.

Configuring BuddyPress

Once installed BuddyPress, we will see a new menu – you may guess its name – is available from the dashboard. So click it and choose General Settings. The only setting we changed from default values is “Hide admin bar for logged out users?”. Set that one to Yes.

Next step should be adding some extra meaningful fields to the member profiles. To do it, click on the “Profile Field Setup” link, also from the BuddyPress menu.

In our case, we decided to add four extra fields:

Type. A drop down select box to choose whether the member is a student or a teacher. We made it a required field.
E-mail. A textbox to fill in the e-mail of the member. Not required.
Web. A textbox to fill in the URL of a personal website of the member. Not required.
Short CV. A multi-line text box to place some bio notes.

We will modify other details later but it is enough by now. Let’s move on!

Step 2. Definition of categories, special pages and some test users

As we defined earlier, we want our campus to have a public and a private area. After reviewing several plugins to deal with this key requirement, no one gave us all the results we needed but having in mind the 80%-20% principle, we think the best approach was to start from the plugin BuddyPress Private Community. We will install it later.

This useful and flexible plugin provided us with the private BuddyPress community we needed, at least the basic one. Only logged in members are allowed view the social areas in full, and also, you can define the list of pages/areas which will be public or private.

Special pages

Now we have created the categories, it’s time to create a couple of pages that we will later need for our campus. You can create them from the Pages / Add New option from the Dashboard menu.

First page we need to create is one called “Access denied”, with a slug of “/access”. As you may guess, we will use as the page visitors will be redirected to when trying to access a private content. We have placed at this page the following text: “You have tried to access a content belonging to the private part of this campus. In order to access the requested content, please fill in the form with your user name and password.”
Second page we need is one named “Public info”, with a slug of “/info”, and it is the top page we will use to publish public content available for any visitor.

Actually, the slugs are the important detail here. Rename these two pages as you like but keep the slugs.

Users

We now have to define some WordPress users to test the system behaviour. You can create them from the Users / Add New option from the Dashboard menu.

In our case, we defined these users:

Teacher1. Author role.
Teacher2. Author role.
Student1. Subscriber role.
Student2. Contributor role.

Let’s move on

So once defined our strategy to filter out blog contents, we are ready to actually define private areas with the help of the BuddyPress Private Community and a bit of custom coding.

Step 3. Creation of private areas in our campus

To install the plugin, we will go again to Plugins / Add New. Fill in the search form with “BuddyPress Private Community” (without quotes) and click on the “Search plugins” button.

You will get then a list of plugins. Choose BuddyPress Private Community (in our case is version 0.6) and click on its “Install Now” link. This will download the install package, unpack it, and finally install the plugin. If everything has run smoothly, you will be offered a link to activate BuddyPress Private Community. Click it

Configuring BuddyPress Private Community

If you don’t feel like using an ftp client to deal with these code changes, we may suggest you to use a useful plugin named FileBrowser. You will be able to manage files and folder without leaving your WordPress backend.

Important: As stated on the installation notes of the plugin BuddyPress Private Community, we will need to create a config file, and place it on the path:

/wp-content/plugins/buddypress-private-community-config/mm-buddypress-private-community-config.php

Please note you MUST save that config file in a new directory (buddypress-private-community-config) in the main plugins folder.

To create that config file, we will use the example config file provided by the plugin. You can find if going to Plugins / Editor, and then choosing BuddyPress Private Community from the DropDown list. You will see the sample file named es mm-buddypress-private-community-config-EXAMPLE.php. Create a copy of that file and name the new file as mm-buddypress-private-community-config.php.

What do we need to change?

In our case, we will leave the plugin to work on the mode ::MODE_BLOCK_ALL_AND_ALLOW_SOME_URIS, meaning:

Blocks all pages/URIs apart from them listed in the ::$ALLOWED_URIS array from logged out users.
Widgets can be unblocked by adding their ids to the ::$ALLOWED_WIDGET_IDS (when ::$BLOCK_WIDGETS=TRUE)

Consequently, we need to let the plugin know what pages are to be allowed. This has to be done by changing the value of the variable placed at the line 59:

59 MM_BUDDYPRESS_PRIVATE_COMMUNITY::$ALLOWED_URIS = Array('/contacts', '/about', '/welcome');

According to the categories we defined, we should leave this variable as:

 PHP |   copy code | ?  
59 MM_BUDDYPRESS_PRIVATE_COMMUNITY::$ALLOWED_URIS = Array('', '/access', '/info', '/info/*', '/category/public', '/category/public/page/*', '/2011/*');

Let’s analyse the array:

” is needed for the home page.
‘/access’ is needed for our “Access denied” page.
‘/info’ and ‘/info/*’ are needed to make public all pages having ‘/info’ as their parent. And of course, also the page ‘/info’ itself.
‘/category/public’ and ‘/category/public/page/*’ are needed to make public all the URIs related to the category Public.
‘/2011/*’ is needed to make blog posts written on 2011 available to visitors. Remember to update it next year .

We know the ‘/2011/*’ is not an elegant approach at all, but it works. Please note our permalink settings are set to ‘Day and name’. You may need to change the array value according to your permalink settings.

Regarding posts, we will need further custom code on the post template. We will be back on this later.

Next variable we need to change is placed on line 75:

59 MM_BUDDYPRESS_PRIVATE_COMMUNITY::$REDIRECT_TO_URL    = site_url() . '/welcome';

According to the value we set on the array, we should leave this variable as:

 PHP |   copy code | ?  
59 MM_BUDDYPRESS_PRIVATE_COMMUNITY::$REDIRECT_TO_URL    = site_url() . '/access';

And that’s all we need to change on the config file.

Creating a BuddyPress child theme

As we said above, we were working with the BuddyPress Default 1.2.9 theme. We had to code a bit to deal with our special requirements, and so we created a child theme containing all the custom code.

At the time we are writing this tutorial, there is a recognised WordPress bug regarding edition of child themes whose parent themes are not at the default wp-content/themes/ directory. Hence, we will have to modify the contents of our child theme without the help of the theme editor available at Appearance / Editor.

But hey! We’ve got good news. We’re offering the child theme for you to upload and activate it as any other WordPress Theme.

Download Campus BuddyPress Child Theme

That zip file contains the following list of files:

blog.php
functions.php
header.php
home.php
page.php
search-loop.php
search-single.php
single.php
style.css

For you to know, this theme mainly deals with the different information displayed to visitors or members. You can check this info at its header.php file.

Also, and in case your “Public” and “General” categories don’t have the id values of 1 and 3, you will have to change these lines at the header.php file provided with the Campus BuddyPress Child Theme.

32     <?php
33       define("bpcampus_public_category_id",1);
34       define("bpcampus_general_category_id",3);
35       define("bpcampus_access_page_id",9);
36     ?>

As you may guess, the change you’d need to make is just replacing the id values.

Apart from this, we have added to our Campus theme a page template called Blog. This template uses the file blog.php and is useful to display posts belonging to one category defined with the help of the custom field “category”. We have also placed a couple of search-related files. We will come back to them later.

Testing it out

Now we are really close to see if our campus is working properly. So let’s add pages and posts and after that, we will use the different users we created before.

Regarding posts, just create some posts with different categories, public, general, etc.

Regarding pages, we already had one whose slug was “/info”. Let’s create another page called “Private page” or whatever. Once created, you should see all the pages on the navigation menu of our campus.

If you are logged in as a member – either teacher or student – you should be able to see the contents of all the pages. However, if you are just a visitor, trying to access the so-called “Private page” should redirect you to the access denied page.

Step 4. Let’s create some groups in the campus

At the first part of our tutorial, we defined these requirements:

Members: A site-wide forum to publicly discuss with all the members.
Students: Group-wide forums to organise projects and exercises carried out by groups of students.
Teachers & students: Subject-wide forums to publicly discuss with students and other teachers of the subject.
Teachers: A private area for teachers to coordinate efforts and to deal with issues.

We can have these all requirements solved through BuddyPress Groups – and also forums if you think it may help you.

Depending on your privacy needs, in BuddyPress members can create three types of groups:

Public groups

Any site member can join this group.
This group will be listed in the groups directory and in search results.
Group content and activity will be visible to any site member.

Private groups

Only users who request membership and are accepted can join the group.
This 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 groups

Only users who are invited can join the group.
This 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.

So having that all in mind, our approach was:

To create a public group to have the site-wide forum to publicly discuss with all the members.
To create a hidden group to have the private area for teachers to coordinate efforts and to deal with issues. Remember to invite all the teachers.
To create a private group per subject, where teachers will play the role of moderators, and students are invited.
Let the students freely create their own groups whenever they need to organise projects and exercises.

Step 5. Handling documents in the campus

At this moment, we have left behind the biggest milestone of this tutorial, so it’s time to enjoy adding nice features such as handling documents in the campus. In our case, we decided to allowed our members to share documents on their user groups.

It’s time to install the ‘Group Documents‘ plugin. Again, all you have to do is going to Plugins / Add New. You will then face a search form where you will type “Group Documents” (without quotes) and click on the “Search plugins” button. Install and activate the plugin. In our case, version 0.3.5.

If you want to add categories for your documents, filter what kind of documents are allowed or not, filter types of users allowed to upload documents and so on, you will have to modify the settings of this plugin. You can do that from the Dashboard / BuddyPress / Group Documents option.

And that’s it. From now on, if you create a group on the campus, you will see there are the usual tabs – Home, Admin, Members, Send invites – along with a new one named Documents where all the members of the group will be able to handle documents.

Step 6. Having a site-wide search engine

The default search engine bundled with any WordPress just searches posts & pages, but leaves out BuddyPress members, groups and forums. So we needed a basic search covering these all as well.

To get this feature, we just used the approached explained by Brajesh Singh on his great post Creating The sitewide global/unified search Page for your Buddypress Theme.

We have already applied it to our child BuddyPress theme, so if you have downloaded it above, you are already done. Please note this search is based upon the search engine provided by BuddyPress. This code searches groups/forums by topics, not by its contents.

Step 7. Adding some final details

This step is not really important. In our campus, we wanted to avoid problems related to students leaving shared computers without logging out, so we decided to install a useful plugin named Inactivity Auto Sign Out Plugin. This plugin automatically logs out the user after a period of inactivity. The time period can be configured.

Of course, there is a last detail to update. Please remember to change the name of the site Ours was still “My Blog”.

And that’s all folks!

Thanks for reading this tutorial, and we hope you will find it useful. Your suggestions and comments are welcome!

rubiomarin

Freelance Web Developer & Designer