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:

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!
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.
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.
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.

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

Renato Alves 2:54 pm on July 16, 2016

Fantastic! The BuddyPress future seems bright! =D
buddycore 8:22 pm on July 19, 2016

It’s nice but will we have to choose which template pack to use in themes design, or will Nouveau become a default?

The new template hierarchies available for group settings and such are nice.

Modular JavaScript is a treat.

Demos look great!
- imath 12:48 pm on July 20, 2016
  
  Thanks for your feedback BuddyCore. That’s a discussion we had during one of our chat. I understand your concern about it. The road we took is to provide a UI to easily switch template packs. Meaning Legacy will remain the default template pack. It’s easy to check which template is in use using bp_get_theme_compat_id() if i remember well so you can have different template folders for each template pack. This is still a point we’ll need to discuss once we will be close to a first beta for BP Nouveau. You are very welcome to bring your voice and ideas during our chat (thursdays at 19:00 UTC)
  - buddycore 12:41 am on July 21, 2016
    
    I’d love to be there but I’ve been building a theme for BP recently and my head needs a break from all things related. Thanks for the invite.
    
    I would suggest template writers make the markup and function calls straight forward and semantic. Ditch all use of , do not use #id selectors unless specific to JavaScript, nice the do_actions() are going and generally just tidy the whole thing up. I like the layout selector in the backend but for me as a theme designer there’s already a huge amount of template files to consider in BuddyPress each time so this will be nice, if not a luxury.
    
    Aside from that, imo template files in a parent or child situation for a BP theme should be in the hands of the theme author. I hope that return values are also put in the hands of designers here.
    
    It’s no longer legacy if it’s Nouveau, and it’s a really good opportunity here.
Paul Gibbs 1:50 pm on July 25, 2016

Can you post this on buddypress.org next time, please?
- imath 2:55 pm on July 25, 2016
  
  Sure 🙂
oc2ps 8:29 pm on July 25, 2016

Looking great. How does the new group listing/navigation play with Hierarchical Groups https://buddypress.trac.wordpress.org/ticket/3961 ?
- Paul Gibbs 10:05 am on July 29, 2016
  
  let’s get hierarchal groups in before updating to support that 🙂