Companion Styles – An update

The companion styles tasks progress and we reach a good point for a résúme of the current status.

For those that haven’t read about this project the last bpdevel update post outlines the purpose of these tasks companion-styles-task-updates

We have two main tickets running to cover enhancement styles for the WP themes Twentyfifteen & Twentyfourteen. Last week we committed the initial pass for twentyfourteen’s scss file and compiled CS & rtl CSS files. A further round of updates and styling have been committed to twentyfourteen to bring it to a par with twentyfifteen’s current state of play.

Both sets of files now provide the two themes with styles that are designed to provide additional enhancement supporting the BuddyPress default stylesheet, with the aim of ensuring that BP displays at it’s best and that any particular requirements that the themes have are catered for in these additional stylesheets.

So we achieve our primary goal if we can have an almost seamless rendering of BP elements in one of these given themes, where BP just blends in naturally looking as though it belongs in that theme. Our secondary goal would be to then tweak BP elements to have a little extra sparkle and would be the icing on the cake so to speak.

Our primary aim is pretty much achieved, yes there are still aspects that could take attention and yes doubtless we will find issues to address, but these tasks are less about themeing every aspect as about ensuring a broad sweep on elements to ensure the majority of critical issues are addressed, but overall BP renders in a far more seamless manner now in these themes, with for example twentyfifteen now producing a pleasing experience when we activate BP.

Design factors:

Although the tasks here were always about harmonizing with the theme rather than ‘design’ there are two aspects to both tasks where what may be described as ‘design considerations’ were undertaken, both of these are up for criticism and review.

1/ Major layout elements

Both twentyfourteen & fifteen have what is best described as narrow content widths best used for rendering blog or magazine style posts, this sort of narrow text width container doesn’t suit BP components which need to display quite a bit of detail on pages, thus where BP renders it’s screens we have manipulated those widths to effectively create new layout pages for wider content, while attempting to maintain a relationship with the themes concepts for layout containers.

2/ User Account / Groups object Nav layout
Horizontal navigation has long been an issue where dynamic nav elements are concerned of an unknown quantity, thus for both themes and for the User acount and single groups we have re-factored thse navs so that the primary object nav runs vertically to the left – opinions and thoughts are sought on this, whether this works, or do people prefer the older style horizontal navs?

Community Participation:

At this stage feedback and/or suggestions are welcomed on these two tasks. it would be great if core dev team and all community members that can run local dev installs could switch to using twentyfifteen/twentyfourteen in their day to day dev work and note any issues that they may spot in passing, these can be fed back to the respective tickets 2015 | 2014 or even left as comments to this bpdevel post.

Initially feedback on these two aspects would be helpful:
* Layout re-factoring of parent theme containers for BP screens Dir, Group, user accounts
* Vertical Mnus Useracounts /group screens.

We would also be hugely interested in anyone that has any thoughts on styling specific elements of the BP components e.g the various tables in user accounts, activity stream comment display etc. Again comment feedback or even code if people want to tackle a section and provide a patch via the SCSS file or if not comfortable with SCSS simply work up styles in, say the bottom of the .css version and upload that to the trac ticket and we’ll check it over and if necessary work it into the SCSS file.

Companion Styles Task Updates

This is a brief update on the current progress for this task of creating supporting styles for BuddyPress when activated on the default WordPress themes.

The task origin & concept

This task was originally prompted by a discussion on the rendering of Buddypress on the WP Twentyfifteen theme and the concern we had that BP did not display to it’s best on this theme. We discussed and agreed in essence that it would be nice that BP displayed at it’s best when activated on these default WP themes as they may well be a users first impression of BP and first impressions last 🙂 On the original discussion, having agreed in principle that we needed to correct twentyfifteen display we did create an initial set of corrective styles provided by @mercime and which are rolled into the first iteration of the twentyfifteen styles.

On discussion the proposal or one proposal was that we actually programatically check and enqueue an additional set of styles dependent on the theme activated and that these styles then would address any issues or conflicts arising from the buddypress styles and themes styles. This process would also be used, moving forward, to provide support for any new WP themes released. For existing WP themes we would approach them from a current latest version first tracking back as time allowed in a given release cycle.

The task in hand

This task is now underway and using a patch provided by @r-a-y we can now enqueue new stylesheets if found for the twentysomething themes.

We introduce  styles under pre-processor support (.scss) for these companion styles which likely will be compiled to the bp package as a grunt task, for the purposes of developing and testing I’m compiling locally and including the compiled file in the patch and any subsequent patch updates on a ticket.

A master ticket exists to manage technical discussion at #6248

Individual tickets exist and are underway to manage particular WP theme tasks

The Task Objectives

  • Primary: Correct any obvious issues with styles as pertaining to BP component screens
  • Secondary: Enhance the rendered BP elements with a view to maintaining a harmony with the themes look and style
  • Tertiary : Look to add refined styling for BP elements

For a task to be considered ‘completed’ and viable for inclusion in a release we must fulfill the primary and secondary objectives with the third objective being considered a bonus if we are able to achieve some additional and interesting visual styles that harmonize with the theme.

In this overall task it’s important to keep focused on the initial reason we are tackling these styles as a means of ensuring BP is presented in the best possible light, however we are not ‘theming’ BuddyPress so the third objective while great if we can tackle and add a little bit of an extra ‘wow’ factor should not be the driving force behind the tasks.

Current state of ticket tasks

All ticketed tasks provide a patch containing two files the Scss file and a compiled css file. The scss file provides the framework we will work to and guidance notes and will have some essential initial styles that address the main areas of concern with displays. Breakpoints used in a given theme are noted and provided in commented examples for use if needed.  A few essential mixins are provided to manage font-sizing on a rem/px basis and variables to manage margin/padding, we attempt to ensure we work to the themes parameters in use.

Twentyfifteen currently is underway and addresses in the styles areas such as the restricted content width of the layout which while fine for textual content i.e a post or magazine doesn’t suit more complex content such as is presented on the BP user account screens. re-styles the user object navigation to a vertical style, it also takes a look at the search forms to re-style those.

Twentyfourteen is very similar to Twentyfifteen in it’s content layout and we take the same approach to re-factoring the BP screens layout widths to better render BP elements and also again implement the vertical menu for user accounts. The initial styles are attached to the ticket.

Getting Involved

We welcome any participation in this mini project and people can follow along on the tickets as linked to above, comments are welcome as are contributions of code.

Working with the sheets can either be done by patching a local dev install and using the scss  file to work in, pushing changes back up to the ticket as a fresh patch or if not comfortable working in a pre-processor environment one could simply  copy the the compiled css file from the patch view on a ticket to the bottom of the themes style.css and work there building rulesets but being careful to isolate and mark / section new styles so they can be easily extracted out and added to the ticket as a simple text file, we can then run those to test and then work them into positions within the scss file if need be.

What to get involved with?

As mentioned comments on work to date welcome but if you do fancy running up some visual styles then suggested areas worth looking at might be as follows:

  • The loops: styling the activity stream entries or member lists
  • User account screen specific components
  • BP buttons in general action buttons/actions in lists and /or account headers

In other words drilling down to look at just how specific aspects are rendered and how they may be better presented.

Make.WordPress Community Hub poll

Here’s a reminder for those who haven’t seen it. Please take a few minutes to fill in the Community Hub Poll as the poll closes in the next few days. Get at it!

This poll’s aim is to find out what features the WordPress community would like in their Community Hub. This survey will close at 29 January 2015 00:00 UTC What do we need from you? Please fill in this poll to voice what features you feel are important for the WordPress community hub to have.

Take the poll

Codex News

The codex team are still quietly working away albeit at a gentle pace.

As part of a month by month task list as mentioned in the last update we have reorganized some of the pages in the codex. Further review of articles under the Developer Resources section resulted in finding some deprecated references and moving these to the Archives.
In addition we have added a few new sections and pages as follows:

New sections created:

Administrator Guide –

Member Guide – ‎

These two sections are top level sections aimed at providing detailed guides for members and administrators of sites. This complements the more basic section ‘Getting Started’
We could do with some community involvement in non technical write ups for using BP from a user front end perspective for these sections, and we’ll list a few ideas for new pages towards the end of the post.

New subsections created:

Updating custom themes for new functionality – A new section exists added as a sub section of ‘Themes’. The idea of this section is to provide clear detail on any template updates that are required in order for new functionality to be available and will be listed by BP version release. This is intended to help those that have custom themes, overloaded templates, who may miss out on functionality that would normally become available to bp-legacy templates and will show exactly what aspects of markup / styles need to be adjusted.

User Submitted Guides Under the theming & developer sections new sections are added intended to hold community submitted guides that are more related to extending BuddyPress for more custom requirements rather than describing core features.

The restructuring allow us to group codex articles into clearly defined areas while avoiding nesting pages too deeply in the hierarchy. The codex structure adheres to a principle of two levels down from the primary codex home page.

Recently Published Articles

There have been a number of articles added to the codex recently:

In addition we greatly thank contributions from, @Myg0t ‘Useful functions & hacks when using S2member

Improve Codex Navigation

Part of our administrative task is to improve user experience in the BP Codex. This month, our focus is on fixing the navigation structure in the codex sidebar menu and to reveal the hidden breadcrumbs. We’re following up on getting #5906 implemented. In this ticket the codex navigation structure in the sidebars where sub sections show the child pages or main sections and clearly styled to represent a section or page. This will help to facilitate navigation within sections of the codex.

Your Participation is Welcome

If you have suggestions for articles you believe will be useful and should be added to the BP Codex or articles you would like to write, we would love to hear them! Please let us know by leaving a comment below.

For your reference:
BuddyPress Codex table of Contents

That’s all for now,
The Codex Team.

The Codex 2014 update

It’s been a while between updates for the codex but it’s been busy year so far on and of.

Needless to say the Codex hasn’t been forgotten and the team and those willing helpers will be re-focusing on various aspects to do with:

  • Further enhancing and improving the sectioning of pages and their parentage, ensuring guides are in the most appropriate sections and are easy to find.
  • Attending to minor styling updates to help the menus stand out for nested items, heading sizes/positioning

  • Ongoing checking of some of the older articles to check for accuracy and up to date references.

We’ll manage these tasks on a monthly basis in a simple single google doc:
Codex monthly task list (while exploring the possibility of using some free project management tools to take over from google docs)

Naturally we welcome feedback, good or bad 🙂 to help us know if we’re on track. Any comments are helpful, let us know whether there are areas that you think could be improved, and any volunteers to help tackle these areas are always welcome.

Lastly some belated acknowledgements for submitted articles over the course of this year are due so thank you to the following people for their contributions:

@chouf1 – heaviliy revised, new content
Revisions & Updates:
@shanebp The-activity-stream-loop & the-group-members-loop-bp-group-has-members

As ever the contributions from the community are what make the Codex a valuable and vibrant resource so keep them coming.

The codex team.

The Codex – Into 2014

Now we have settled in to the new year, it’s time to review our plans and ongoing tasks for the codex.

2013 saw a major overhaul of the BuddyPress Codex with a general re-structuring of it’s layout, a start at a design overhaul, and many new articles submitted and published to the codex, which once again we thank all those who contributed enormously.

We have structured the Codex project into two stages and phases; currently we have completed Stage 1, phases 1 – 3 and are now looking at stage 2 phase 4. While many of the tasks in this phase relate to follow ups such as ‘trac ticket resolutions’ & technical aspects of page layouts vis a vis menus etc in the broader scope of things we still have a focus on these primary aspects:

  1. Codex articles
  2. Refactor ‘Getting Started’ section into the ‘User’s Manual’
  3. Ongoing auditing and updating of existing codex articles (especially with a view to BP 1.9 compatibility)

In respect of Codex articles we would like to see any contributions that especially focus on the ‘Getting Started’ aspect that help the newcomer to BP get settled in e.g. a detailed view of how BP handles the registration process.

Articles that have been suggested or that have been ‘claimed’ and that are still outstanding we will follow up on and see where things stand, while always sensitive to the time constraints of those that have offered – writing articles is no small feat. 🙂

The list of suggested articles and those ‘Claimed’ may be seen here:

The current Codex task scratch pad is available for viewing here:

As always we welcome and value any comments on the work to date on the codex, or any suggestions anyone may have on the continued efforts to create the best codex there is (after the WP Codex naturally 🙂 ) comments & suggestions may be left on this entry.

Onwards & upwards,

~The BP Codex Team.


Codex Latest Articles

Recent Submissions:

The codex has received another batch of super cool articles and the team and community thank those contributors for all their hard work:
@imath –
@shanebp –
@imath –
@boonebgorges –
@mercime –

Keep them coming! 🙂

As always if anyone has suggestions for articles or would like to claim an article suggested to work on please check the Codex Articles Submissions List

Codex Templates:
Can we remind prospective authors that there are basic templates saved as draft pages in the codex that should be used for any articles being written, these are simple markup frameworks that provide a little uniformity and styling hooks should we need them and ensure we get a consistent look to the Codex pages.

Codex page – ‘Template Tag Reference’:

Although the BP dev team intend on introducing a phpdocs feature to the codex for classes/functions we have an existing page that is a useful reference for template tags, the page, found here, isin need of review, we have put a notice on the page and a provision for markup that can be copied to add a green checkmark against entries tested as valid current usage tags.

If you have time, it would be great if you could check one or two entries and either mark them as current and checked or mark them as outdated at the top of the page and let us know.

Codex Articles Begin To Arrive

A first flurry of new articles have began to arrive at the Codex’s door and the codex team wish to thank those people for their submissions.

Articles have been submitted by:

shanebp buddypress-member-toolbar-menu

PollyPlummer & Luca customizing-buddypress-avatars

dcavins displaying-extended-profile-fields-on-member-profiles | modifying-the-registration-form | preventing-spammer-registration

Also the team thank Sarah for her continued support and encouragement over at WordPress Tavern

We wait with bated breath for the next batch of articles to arrive in and if you are interested in writing for the codex you can still see if any of the suggested articles take your fancy on the codex article list, if one does get in touch and we’ll put your name to it or if you have suggestions please let us know.

The Codex recently submitted articles and suggestions list

Codex TOC

Codex Progress Update & TOC Re-visited

Codex Progress Update & TOC Re-visited

It’s time for a brief progress report from the codex team on current status of the codex.

Both Mercime and I have been working away on the first phase of the codex: restructuring of existing pages under new sections while also performing the ongoing audit of those existing pages to establish what needed updating or removing, a task in it’s self which is a lot more work than one expects.

In beginning the re-shuffling pf pages under new sections it quickly became apparent that my original fear – and one of the reasons people found pages hard to find – of ending up with pages too deeply nested under sections & sub-sections was coming true; even with our revised TOC we were finding that we were arriving at pages buried four or five clicks in, something that we didn’t really want, we had always wanted pages to be reached as quickly as possible. After agreement that we needed to rectify this Mercime undertook to review this and implement one last revision where the sections were revised to be six top level ones with child pages living directly under, increasing those top sections meant far less nesting and altogether a far better visual layout to menus.

We are happy now that this revision will serve the codex and users well, based as it is on the user feedback we gathered from the codex survey.

The initial phase to clean up and refresh the codex has been completed by the restructuring of the documentation as mentioned above.

The revised TOC has now been created as a google spreadsheet by mercime which is far more helpful in managing things it can be viewed and commented on at this link:

We are now working to add the new pages required into this sheet, a fair bit of which is done now and also adding in those members that have kindly offered to write articles. while that happens we also start to look at where we can improve the visual style and menus where applicable and write up a Codex ‘Standards & Guidelines’ to help people who wish to contribute to the Codex in future.

For those who want to contribute, following are lists of outstanding and suggested articles based on user feedback from members. If you want to participate, post a comment below and we’ll note ownership of the article in this post.

So to sum up, things are moving in the right direction, the work is slow but we expected that, it needs to be as thorough as possible to serve the community well.

The codex Team,
hnla, mercime.

BP Codex TOC Update

Revised Codex TOC Outline

This outline represents a revised version based in part from the feedback received from the recent codex survey. This revised version is subject to the comments and views of everyone and can be updated if sufficient comments concur on an aspect.

Introduction – Primary landing page

The actual codex landing page has been re-factored to follow this outline but can be changed.

Section 1: Intro

Introductory text- possibly stating the obvious? and could be removed?

Section 2: Main codex Areas – linking to parent page for sections.

  • For Regular Users
  • For Theme Builders
  • For Developers

Section 2: Contribute

Guidance on how people can get involved with the BP project – links to two pages ‘Codex formatting guide’ & general Participate & Contribute’ page with full BP project links

Section 3: Version list & changelogs

Links to full list of all BP version releases – updated to include links to zip downloads.

Section 4: Legacy docs – all docs prior to 1.7 are removed to this section

For All Users
Getting Started

  • Before Installing
    • System & Server Requiremets
    • Plugins > Add New
    • FTP/cpanel
    • Securing install – backups etc ( guide exists)
  • The installation process overview
  • BuddyPress Components and Features Overview
  • Using BuddyPress with WP MultiSite (guide to using BP with MS – how bp functions with subsites) new page

User Guide

  • Introduction (page parent, right hand sub page menu) –
    • Configuring BuddyPress
      • Settings > BuddyPress > Components
      • Settings > BuddyPress > Pages
      • Settings > BuddyPress > Settings
  • Managing Components
  • The registration process ( overview of reg process, email, activation, extending reg fields using xprofile fields) NP
    • Activity Stream Admin Panels
    • Group Management Admin Panel
  • Languages & translations, labels
  • Frequently Asked Questions
  • Tutorials(1)
  • For Theme Builders

    • Introduction (page parent, right hand sub page menu) – covers the essential principles for building sites / themes e.g. Standalone, working as child theme, clarifies bp-default/bp legacy.
    • BP Theme Compatibility 1.7 ( overview section )
      • intro to theme compat 1.7
      • The template hierarchy in detail
      • Upgrading template packed themes to theme compat
    • Building themes ( general pages covering actual approaches to theme building )
      • An overview on the various approaches one can take in managing BP templates/themes (N)
      • BP Default Child Theming
      • Working with BP Legacy -Theme Compatibility (N)
      • Building from theme compatibility templates in custom theme (N)
      • Building themes using Template Pack
      • BP Theme Unit Test – ala WP Theme Review Test – BP Default Theme and Twenty Twelve theme – @mercime already started this then stopped to create those BP Component Pages in Codex
      • Tutorials(1) ?

    For Developers

    • Introduction (page parent, right hand sub page menu)
      • Template Tags
      • Main BP loops, e.g. members loop, activity loop etc.
      • Functions list ?
      • Conditional Tags
      • Building and extending components, working with Queries.
        • Extending BP user account screens
        • Extending Group component
        • Working with the template stack / extending BP_Theme_Compat (N)
        • BP_User_Query (N)
      • Developing plugins for BuddyPress
      • Developing for BuddyPress & WP MultiSite
        • Guide to how BP functions with MS – intro page, new.
        • User Submitted Tutorials/code snippets –
      • Unit Tests
      • How To(1) – General ( collects series of shorter examples of how to do something e.g. ‘force ssl admin’)
      • (PHPDocs)

    Feedback on this proposed structure, suggestions for improvement is welcome and hoped for.

    Snipped from the codex survey is this comment Please make something scalable that won’t be obsolete by the time 1.9 comes out! and is something we try and bear in mind moving forward. This codex structural revision needs to be something we can build on and that serves to clearly manage pages under a clear hierarchy that allows people to quickly find the information they are looking for, to that end w welcome comments and feedback on the nature of nesting pages under sections, are there too many? Are pages buried too deeply? based on the old paradigm that any web page should not be more than three or four clicks away how do we stack up on that score?

    With the developers section certain information such as references to ‘Actions’ will be provided by PHPDocs to be implemented for the Codex.