Buddypress Extended Profile Image Field Plugin

I had detailed a while back in this post the steps to adding an image field type to your BuddyPress Extended Profiles component. A lot of people (as is evident from the comments) got some good use out of that. However, PHP and Javascript are not everyone’s cup of tea so there were many challenges in getting the raw code to work.

I finally got some time to package the code into a plugin which you can download at the WordPress Plugins repository. Give it a spin and let me know how it fairs in your particular setup. The plugin should be ok on WordPress 3.2.1 to 3.8.1 running BuddyPress 1.5 to 1.9.2

Thanks very much for all the feedback I got in the comments on the behaviour of the code.

 

UPDATE:

Plugin en el español (http://wordpress.org/plugins/buddypress-xprofile-image-field/) por Andrew de WebHostingHub. Gracias Andrew!

How to Add an Image Field to Buddypress Extended Profile Fields

BuddyPress is a plugin that brings social networking capabilities to WordPress. It comes with features such as Friend connections, Activity streams (status posting), Private messaging, Groups and Forums. There is lot’s more you can do with it via BuddyPress Plugins. These are simply WordPress plugins that are compatible with BuddyPress. You can work with BuddyPress as just one component of your WordPress website’s functionality, or you can have it as your central component and completely hide the rest of WordPress. Just like WordPress, BuddyPress is completely open source and almost as flexible.

How BuddyPress Works

1.   Hooks

Being part of the WordPress ecosystem, BuddyPress employs hooks liberally in its implementation. These help theme and plugin developers greatly when it comes to interfacing with BuddyPress in a future-proof manner. When used correctly, the hooks allow developers to write code that doesn’t break on newer versions of BuddyPress.

Among the most important hooks in BuddyPress are:

–  bp_screens:  It processes functions that respond to user input with visual feedback. Basically this is the hook to use when you want to output a page in response to user input. A good example is displaying a list of friends in response to the clicking of the friends menu.

–  bp_actions:  This hook is similar to bp_screens, but does not give visual feedback. A good example of such is when accepting a friend request. This hook is called before bp_screens and we shall use this rule in implementing the image field.

2.   Components

Functionality in BuddyPress is delivered via components. Roughly, a component maps to a feature. For example the Groups feature is handled by the Group component. Components contain the various bp_screens and bp_actions hooks required to respond to user input. A fresh installation of BuddyPress has the following components:

–  Extended Profiles:  maintains user profile details such as name

–  Friend Connections:  allows users to make and accept friend requests

–  Private Messaging:  handles messaging between specific users. Only the users addressed in the messages can view them.

–  Activity Streams:  handles the posting of public statuses and generally tracking the actions of users.

–  Groups:  handles the creation and maintenance of user groups. Users can create groups, invite other users etc.

–  Forums:  this component allows topical discussions to be carried out among users either site-wide or within groups.

Add a Custom Page Template to WordPress Thesis Theme

Thesis is a popular premium WordPress theme. Unlike many themes that are implemented to plug directly into the WordPress-defined template structure, Thesis is a force unto itself. It’s a framework that completely redefines the approach to WordPress customization. It achieves this by supplying a rich set of hooks into the various stages of the page generation process and then creates one location where all customization code goes. One file – custom_functions.php – holds all the custom code and is safe from overwriting during theme upgrades.

The Thesis framework is sufficient for a wide range of customization needs. However, as with all popular software, users’ needs eventually go beyond the default capabilities of the software. Thesis has in-built support for creating 2-column and 3-column sites. The layouts are configured via the Design Options menu and apply site-wide. You can override the layout of particular pages (eg home page) by intercepting the page generation process in custom_functions.php. The problem with this approach is that you have to know the designation (home), name or id of the page before-hand as you customize the site. If these details change after the site has been launched, then the customization code is going to break.

Page Template List

What if you want to alter the layout of an arbitrary number of pages that are going to be created in the future? All you know at customization time is what the layout shall be, but not which particular pages shall use it. This obviously calls for a solution that does not involve updating the customization code every time a page requires the custom layout. Even better, it calls for a facility that can be triggered while the page is being created by the user. A facility such as the WordPress  page Template selection drop-down. If you could create a custom template and have it selectable on the Template drop-down, then the user would simply pick it during page creation (or editing) and have it used for page rendering.

Thesis (version 1.6) does not support plugging in of custom template files, but it is flexible enough to pick them up if you know where to tweak. Here’s how you go about doing exactly that:

1)       Problem description

The hypothetical site we shall be working with is a travel blog. The site has various sections, but the one that is of interest here is one called Places. It has pages describing various travel destinations. These pages have advertising that shows in the left column. Every other type of page on the site does not have this left column and therefore no ads showing. How do we get the ads to show on the Places pages, but not on any other page?