Lessons in PHP

by ts8richardson

This post comes after a victory in some php coding to work with making the ‘points’ feature useful in Ushare.

The team decided the rank a user has should be displayed in their Cubepoints sidebar, profile page, under the site logo and the Avatar bubble. Also, the site logo should change depending on their rank, and their rank image should be displayed in the sidebar.

This has been a little tricky for my poor coding skills, but I got there in the end.

1. Changing the logo

After some searching the WordPress site and Googling, I found some examples of displaying Cubepionts content.

This thread got me started on how to work with Cubepoints in templates: http://buddypress.org/support/topic/how-can-i-display-the-cubepoints-rank-of-a-user-in-the-singe-page-of-a-group-forum/

I started with working on getting the points of the currently logged in user and displaying those points. Once I could do that, I could build some logic. If a user has points between X and Y, display this logo. If a user has more points that Y, display a different logo.

The code is:

$current_user = cp_currentUser();
$points = cp_getPoints($current_user);
$rank = cp_module_ranks_getRank($current_user);

if ($points > 0 && $points < 51) {
?><img src=”<?php echo home_url(); ?>/wp-content/themes/neuron/images/glasses.png” height=”70″><?php
} elseif ($points > 50 && $points < 101) {
?><img src=”<?php echo home_url(); ?>/wp-content/themes/neuron/images/baseballCap.png” height=”70″><?php
} elseif ($points > 100 && $points < 201) {
?><img src=”<?php echo home_url(); ?>/wp-content/themes/neuron/images/mortar.png” height=”70″><?php
} elseif ($points > 200 && $points < 501) {
?><img src=”<?php echo home_url(); ?>/wp-content/themes/neuron/images/hatAndMoustache.png” height=”70″><?php
} elseif ($points > 500) {
?><img src=”<?php echo home_url(); ?>/wp-content/themes/neuron/images/crown.png” height=”70″><?php
} else {
?><img src=”<?php echo home_url(); ?>/wp-content/themes/neuron/images/ushare-logo.png” height=”70″><?php
}

This code does the job for now but it’s not going to be sustainable. It manually sets the windows for changing the images and doesn’t directly correspond to any ranks. Ideally, the plugin would be enhanced by adding another Cubepoints Field for the image. A user could upload images for each rank in the admin panel at the point where the administrator chooses rank names and point thresholds. Then you would call the rank image as well as the rank in the template. This coding was a little beyond my skills, but I’m happy to get to the point where I can swap out images for different thresholds of ranks.

 

The sentence under the logo was easy at this point because all the variables had already been stored. It was just a matter of printing them.

 

2. The Avatar Bubble
The avatar bubble was a bit harder. Getting the points of the currently logged in user wasn’t too hard. Cubepoints just uses “cp_currentUser()” to get the ID of the current user. But this plugin requires you to find out the user ID of the avatar you have hovered over. Searching through the code to find out how the plugin did this and trying a few things resulted in a few fatal errors. It wasn’t too difficult in the end- the plugin had already pulled that data and stored it- it was just a matter of reading the code and trying to find it. A bit more Googling and this thread: http://wordpress.org/support/topic/plugin-cubepoints-displaying-points-in-comments, helped me out.

 

3. The Profile Page

The hardest part about this was finding the code that prints the points and rank on the profile page. Once again, I needed to find out how to collect the user id of the profile- different to the avatar bubble, and work with it. I couldn’t quite get to the point of printing the users rank image. This is where it would have been beneficial for it to be stored in its own variable. I might see if I can work on that before it’s done!