The state of the BP Nouveau Template Pack

On april 13 we had our first “Template Pack” chat. After 4 months of weekly meetings (on thursdays at 19:00 UTC), we thought it was time to share with you what we’ve accomplished so far.

3 years ago, the very first BuddyPress Template Pack – BP Legacy – was introduced in Totonno (1.7). It was a major improvement. Thanks to the BP Theme Compatibility, BuddyPress can use the template parts included in this Pack and inject them into the wide majority of WordPress themes. Site owners or theme designers can override these template parts to customize the appearance of community sites. And, for sure, they are doing it!

BP Legacy will remain the most compatible Template Pack BuddyPress ever made!

But after 3 years, we are feeling like it’s time we try to improve the user experience and optimize markup, Javascript, CSS, Ajax, etc.. And very quickly we all agreed that this couldn’t be done in BP Legacy without taking the risk to have an impact on all the possible overrides site owners or theme designers did and are still doing. History showed that unfortunately some of them are not necessarly taking the time to synchronise their customizations with the adjustments we sometimes have to do to our template parts…😦 .

Moving forward with BP “Nouveau”.

In french “Nouveau” means “new”. If you’re thinking i’m the one who had the idea to call a new Template Pack this way, you’re wrong :) @rayisme is the one! But i must admit i love this name!

In BP Nouveau, we’ve decided to follow these guidelines:

  • Modularity in CSS, Javascript and PHP.
  • Think forward instead of being afraid of breaking backward compatibility.
  • Build modern UIs by always taking advantage of the latest improvements WordPress or BuddyPress core are introducing.
  • Ease of customizations for site owners and at the same time advanced techniques for theme or plugin developers.

About this last point, the first drastic decision we’ve made was to remove all do_action hooks from template parts! Some of you might be surprised as these kinds of hook are ways to extend or customize. It appears that after 47 commits it actually gave birth to very interesting improvements:

  1. We first introduced new APIs such as the BP_Buttons_Group class. As you know BuddyPress uses a lot of buttons and in Legacy there are a lot of these hooks to let people add their own buttons. Thanks to this new API plugin/theme developers can choose the exact position where to output their buttons!
  2. Two new template hierarchies appeared (one for each single item object BuddyPress is using). For instance, it’s now possible to have a different activity stream layout for any member/member type or any group/group type.
  3. Template parts have been optimized. The huge groups/single/admin.php has been split so that we can now share some template parts between the Group’s create screens and the Group’s edit screen. The xProfile visibility is now a specific template part that is used by the xProfile edit screen and the signup screen. The WP Profile template we fallback on when xProfiles is not active stopped using old yim/aim/jabber fields in favor of a new loop using the wp_get_user_contact_methods() function so that potentially any new contact methods can be added. Finally The registration template has been completely revamped.
  4. New template tags have been created such as the one to generate standardized template notices and user feedbacks which can also contain “dismiss” buttons.

A BP Template Pack customizer panel.

Site owners will be able to customize their community and preview their changes thanks to the WordPress Customizer.  For instance, they can choose to use our default front pages for groups or members and they can choose between 4 layouts for the Members, Groups and Sites directory loops. Take a minute to discover this last feature in the following video.

They will also be able to reorder the Groups and Members primary navigations according to their preferences!

Improved UIs

First the notifications screens is now using Ajax and we’ve added a search functionality and the possibility to filter notifications by component actions. Of course we’ve kept the sort by date ordered DESC or ASC but it’s now located into the Date Received column header a bit like it’s the case in WordPress administration tables.

notifications

Then i invite you to watch this 3 minutes video to discover our new Group Invites and our new Private Messages UIs.

Finally we’ve started to work on a new extendable Activity Post form🙂

Modularity

BP Nouveau is only loading what the BuddyPress setups it’s activated on needs. For instance if the Groups component is not active all the corresponding Javascript and PHP code won’t be loaded. SCSS files are now organized into modules.

Getting involved.

You want to help? You are very welcome. To ease our work we’ve packaged the template pack into a plugin we’ve named “next-template-packs”. It adds a new tab into the BuddyPress settings so that it’s easy to switch between BP Legacy and BP Nouveau. In a way it’s a possible interesting start for this core ticket (#7157). You’ll need the latest WordPress version and the latest BuddyPress version (trunk). Here’s the url of our github repository, we would be very pleased to receive some pull requests😉

Let’s build together the most customizable Template Pack BuddyPress ever made!

#template-pack

#id