Advertisement
Theme Development

Developing BuddyPress Themes - Part 3: BuddyPress 1.5, Member Pages, & the Overall User Experience

by

Welcome to part 3 of Developing BuddyPress Themes. In this tutorial, we'll focus on BuddyPress' latest release - version 1.5, as well as how to customize the user experience through editing member pages and adding custom functions.


This tutorial is the last part in this Developing BuddyPress Themes series. We have gone from the API to creating a custom theme that is built around a specific community. Today, we'll take that a bit farther.

What We Will Do

In this tutorial we will :

  • take an in-depth look at BuddyPress 1.5 - "Lombardi" - and the changes that it brings
  • continue editing our theme's style.css to change group and member pages
  • use the API to customize group and member loops
  • use custom functions to enhance and guide the user's experience

By the end of this tutorial series, you should have a comprehensive understanding of BuddyPress' new changes and a great reference point as you start, or continue, developing your own BuddyPress themes.


Upgrading to BP Version 1.5

First, if you haven't already updated BP, go ahead and take the plunge and update. You can do that manually, or through the WP dashboard. Once you have updated, you will see a notice at the top of the screen telling you that you need to configure the update.

Click that and then you should see this:

  1. First, the database needs to be updated so do that, and click save.
  2. Next, you will edit the components that you want activated on your site. Don't worry, you can also activate or deactivate these later. Save the settings and continue.
  3. Next, BuddyPress now lets you select certain pages that you want components to be on. For example, before 1.5, you would have to edit components' slugs in bp-custom.php. However, now, you can tie components to pages and change their URL directly from the WP dashboard.
  4. Finally, save all of your changes, and the new BuddyPress menu will actually appear at the bottom of your left-hand WP dashboard navigation menu - instead of at the top. Thanks BP devs for that change in placement!

The theme we created should be fine. Don't worry about enqueueing the stylesheets or anything like that, as it's actually unnecessary as far as I can tell. If anyone's got a comment on that, be sure to throw it out there!

If the update wasn't so kind to your theme, visit the BuddyPress theme designer and developer page here.


What are the Highlights of BP Lombardi?

Since it's release last week, I've played around minimally, but I will echo the highlights posted on the BuddyPress website. They are as follows:

  • New custom field UI. No you can drag and drop custom fields, and preview them before they go live. Here's a screenshot of a new field that I created:
  • While it's not what we've been talking about here, Lombardi's new default theme comes with the ability to change the default background, change the default header, and use a WP custom menu. The default theme also:
    • has 5 widgetized areas - 1 in the sidebar and 4 in the footer
    • can display featured images (as custom header images on pages and posts).
      contains an optional one-column layout
    • is responsive, so it resizes to fit any screen size
    • has a new forums tab in the member's page navigation that allows you to quickly access topics that you have started or replied to
  • Quick embed support with oEmbed. I'll go over this more in detail below.
  • BuddyPress is now faster and more efficient. The devs went through the code searching on ways to make the plugin work faster and more efficiently, and, quite frankly, it really does.

For a complete list of features and highlights, click here. Be sure to note some changes to loops and basic BP functions. These should really help you in your BP theme development.


Embedding in BuddyPress 1.5

One important thing that I specifically want to go over in BuddyPress 1.5 is how to embed. BuddyPress now uses Wordpress' native embedding, which allows you to directly embed content via the URL. For instance, if I want to add a video to my forum topic I would post something like :

	
	Hey, check this out and let me know what you think.

	http://www.youtube.com/watch?v=ROBmgYcIBww

This will result in:

If you prefer, you can also put the above URL in an embed shortcode and specify the height and width like so:

	
	[embed height="240" width="320"]http://www.youtube.com/watch?v=ROBmgYcIBww [/embed]

That should help if you are using a theme that uses a styling that's different than the default, as the width of the embed might be larger than you want.


Editing New Member Template Pages

Now, let's look at editing member templates, a feature of BuddyPress 1.5. As we are editing the member templates, I also want to show you how to add your custom profile field data to the templates in order to really strengthen your online community.

Before we start, you will need to copy the members folder from bp-default, and paste it in your child theme folder.

Step 1 Working with the Member Template

Still working in the members folder that you copied to your child theme, open the folder named single. This folder contains the elements that make up what a member sees when they visit their profile. My page currently looks like this:

The main files that we will be working with are home.php and member-header.php, as those are the files that control what the user sees when they look at their info.

Step 2 Integrating Custom Profile Field Data

First, open the file member-header.php. This file is used to display the user's avatar, info, and navigation elements.

Since the site I am making is about the great outdoors and specifically camping, I want members to have info that is relevant. For that, I've created the following custom profile fields:

One great thing about the new UI is that it is much easier to navigate. You can quickly create and edit completely new profile fields for each group that you have, thereby really customizing each group in BuddyPress.

To integrate those fields into my member page header, under line 29, which is:

	
	<span class="activity"><?php bp_last_activity( bp_displayed_user_id() ); ?></span>

place the following:

	
	<?php
	
	$favorite_spot = bp_get_profile_field_data( 'field=Favorite Camping Spot' ) ;
  echo '<p class="profile-fields">My Favorite Camping Spot: ' .$favorite_spot. '</p>';
	
	$necessary_item = bp_get_profile_field_data( 'field=One Necessary Item' ) ;
  echo '<p class="profile-fields">My One Necessary Item: ' .$necessary_item. '</p>';
  
	?>

Here, I retrieved the custom profile fields "Favorite Camping Spot" and "One Necessary Item", and displayed them in new paragraphs below the last activity info. I also gave them the class "profile-fields" so that I can easily style them via CSS.

In addition to this, you could add conditionals that direct users to update their profiles if the data is missing.


Create a bp-custom.php to Enhance the Overall User Experience

So far, we've talked a lot about child themes, and how to add your own functions to that via the functions.php in your child theme folder. However, what about changes that you want to make to BuddyPress regardless of the theme being used? What about changing global things like the registration process or other overall user experience elements?

Well, to do changes on a global scale regardless of the theme, you'll need to create a new file called bp-custom.php and place it in wp-contents/plugins/. To create that file, open up a new file and place the following in it:


	
	<?php 
/* We'll place our mods and hacks in this file */
	?>

Save it as bp-custom.php, put it in wp-contents/plugins and you're done! Once you add functions there they will load regardless of theme.


Adding a Basic Twitter Feed via bp-custom.php

Finally, I wanted to quickly demonstrate how to use custom fields and bp-custom.php to display a Twitter feed. I know that there are plugins out there that also achieve this functionality, but I wanted to put some of the concepts that we have been talking about together in an example.

First, I placed the following code in my bp-custom file:

	

function CNBTgetTwitterStatus()
{ 	 ?><h2><?php bp_displayed_user_fullname(); ?>'s Twitter Feed</h2><?php 
    
        $twitter_username = bp_get_profile_field_data( 'field=Twitter Username' ) ;
        $count = '5';
	$transient = "$twitter_username"."_$count";
	//Get Tweets From the Cache
	$getTweets = get_transient($transient);
	if ($getTweets)
	{
		echo $getTweets;
	}
	elseif ($twitter_username != false)
	{
		$site = "http://twitter.com/statuses/user_timeline.json?screen_name=$twitter_username&count=$count";
		//Perform Http request to get JSON feed of Twitter User Status
		$result = wp_remote_get($site);
		$json = $result['body'];
		//Convert JSON String to PHP Array
		$tweets = json_decode($json);
		$getTweets = '';

		foreach ( (array) $tweets as $tweet)
		{
			/*
			Use these values to customize your output.
			//gets twitter status
			$tweet->text;
			//gets the time the status was created
			$tweet->created_at;
			//gets the User Profile Image URL
			$tweet->user->profile_image_url;
			//gets the User Screen Name
			$tweet->user->screen_name;
			//gets the User location
			$tweet->user->location;
			//gets the User Name
			$tweet->user->name;
			//Get the follower count.
			$tweet->user->followers_count;
			//Get the User Website URL.
			$tweet->user->url
			*/

			// Convert twitter Usernames and links to Hyperlinks
			$tweetcontent = linkify($tweet->text);
			$getTweets .= "<p class='member_tweet'> $tweetcontent </p>";
		}

		//Set Cache if it does not exist
		set_transient($transient, $getTweets, 10);
		echo $getTweets;
	}
	else
	{
		return false;
	}
}

	/* Credit Jeremy Parrish http://rrish.org/  */
	function linkify($status_text)
	{
	  // linkify URLs
	  $status_text = preg_replace(
	    '/(https?:\/\/\S+)/',
	    '<a href="\1">\1</a>',
	    $status_text
	  );
	
	  // linkify twitter users
	  $status_text = preg_replace(
	    '/(^|\s)@(\w+)/',
	    '\1@<a href="http://twitter.com/\2">\2</a>',
	    $status_text
	  );
	
	  // linkify tags
	  $status_text = preg_replace(
	    '/(^|\s)#(\w+)/',
	    '\1#<a href="http://search.twitter.com/search?q=%23\2">\2</a>',
	    $status_text
	  );
	
	  return $status_text;
}
	
add_action ('bp_after_member_home_content' , 'CNBTgetTwitterStatus');

This code produces this:

To break this down a bit, I first use a template tag to display a header with the user's name, you know, to make it feel more personal.

	
	<h2><?php bp_displayed_user_fullname(); ?>'s Twitter Feed</h2>

Then, we build the function that will output our twitter updates. For the sake of time, I actually found this function. There are other functions out there that you can easily use to create the Twitter feed that you want. If you notice, I also put a class on each tweet, so I could style it in my style.css:

	
	$getTweets .= "<p class='member_tweet'> $tweetcontent </p>";

At the end of this function, I call it and use a template tag to place it after the member home page content.

	
	add_action ('bp_after_member_home_content' , 'CNBTgetTwitterStatus');

And now, you have a simple Twitter feed that you can display and customize to connect your users even more!


Conclusion

In conclusion, I hope you have seen throughout this series that BuddyPress is a powerful tool that can be effectively used in your projects. It isn't beyond understanding! Better yet, it has an active dev team and community working to make it even more efficient and functional. I've enjoyed walking through this series with you, and if I can help please let me know.

Thanks for reading!

Related Posts
  • Code
    Creative Coding
    Adding Custom UI Themes to Wordpress Admin Using SassPreview image@2x
    With the release of WordPress 3.8 we now have a new feature for Admin UI themes. This means that every user can change the color scheme of his admin regardless of the the theme that’s being used on the front-end. To change the color scheme of your admin, go to Users > Your Profile. Here you’ll see eight predefined themes that you can select from. Select any theme from these themes and you’ll see the changes immediately. When you are done with selecting the theme, hit the “Update Profile” button.Read More…
  • Computer Skills
    App Training
    Getting Started With Twitter for MacTwitter400
    Signing up to a social networking service such as Twitter can be a confusing experience, especially when you do not quite understand what a tweet is, or indeed, what the service is for. In this tutorial, I will show you how to send a tweet, follow other users and search for information relevant to your interests in order to help you get a better understanding of what both Twitter and, more specifically, the Twitter for Mac application is capable of.Read More…
  • Code
    Theme Development
    Making the Perfect WordPress Theme: Maintenance, Compatibility, and Customer CareWp white 400
    In the previous part of this series, we reviewed what to avoid when making a WordPress theme. It is an important article because it's really easy to make those mistakes. And in this article, we're going to go through the things we need to do after making our theme.Read More…
  • Code
    Theme Development
    A Guide to the WordPress Theme Customizer: Getting StartedTheme customizer 400
    In this series, we're taking a complete look at the WordPress Theme Customizer. Specifically, we're understanding exactly what it is as well as why it benefits us, how to integrate it into our theme, how to work with it in the context of other themes, and how to introduce our own sections, settings, and options into the Customizer.Read More…
  • Code
    Plugins
    Communicating With the WordPress.org Plugin APIWordpressdotorg plugin api border 400
    Over the last few weeks I have been wondering on how to possibly pull data about my plugins hosted on WordPress.org and display it on my website. The first thing that came to mind was "Web Scrapping" but quite frankly this is a lot of work, feels like going back in time, and is not something a good web citizen should do. In some cases, it could be illegal.Read More…
  • Code
    Creative Coding
    A Look at the WordPress HTTP API: A Practical Example of wp_remote_postDiagram http api
    In the previous article, we reviewed the previous articles regarding GET requests, the native PHP facilities for making requests, and reviewed WordPress wp_remote_post API function along with the arguments that it offers. In this article, we're going to make use of wp_remote_post such that we're actually able to see it in action. Remember that this - like wp_remote_post - is part of the HTTP API of which there are other functions worth reviewing. But, for now, we're going to put wp_remote_post to work. Specifically, we're going to do the following: When the page loads, we're going to submit some information to a custom script The script will examine the information and return it to our page We'll then display the data on the page Sure, it's a bit of a contrived example but it will give us the experience of creating a separate PHP script that can be used for operations triggered by the use of wp_remote_post. Anyway, for the purposes of this example, we are going to use the PHP $_SERVER collection to log when the user has submitted their preference rather than require that they have logged in. Finally, the source code will be made available on GitHub and accessible at the end of this series in the following article. For now however, let's get started with working on the plugin.Read More…