WordPress is quite possibly the most widely used open source CMS with thousands of free themes and plugins. Fans of the software have most likely heard of the infamous BuddyPress plugin for WordPress sites. You can extend the functionality to include user profile pages, private messaging, and even user discussion forums.

BuddyPress is almost a vast social networking library in itself, which just happens to run off the WordPress core. In this article we can take a peek at ten useful tricks for newly inducted BuddyPress users.

I will focus on some of the basic installation techniques while also including references to more detailed code snippets. This is an excellent guide for new users who are looking to play around in BuddyPress and see what it has to offer.

Before jumping right into the list, I’ll offer a brief overview explaining some of the features within BuddyPress. Many first time users get confused working with BuddyPress and bbPress forums. Allow me to clarify these ideas quickly.

Recommended Reading: 40+ Free Responsive WordPress Themes

Differences between BuddyPress and bbPress

BuddyPress was the first of these two being released for WordPress back in 2008. The plugin has always been open source, and it thrives on user contribution. You can learn more about BuddyPress’s core features on their About page.

What most people don’t realize is that BuddyPress actually comes packaged with bbPress. That means if you install BuddyPress into your website this will include all the same functionality as the stand-alone bbPress plugin. The development team is comprised much of the same people, and both of these plugins have been in development for a few years.

(Image credit: ernohannink)

In this guide I will be focusing mostly on BuddyPress functionality, but I also have some great tips for bbPress users. You can think of these features as one single package if that makes it easier.

BuddyPress doesn’t require the bbPress forums to run, as they are an optional setting. If you want to compare other differences check out this forum thread.

1. Install & Configure BuddyPress

For WordPress users who have never gone through the core process of using BuddyPress, then this article is for you. Adam Murray over at WPTuts+ has written an excellent series which focuses on installing and customizing BuddyPress for new users.

This walkthrough tutorial is the best way to learn the system without diving in alone by yourself. You can learn about the key features of BuddyPress and many of the various options inside the WordPress admin panel.

There are tons of resources and BP features to study, including private messaging, activity streams, user blogs, extended profiles, and a whole lot more.

Adam also discusses some deeper customizations like setting up groups and custom themes. BuddyPress has its own core files which can utilize alternate plugins and themes! Definitely some helpful knowledge for beginners.

2. Understanding bp-custom.php

WordPress developers are mostly familiar with the custom theme file functions.php. This allows you to copy and paste PHP code which changes settings in the WordPress core, without actually altering the core files. This system has been adopted in BuddyPress using a file named bp-custom.php.

The online documentation does an excellent job of explaining the file with some examples. Basically you create this file inside your plugins directory /wp-content/plugins/ and simply add all your codes. These will execute regardless of your current theme for WordPress and BuddyPress.

The function codes you write are tied into other functions placed in the core files. You can access these hooks by using filters and actions just like inside WordPress.

After enough time building inside BuddyPress you’ll begin to memorize the variable names and method calls. This is an excellent trick for customizing your forums without too much experience.

3. Developing BuddyPress Themes

This series of templating articles is split into three different sections, all written by Adam Murray who wrote our earlier introduction tutorial. Although there are probably other guides on theming BuddyPress I feel that Adam goes into a greater level of detail for beginners.

The tricks you can learn from this 3-part editorial are phenomenal, if you are just getting started. If you are already familiar developing WordPress themes then most of the code will look familiar.

There are similar functions you should call, such as the_content() and the_category(). But BuddyPress obviously has its own set of functions and methods for interacting with user profiles.

The content is broken down into loops which are usually PHP/SQL queries retrieving content from the database. You may think of these loops as some of the different pages inside BuddyPress.

These page loops could be referencing user profiles, group lists, member lists, forum topics, private messages, or anything similar. The concepts are all related to WordPress so if you already understand that domain of knowledge, theming for BuddyPress shouldn’t be too challenging.

Recommended Reading: A Guide To: WordPress Child Themes Development

4. Step-by-Step Guide to Custom bbPress Themes

Similar to BuddyPress theming you can also build your own custom bbPress themes. I found this online guide for bbPress theming in their documentation and it provides an excellent reference point.

The current guide is written for bbPress 2.0.2 themes and the most updated release as of this article is bbPress 2.2. However the topics are still applicable, and you can learn all of the basic ideas very quickly. Theming for bbPress is much simpler than BuddyPress since you are focusing solely on the forums areas (and possibly user profiles).

Another option which is mentioned in the documentation is to create a bbPress child theme. This will run off an already existing theme and only use your specific customizations in the template. Oftentimes this method is a lot easier so that you aren’t coding an entire theme layout from scratch.

Recommended Reading: Showcase Of Beautiful WordPress-Powered Websites

5. Update BuddyPress User Profile Links

When first installing BuddyPress you will notice that the typical user profile link actually goes to the WordPress dashboard. You may customize this inside the plugin’s settings page where you see “Logged In Links”.

The second anchor tag needs to be edited to match your custom members URL. By default BuddyPress follows the schema http://yoursite.com/members/username/ which you could update. But to get this displaying properly as a link, you want to change the second anchor to look something like this:

<a href="http://yoursite.com/members/%USERNAME%/">Profile</a>  

Source

6. Excluding Users from Member Directory List

There may be times where you wish to hide certain members from your BuddyPress public listings. This could include friend pages or even searching for members. Just a few ideas could be hiding admin accounts, moderators, or fake accounts you have created for testing new features.

I’ve copied over a code snippet which you may place in your bp-custom.php file. All you need to edit is the list of $excluded_user ID variables. This small hack comes courtesy of Brajesh Singh from his blog BuddyDev.

add_action('bp_ajax_querystring','bpdev_exclude_users',20,2);  function bpdev_exclude_users($qs=false,$object=false){   //list of users to exclude      $excluded_user='1,2,3';//comma separated ids of users whom you want to exclude      if($object!='members')//hide for members only   return $qs;      $args=wp_parse_args($qs);      //check if we are searching  or we are listing friends?, do not exclude in this case   if(!empty($args['user_id'])||!empty($args['search_terms']))   return $qs;      if(!empty($args['exclude']))   $args['exclude']=$args['exclude'].','.$excluded_user;   else   $args['exclude']=$excluded_user;      $qs=build_query($args);      return $qs;  }

Source

7. Custom Member Redirect for Registration Page

When your users are logged in and trying to access the registration page, BuddyPress will send them over to the members listing instead. This effect is caused by a small bit of code in the core registration file. However instead of hacking the core we can use a filter to redirect users onto a custom page instead.

Copy the following codes into your own bp-custom.php or functions.php in WordPress. It is generally better to segregate bbPress/BuddyPress codes away from your WordPress codes. But all of the PHP here is fairly straightforward, and all you need to customize is the $redirect_to variable.

function bbg_bp_loggedin_register_page_redirect_to( $redirect_to ) {      if ( bp_is_component_front_page( 'register' ) )          $redirect_to = bp_get_root_domain() . '/home';        return $redirect_to;  }  add_filter( 'bp_loggedin_register_page_redirect_to', 'bbg_bp_loggedin_register_page_redirect_to' );

Source

8. Reorder BuddyPress Default Profile Links

BuddyPress will set navigation menu positions for each link in your template. These links include ‘User Profile’, ‘Activity’, ‘Friends’, ‘Messages’, and other BuddyPress features. By creating your own custom action tied into bp_setup_nav you may edit these position values to rearrange the navigation links.

I found an excellent solution in this StackExchange thread which outlines how you can setup the position array values. I have copied over the basic code below; feel free to customize and edit these values to suit your own needs. This will run perfectly from your BuddyPress bp-custom.php file and from your WordPress theme’s functions.php, as well.

function bbg_change_profile_tab_order() {  global $bp;        $bp->bp_nav['profile']['position'] = 10;      $bp->bp_nav['activity']['position'] = 20;      $bp->bp_nav['blogs']['position'] = 30;      $bp->bp_nav['friends']['position'] = 40;      $bp->bp_nav['messages']['position'] = 50;      $bp->bp_nav['groups']['position'] = 60;      $bp->bp_nav['settings']['position'] = 70;  }  add_action('bp_setup_nav', 'bbg_change_profile_tab_order', 999 );

Source

9. Display User Total Posts & Topics Started

The bbPress forums are very generic from the beginning. This doesn’t mean you cannot customize your own styles, but it means you’ll be doing a lot of research and grunt coding work.

This code snippet will display each user’s total number of forum posts and forum threads started. This is a typical metric you find on forums all over the Web, so it is commonplace to expect these numbers on BuddyPress user profiles too.

I found this small bit of code in a blog post from 2009. The codes are very simple, pulling two unique SQL queries from the database depending on the current profile ID. Just locate bb_profile_data(); in your template and replace it with this:

<?php bb_profile_data(); ?>  <div id="user-stats">  <?php  	global $bb_table_prefix;  	$query1 = "SELECT COUNT(*) FROM ".$bb_table_prefix."posts WHERE poster_id = $user_id AND post_status = 0";  	$query2 = "SELECT COUNT(*) FROM ".$bb_table_prefix."posts WHERE poster_id = $user_id AND post_status = 0 AND post_position = 1";  	echo "Forum Posts: <b>".$bbdb->get_var($query1)."</b>   ";  	echo " Topics Started: <b>".$bbdb->get_var($query2)."</b>";  ?>  </div>  

Source

10. Override Default BuddyPress Avatars

Custom user avatars is a regular feature most developers expect within any CMS. WordPress allows this feature for authors and users, but it doesn’t transfer well into BuddyPress. Also you may wish to setup two distinct avatars based on WordPress and BuddyPress.

With this bit of code you can overwrite the default avatar photo for your BuddyPress users and replace it with a new URL. Note that this will only display on members who have not customized their own avatar yet. Just add the following codes into your bp-custom.php file and make sure to update the my_default_avatar_url() function so it returns the proper URL for your new default image.

/**   * Disable Gravatar throughout BP   */  add_filter( 'bp_core_fetch_avatar_no_grav', '__return_true' );    /**   * Provide a global user avatar default   */  function my_default_avatar_url() {      return 'http://mysite.com/images/static/avatar.jpg';  }  add_filter( 'bp_core_default_avatar_user', 'my_default_avatar_url' );

Source

Other Helpful Materials

• Getting Started With bbPress Forums
• 12 Amazing Buddypress Themes and Getting Started Guides

Final Thoughts

I hope this guide can be informative to new BuddyPress and bbPress users. Managing your own blog can be a tough job, let alone a whole userbase and community. Getting comfortable with BuddyPress may require hours of practice and coding to get your install running just right. If you are ever lost, you can post questions in the BuddyPress support forums to chat with developers and other knowledgeable team members.

HTML5 introduced the progress bar element, which allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progress

In this article, we will discuss how to add this element in the document, how to style it with CSS and animate the progress bar meter.

Let’s get started.

Recommended Reading: 35 Beautiful Progress Bar Designs

Basic Usage

The progress bar can be added with <progress>; the progress value is determined with the value, min and max attributes, as follows.

  <progress value="10" max="100"></progress>  

Since this is a native progress bar, the presentation is vary dependent on the platform. Below is how a native progress bar looks in Windows and OSX.

Now, let’s try styling this progress bar, so it has a consistent or similar look across all platform.

Styling Progress Bar

In the stylesheet, we actually can use the element selector to target and add style rules to <progress> element. In this example, we change the background color, remove the border line, and make it rounded by adding a border radius at half of its height.

  progress {  	background-color: #f3f3f3;  	border: 0;  	height: 18px;  	border-radius: 9px;  }

However, each browser handles this a bit differently.

In Firefox, the styles affect the progress bar, while the progress meter / value is not affected.

In Chrome and Safari, it will remove the native styles and presentation from the platform and replace it with the Webkit stylesheet, the styles above will not be applied (at least, at the moment).

So, we need some more workaround in these cases.

In Chrome and Safari, the progress element is translated this way.

  <progress>      ┗ <div> ::-webkit-progress-bar           ┗ <div>::-webkit-progress-value  

Thus, to change the progress bar and the progress value styles in these browsers, we need to add those Webkit pseudo-classes.

  progress::-webkit-progress-bar {  	/* style rules */  }  progress::-webkit-progress-value {  	/* style rules */  }  

Firefox also has its special pseudo-class that is ::-moz-progress-bar. Unlike Chrome and Safari, this pseudo-class in Firefox refers to the progress meter/value.

  progress::-moz-progress-bar {  	/* style rules */  }  

To conclude, these are currently the entire selectors for styling HTML5 progress bar.

  progress {  	/* style rules */  }  progress::-webkit-progress-bar {  	/* style rules */  }  progress::-webkit-progress-value {  	/* style rules */  }  progress::-moz-progress-bar {  	/* style rules */  }  

Animate the Progress

Next, we will see how to animate the progress bar. Typically, the progress bar expands from left to right as the task progresses.

The idea is, the progress bar will expand from 0 and stop once it reaches the maximum value. We will also display the value number as it is progressing. Below is the HTML structure.

HTML

  <progress id="progressbar" value="0" max="100"></progress>  

CSS

In this example, we will use jQuery to animate the progress bar. So, we should also not forget to insert the jQuery, like so.

  <script src="js/jquery.js" type="text/javascript"></script>  

Then, we add the scripts to make the progress bar expand. First, we store the progress bar element, the progressbar value as well the maximum value, and the timeframe, in Variables.

  var progressbar = $('#progressbar'),  	max = progressbar.attr('max'),  	value = progressbar.val(),  	time = (1000/max)*5;

Next, we create a variable that store the animation function. In this example, we call the variable loading.

  var loading = function() {    }

Inside the above function, we set the progress interval. We will increase the value by 1 per timeframe — you can increase the value to make the progress run faster.

  value += 1;  

And then, we add the result to the progress bar.

  addValue = progressbar.val(value);  

We also show the value inside, next to the progress bar.

  $('.progress-value').html(value + '%');  

Next, we create a new function to run the animation function.

  setInterval(function() {      loading();  }, time);

At this point, the animation is already functioning. However, the value will keep increasing infinitely. So, we need to create a conditional statement for the animation to stop when it reaches its maximum value.

First, let’s store the above function in a variable like so.

  var animate = setInterval(function() {      loading();  }, time);

And, inside the loading variable, we add the conditional statement, as follow.

  if (value == max) {      clearInterval(animate);  }

The above script states that once the value is equal to the maximum value, clear the interval, which will stop the animation function.

That’s it and here are all the codes to animate the progress bar.

  $(document).ready(function() {  	var progressbar = $('#progressbar'),  		max = progressbar.attr('max'),  		time = (1000/max)*5,	  	    value = progressbar.val();    	var loading = function() {  	    value += 1;  	    addValue = progressbar.val(value);  	      	    $('.progress-value').html(value + '%');    	    if (value == max) {  	        clearInterval(animate);			             	    }  	};    	var animate = setInterval(function() {  	    loading();  	}, time);  };

You can view the demo and download the source from the following links.

• View Demo
• Download Source

Browser Support

According to CanIUse.com, HTML5 progress element is fully supported in the following browsers: Firefox 16+, Chrome 8+, Safari 6+ and Opera 11+.

Lea Verou provides polyfills to replicate similar functionality of this element in unsupported browsers though.

Furher References

Below are a few good references to dig into this element further.

• Cross Browser HTML5 Progress Bar in Depth – User Agent Man
• HTML5 file upload with progress – FileZilla Project
• HTML5 Progress Documentation – W3.org

Have you heard of cloud gaming? We recently featured Cloud Gaming in our 5 Exciting Emerging Trends of Future Gaming. In this post we will look into what’s been developing in the cloud gaming arena.

Cloud Gaming uses the latest streaming and server technology to enable everything from standard games all the way to high-end ones to run on just about any device.

With this you can release yourself from the console and take it to the cloud to game anywhere, anytime, on any device – smartphones, tablets or your normal work computer – and possibly from any game maker.

(Image Source: Fotolia)

In other words, it works something like video streaming, but with games. No more worrying about the spec requirements to run a game. No more booting of a game that takes forever to setup or customize. No more error screens after waiting forever for the installation to be completed.

Cloud Gaming lets you skip all that and get to what is really important – the game itself.

Recommended Reading: Evolution Of Home Video Game Consoles: 1967 – 2011

The Rise of Cloud Gaming

The idea of cloud gaming over the Web was first introduced to the public in the 2009 Game Developers conference. OnLive demonstrated cloud gaming by streaming the game, Crysis over the Internet from a server miles away to be played on a low-end laptop. Users can stream games available in the OnLive store using OnLive’s own client. They were off to a good start gaining the attention of testers, game developers and investors.

(Image Source: OnLive)

In about three years later, OnLive started letting go of their employees. They can’t seem to make money from cloud gaming. They have thousands of subscribers but none of them are the paying kind since players can try out game demos on the OnLive store for 30 minutes, for free.

The company was reportedly spending $5 million a month to maintain thousands of servers that aren’t being fully utilized. At most, only 1,600 players were on it concurrently.

The company has since switched hands, and a new CEO has been elected. OnLive is now on a 12-month recovery plan but still offers a playpack of $9.99 a month for unlimited gamplay for over 200 game titles.

A Different Game Plan

Then, there is GaiKai, founded in 2008, a company which focuses more on selling their platforms to game manufacturers who wish to provide cloud gaming options to their players. The GaiKai platform is similar to how you stream netflix on your Smart TV. GaiKai allows white-label businesses with basically any manufacturer.

(Image Credit: PlayStation)

So if for instance, Samsung wants to have their own cloud gaming platform on their range of TVs, GaiKai will build it for them. They had a partnership with Electronic Arts and Ubisoft and was in the midst of making more mainstream games available on their platform. Then, Sony showed up and bought them. For $380 million.

Friend or Foe?

So what was the reason behind the massive buyover? Was it to actually add a new platform to their service, or to prep it for PS4 or their range of Sony smartphones? Or was it a way to stave off the competition from other tech manufacturers like LG or Samsung or even from GaiKai itself before it grows big enough to consume Sony and the rest of the traditional gaming industry?

There is a lot at risk here and Sony apparently wants to keep on top of things but we’ve yet to see them make their first big move with GaiKai.

Setting Up Cloud Gaming

With big players in the mix, why hasn’t cloud gaming taken over the world? Well, like all great ideas, there are still a lot of creases to iron out. Here’s a brief walkthrough of the problems companies who are investing in cloud gaming are facing:

The Cost

For gamers to be able to play everywhere, any time, cloud gaming service providers have to invest in getting the server technology (more on that later) to ensure smooth gameplay. This is why companies like OnLive provided three options: rent, purchase or subscribe, from $5 to $50 fees to game on the Cloud. The costs is only for the gaming experience, you need to bring your own Internet connection.

(Image Source: CiiNOW)

You need a minimum of 2Mbps (or the standard recommended speed of 5Mbps) for smooth gaming because with Cloud Gaming, you will be burning up about 1.3GB in an hour. Good luck asking the rest of the household to stop watching online videos while you slay monsters.

Lack of Players

New gaming platforms face a big problem that is pretty much out of their hands. When it comes to online games, players like to interact or compete with other players. Since cloud gaming is still relatively new and players already have their list of favorite games (and consoles) to burn the midnight oil for, if cloud gaming services cannot give them the option to play top-tier games, the crowds won’t come.

Change

It’s a change in a massive scale where the rules of how things work change. If cloud gaming takes over, there will be no more game stores since you need not pick up physical copies of your games anymore. The actual gaming experience itself will also probably change because instead of being able to invest in your gaming machine, gameplay must now depend more on your Internet connection and the servers hosting these games.

Latency And Hardware

Latency is the response you get from a game event that you send over the Web. For a fast-paced game like in the Multiplayer Online Battle Arena (MOBA) or First Player Shooter (FPS) genre, it will require you to have a latency of at least 350 milliseconds and below. Otherwise, there goes your in-game performance. When it comes to latency issues, two companies are working to get game performance in tip-top shape.

Faster Gameplay

CiiNOW is working on improving game response and lowering latency rates. So far, they are claiming that their network latency is 27% faster than GaiKai and 17% faster than the XBox 360. This means that you get better response times in your gaming environment when you play on the CiiNOW platform.

(Image Source: CiiNOW)

Hardware Performance

With Nvidia, the latency issue is considered a small one. The standard Xbox performance has around 150 – 200 milliseconds of latency. With cloud gaming, a tweak in the hardware department can easily bring the numbers down to 60 miliseconds.

Hence, Nvidia’s focus is more towards server technology, which they call Nvidia Grid. It features Hardware Virtualization: using a software called the Nvidia VGX Hypervisor, the physical graphic card can actually create and run a virtual graphic card within it.

With this technology, the Grid has the equivalent power of 720 XBox 360′s put together, running at only a fifth of the power. If you think thats a lot of firepower, you’d be right. GaiKai is working hand-in-hand with Nvidia to redefine cloud gaming.

Conclusion

Will Cloud Gaming be able to redeem itself? The prospects are bright and it will probably be a welcome boost to the gaming industry by making gaming affordable and more accessible to more players. When it will arrive is another matter. In the meantime, we’ll have to make due with buying new gaming consoles and chucking out the old ones.