Posted by Simon Goodchild  at January 11th, 2012

This is the second part of a set of tutorials to show how to create a profile page of your own design. It will use the ever-expanding PHP classes that are provided with WP Symposium. Please read part 1 first.

I am sorry that I probably won’t have enough hours in the day to offer guaranteed support, but there is a dedicated forum area where I will participate as often as possible.

This tutorial requires WPS version 12.11. Please refer to the wps_profile_page_4.php file when following below.

To use the file as a page template, rename wps_profile_page_4.php which is in the tutorials/profile_page_template folder in the wp-symposium plugin folder to wps_profile_page.php and copy it to your theme folder. If using twentyeleven for example, copy it into that folder. As discussed in a moment, you’ll also need to copy wps_profile_page.css into the same folder. The page you created in step 1 will then use the page template that ties in with this part of the tutorial.

Try it, take a look – it’s worth doing that before reading the following so you can see where I’m going!

To review, we have displayed a basic set of information on the profile page about the user. We are now going to get the page working for the current WPS member with profile information, avatar, display name, latest activity post and activity streams for your activity, friends activity and all activity. Gosh!

So, first off, we need to include all the classes. Remember, you may need to change the path for your server, although the following is for the default WordPress installation, so will probably be okay for most peeps.

require_once(ABSPATH.'wp-content/plugins/wp-symposium/class.wps.php');
require_once(ABSPATH.'wp-content/plugins/wp-symposium/class.wps_user.php');
require_once(ABSPATH.'wp-content/plugins/wp-symposium/class.wps_ui.php');

$wps = new wps();
$wps_user = new wps_user($wps->get_current_user_page());
$wps_ui = new wps_ui();

The order is important. The first class is wps() which has a number of general methods for WP Symposium. Our new object, $wps, will be an instance of this class.

With that declared first, we can create a user based on the user we are looking to view, allowing us to use the profile page for all members. We pass $wps->get_current_user_page() when creating the $wps_user object.

Finally, we are going to use the WPS UI class for certain elements, and so we create an instance of wps_ui() as $wps_ui.

Over-riding the profile page to your own

WP Symposium stores where the profile page is, as it is used throughout. The installation page will look for a page with symposium-profile shortcode and update it accordingly. We need to ensure that our new page is used instead, and so we can update the value dynamically:

$wps->set_profile_url('/aa-profile');

Important! This is setting the URL to my page, as referred to in part 1. Your URL, for your profile page, may be different – change it if so. In part 1 I created a page called “AA Profile” hence the URL above.

Finally, in preparing ourselves, I’m going to link to an external stylesheet – it keeps things tidy, and can be found in the tutorials folder. Again, I’ve hardcoded it, assuming it is copied into your current theme’s folder.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/wps_profile_page.css" />

This allows me to keep styles out of the PHP file, which helps with the tutorial.

This might be a good time to show you the layout I’ve “designed” (ahem!) that I’m aiming to provide (click to zoom):

I appreciate it won’t win awards, but it’s significantly different to the default WP Symposium layout to prove a point!

So the <DIV>’s that I’ll need, along with the stylesheet, are as follows:

<div id="primary">
 <div id="content" role="main">
 <?php
 // Sidebar
 echo '<div id="my-sidebar">';
 echo '<div id="my-profile-box">';
    // Info on the member will appear here
 echo '</div>';
 echo '</div>';
 // The member's page "header"
 echo '<div id="my-header-div">';
    // The header information (name for example) here
 echo '</div>';
 // The content area
 echo '<div id="my-content" class="symposium-wrapper">';
    // The main content area
 echo '</div>';
 ?>
 </div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>

So long as you can appreciate DIV layout and CSS you should see what’s going on here, sorry but I don’t have the time or space to offer a tutorial on HTML layout. If you don’t understand, you can probably learn by playing around with the final PHP and CSS files.

So with the layout sorted out, let’s get some content on there! :)

Rather than duplicate all the code and fill up this page, I’m going to highlight where the WPS classes are used, and let you review wps_profile_page_4.php to see how it pins into the layout above.

$wps_user->get_avatar(204) will display the members avatar with a width of 204 pixels.

The if ($wps_user->get_id() != $current_user->ID) { condition checks to see if the member that we are displaying is different to the currently logged in user.

if ($wps_user->is_friend()) { is used to see of the member is a friend of the current user.

if ($wps_user->is_pending_friend()) { tests to see if a friendship request has been made, but not yet accepted.

Now we start to use some of the methods from wps_ui() to display WPS elements. So in a slightly different order to in the code:

Displaying the add as a friend text box

$wps_ui->friendship_add($wps_user->get_id(), "Type a message, hit return!", "Request sent.", "my-input-box");

We pass four parameters here, with only the first being mandatory:

1. The ID of the member (not the currently logged in user, the member whose page we are looking at)
2. The default prompt in the input box
3. The text displayed after a request has been sent
4. A class so I can control the CSS of the input box

I’m not showing the button, but there is a related method called friendship_add_button, see the WPS Wiki for more info on parameters.

$wps_ui->friendship_cancel($wps_user->get_id(), 'Cancel', 'Cancelled!', 'my-submit-button');

This is a similar method, but shows the Cancel button if a friendship has been made, but not yet accepted or declined.

The Poke(tm) button

$wps_ui->poke_button()  will insert the Poke (Facebook trademark) button onto the page.

I’m using the value as set in the back-end, it’s a constant. You could pass any text here, but remember you can’t use trademarked words like Poke or Nudge. I also pass an optional class so I can control the style.

So that shows an avatar, friendship status (or relevant input boxes/buttons) and a Poke button (I’ve called mine Wink!).

Showing the personal information

$wps_user->is_permitted(‘personal’) is used, and returns a boolean value, set to true if the current logged in user is allows to see the member’s personal information (Everyone, Friends Only, Public).

If permitted, location information and date of birth is displayed using the following:

$wps_user->get_city()
$wps_user->get_dob_day()
$wps_user->get_dob_month()
$wps_user->get_dob_year()

Also, a WPS function is used to format the output of the month, displaying a month as text instead of the number:

wps_get_monthname()

Profile Extended Fields

I decided I wanted to show the extended fields on the profile page. $wps_user->get_extended() will return an array of the extended information, in order as per the order field, with the following fields:

• name: the name of the extended field
• value: the value stored
• type: Text, Textarea, List, or Checkbox
• order: the display order

Displaying the information is then fairly straightforward.

$extended = $wps_user->get_extended();
foreach ($extended as $row) {
  if ($row['type'] != 'Checkbox') {
     echo '<span class="my-info-label">'.stripslashes($row['name']).':</span> '.stripslashes($row['value']).'<br />';
  } else {
    echo $row['name'].'<br />';
  }
}

I check to see it’s a checkbox or not. If it is, I will just list the values that are selected. This would be useful if, for example, you gave members a list of things they were interested in, or games they played, or departments they worked in, and wanted to list them.

Listing friends

I also want to show the friends of the member, which is returned as an array from $wps_user->get_friends(). The array consists of:

• The ID of the friend (id)
• When they were list active (last_activity)

As can be seen by the code below, it’s easy to use this if you create a new instance of the wps_user() class for each of the friends, and then use methods you’ll now be familiar with.

$friends = $wps_user->get_friends();
if ($friends) {
  echo '<div id="my-friends-list">';
    echo '<div style="font-weight:bold; margin-bottom:6px;">Friends</div>';
    foreach ($friends AS $friend) {
      if ($friend['id']) {
        echo '<div class="my-friends-list-item">';
          $friend_user = new wps_user($friend['id']);
          echo '<div style="float:left;margin-right:6px">'.$friend_user->get_avatar(44).'</div>';
          echo $friend_user->get_profile_url().'<br />';
          echo '<span class="my-info-label">Active: '.symposium_time_ago($friend_user->get_last_activity()).'</span>';
        echo '</div>';
      }
    }
  echo '</div>';
} else {
  echo '<div id="my-friends-list">No friends</div>';
}

Within the loop for each of the friends, a new instance is created with

$friend_user = new wps_user($friend->id);

With this new object ($friend_user) we can then display the avatar, and all the same information from the class. Groovy! This is why we use classes.

There is one my function worth highlighting, as it’s turns the timestamp of the last_activity into something like “5 days ago”:

symposium_time_ago($friend_user->get_last_activity())

The header information

We are now using the same sort of class methods, and you will begin to recognise them. back to our $wps_user instance of the wps_user() class we can quickly display information using the following:

$wps_user->get_display_name()
$wps_user->get_latest_activity()
symposium_time_ago($wps_user->get_latest_activity_age())

Take a look at wps_profile_page_4.php to check out the code itself.

So this is what our page now looks like with the member information and header (click to zoom):

The content area

We are going to provide the means to view the member’s activity, member+friends activity and all activity – just like the activity menu items in WP Symposium. Awesome! And it’s going to be fully AJAX’d – more awesome!

The DIV for the content area must have a class of “symposium-wrapper” – very important! It is used by jQuery/javascript So something like this:

<div id="my-content" class="symposium-wrapper">

The menu itself will show three buttons (actually links) across the top of the activity, using the condition if ($wps_user->get_id() == $current_user->ID) { to tailor the “My Activity” button, dropping the “My” if the current user is not on their own page.

Other than that, the only really important thing to remember here, is to make sure the menu items have a class of “symposium_profile_menu”, and the id as shown menu for each of them.

Menu’s will be different on many sites, so a menu is not provided as a WPS class method or element to display. You can then use any menu you want, so long as the id of the activity options can be set, along with their class.

echo '<div id="my-menu">';
  if ($wps_user->get_id() == $current_user->ID) {
    echo '<div id="menu_wall" class="symposium_profile_menu">My Activity</div>';
  } else {
    echo '<div id="menu_wall" class="symposium_profile_menu">Activity</div>';
  }
  echo '<div id="menu_activity" class="symposium_profile_menu">Friends Activity</div>';
  echo '<div id="menu_all" class="symposium_profile_menu">All activity</div>';
echo '</div>';

Showing the “What’s up?” input box

Ok, so the menu shows. The following will display an input box where a status or activity post can be made.

if ($wps_user->get_id() == $current_user->ID) {
  $box = $wps_ui->whatsup("What's up?", "my-input-box"); // parameters are optional
  echo '<div style="clear:both;overflow:auto;margin:0px 0px 10px 10px;">';
  echo '<div style="float:left;margin-right:10px;">'.$box.'</div>';
  echo '</div>';
}

$wps_ui->whatsup(“What’s up?”, “my-input-box”) will return the input box, with the default text prompt set as a parameter, and the class to control style. The rest displays it.

The initial condition test ensures this is only shown on the profile page with it is the currently logged in user’s page!

So our page now looks like this (click to zoom):

Inserting the activity streams (with AJAX!)

This is easier than you would think, with the menu above with the correct id’s and class’s we just need to put in a place holder:

$wps_ui->profile_placeholder("wall", "my-placeholder");

Two optional paramaters are:

• the view: for now try wall, activity or all (equivalent mine, friends or all)
• the optional class. Worth looking at .my-placeholder in wps_profile_page.css to see what I’ve set it to, for layout purposes.

As if by magic (code actually), you can now switch between the three views, and via AJAX the content of the activity will update. Lovely jubbly!

The way this actually works is by putting content into the page that WPS then recognises and replaces it with WPS output.

Click the image below to view the page as at the end of this tutorial (part 2).

I would suggest that you take wps_profile_page_4.php, rename it to wps_profile_page.php, put it into your themes folder along with wps_profile_page.css and change the page template for your “AA Profile” page (or whatever you called it in part 1 of the tutorial) to see it working.

Then play with the file to change the layout, and experiment with the class methods, particularly the parameters.

Also play around adding your own styles, to make a truly wonderful profile page!

Next and final part of the tutorial will add more menu items to allow access to the other features, like updating your setting, avatar, and so on.

Discuss on the forum...