In this chapter, we're going to cover the following:
What is BuddyPress?
What is a theme?
What is a community?
A brief look at responsive design, adaptive design, and mobile first
A look at some existing BuddyPress sites and existing themes
What are your options when creating a theme?
At the end of this chapter you will have an overview of the past and present state of BuddyPress themes along with a grasp of some of the topics anyone creating a theme should know about.
A community for your town or village
An intranet for a company
A safe community for students of a school to interact with each other
A community around a product or event
A support network for people with the same illness
BuddyPress has a lot of different features; you can choose which you want to use. These include groups, streams, messaging, and member profiles. In the next chapter we'll look at these in more detail.
BuddyPress and WordPress are open source projects released under the GPL license. You can find out more about GPL here: http://codex.wordpress.org/License. A team of developers work on the project and anyone can get involved and contribute. As you use BuddyPress, you may want to get more involved in the project itself or find out more. There are a number of ways you can do this:
If you use IRC, you can use the dedicated channels on irc.freenode.net #buddypress or #buddypress-dev. The developer meeting is every Wednesday at 19:00 UTC in #buddypress-dev.
IRC (Internet Relay Chat) is a form of real-time Internet text messaging (chat). You can find out more here: http://codex.wordpress.org/IRC.
Your site theme can be thought of as the site design, but it's more than colors and fonts. Themes work by defining templates, which are then used for each section of your site (for instance, a front page or a single blog post). In the case of a BuddyPress theme, it brings BuddyPress templates and functionality on top of the normal WordPress theme.
Wordpress.org theme handbook: http://make.wordpress.org/docs/theme-developer-handbook/
WordPress CSS coding standards: http://make.wordpress.org/core/handbook/coding-standards/css/
Theme check plugin (make sure you're using the WordPress standards): http://wordpress.org/extend/plugins/theme-check/
There is a great section in the WordPress codex on design and layout: http://codex.wordpress.org/Blog_Design_and_Layout
This theme was a workhorse solution giving everything a style, making sure you could be up and running with BuddyPress on your site. For a long time, the best way was to use this theme and create a child theme to then do what you wanted for your site.
A child theme inherits the functionality of the parent theme. You can add, edit, and modify in the child theme without affecting the parent. This is a great way to build on the foundation of an existing theme and still be able to do updates and not affect the parent. For more information about a child theme see: http://codex.wordpress.org/Child_Themes.
The BuddyPress default theme allowed people without much knowledge to set up BuddyPress, but it wasn't ideal. Fairly quickly, everything started to look the same and the learning curve to create your own theme was steep. People made child themes that often just looked more like clones.
The fundamental issue above all was that it was a plugin that needed a theme and this wasn't the right way to do things. A plugin should work as best it can in any theme. There had been work done on bbPress to make the change in the theme compatibility and the time was right for BuddyPress to follow suit.
bbPress is a plugin that allows you to easily create forums in your WordPress site and also integrate into BuddyPress. You can learn more about bbPress here: http://bbpress.org.
Theme compatibility in simple terms means that BuddyPress works with any theme. Everything that is required to make it work is included in the plugin. You can now go and get any theme from wordpress.org or other sites and be up and running in no time.
Should you want to use your own custom template, it's really easy thanks to theme compatibility. So long as you give it the right name and place it in the right location in your theme, BuddyPress when loading will use your file instead of its own.
Theme compatibility is always active as this allows BuddyPress to add new features in future versions. You can see this in the following screenshot:
Probably by now you're asking yourself if you even need a theme for BuddyPress. With theme compatibility while, you don't have to, there are many reasons why you'd want to. A custom theme allows you to tailor the experience for your community. Different communities have different needs, one size doesn't fit all.
Theme compatibility is great, but there is still a need for themes that focus on community and the other features of BuddyPress. A default experience will always be default and not tailored to your site or for BuddyPress. There are many things when creating a community theme that a normal WordPress theme won't have taken into account. This is what we mean when we nowadays refer to BuddyPress themes. There is still a need for these and a need to understand how to create them.
A community is a place for people to belong. Creating a community isn't something you should do lightly. The best advice when creating a community is to start small and build up functionality over time.
Social networking on the other hand is purely about connections. Social networking is only part of a community. Most communities have far more than just social networking. When you are creating a community you want to focus on enabling your members to make strong connections.
BuddyPress is perfect for creating niche communities. These are pockets of people united by a cause, by a hobby, or by something else. However, don't think niche means small. Niche communities can be of any size.
Having a home online for a community, a place where people of the same mindset, same experiences can unite, that's powerful. Niche communities can be forces for change, a place of comfort, give people a chance to be heard, or sometimes a place just to be.
A community should encourage engagement and provide paths for users to easily accomplish tasks. You may provide areas, such as for user promotion, for user generated content, set achievements for completing tasks or allow users to collect points and have leaderboards. The idea of points and achievements comes from something called Gamification and is a powerful technique.
Gamification techniques leverage people's natural desires for competition, achievement, status, self-expression, altruism and closure
|-- Wikipedia (http://en.wikipedia.org/wiki/Gamification)|
Community is something you experience offline and online. When you are creating a community it's great to look at both. Think how groups of people interact, how they get tasks done together, and what hurdles they experience. Knowing a little bit about psychology will help you create a design that works for the community.
When you create your theme, you need to be careful to design it not only for one device. The world is multi-device and your theme should adapt to the device it's being used on without causing any issues. There are several options open to you when looking to create a theme that works across all devices.
Responsive designs worked initially a lot by using media queries in CSS to create designs that adapted to CSS media queries. From this emerged the term adaptive design. There are many definitions of what responsive and adaptive mean. Adaptive loosely means progressive enhancement and responsive web design is part of this. You could say that responsive web design is the technique and adaptive design is the movement.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features: http://www.w3.org/TR/css3-mediaqueries/.
Mobile first makes sure that the site works first for the smallest screen size. As you move up, styles are added using media queries to use the extra screen real estate. This was a phrase coined by Luke Wroblewski. This is a lighter approach and often preferred as it loads just what the device needs.
In the WordPress world, mobile themes tend to come in the form of plugins or apps. Historically, most WordPress themes had a mobile theme and this theme showed only to those accessing a mobile device. You were presented with a default theme that looked the same regardless of the site and there was often no way to see a non-mobile experience (a point of frustration on larger mobile devices).
When thinking about mobile apps or plugins, a good rule of thumb is to ask if it's bringing something extra to your site. This could be focusing on one aspect, or making something mobile so devices have access to integrate. If they are simply changing the look of your site you can deal with that in your theme. You shouldn't need an app or plugin to get your site working on a mobile device.
There is a whole world out there of great BuddyPress examples, so let's take a little bit of time to get inspired and see what others have done. The following list shows some of the custom themes:
Cuny Academic Commons: http://commons.gc.cuny.edu/. This is run by the City University of New York and is for supporting faculty initiatives along with building community.
Enterprise Nation: http://enterprisenation.com. This site is a business club encouraging connections and sharing of information.
Goed en wel.nl: http://goedenwel.nl. This is a community for 50-65 year olds and built around five areas of interest.
Shift.ms: http://shift.ms. This is a community run by and for young people with multiple sclerosis.
Teen Summer Challenge: http://teensummerchallenge.org. This site is part of an annual reading program for teens run by Pierce County Library.
Trainerspace: http://www.trainerspace.com. This site is a place to go to find a trainer and those trainers can also have their own website.
If you want to discover more great BuddyPress sites, BP Inspire is a great showcase site at http://www.bpinspire.com/.
Use an existing WordPress theme with theme compatibility
Use an existing BuddyPress theme
Create custom CSS with another theme
Create custom templates – use in child theme or existing theme
Create everything from custom
You can get free WordPress themes from the WordPress theme repository http://wordpress.org/extend/themes/ and also buy from many great theme shops. You can also use a theme framework. A framework goes beyond a theme and has a lot of extra tools to help you build your theme rolled in. You can learn more about theme frameworks here: http://codex.wordpress.org/Theme_Frameworks.
You can get both free and paid BuddyPress themes if you want something a little bit more than theme compatibility. A BuddyPress theme, as we discussed earlier, brings something extra and it may bring that to all the features or just some. It is a theme designed to take your site beyond what theme compatibility brings.
If you are looking for free themes your first place should be the theme repository on WordPress.org http://wordpress.org/extend/themes/. The theme repository page will look like the following screenshot:
You can find BuddyPress themes by searching for the word
buddypress. Here you can see a range of themes.
Custom Community by svenl77: http://wordpress.org/extend/themes/custom-community.
Fanwood by tungdo http://wordpress.org/extend/themes/fanwood.
Frisco by David Carson: http://wordpress.org/extend/themes/frisco-for-buddypress.
Status by buddypressthemers: http://wordpress.org/extend/themes/status.
Infinity Theme Engine: http://infinity.presscrew.com.
Commons in a box: http://commonsinabox.org. All the power of the CUNY site (mentioned earlier) with a theme engine.
Buying a theme is a good way to get a lot of features from custom themes without the cost or learning involved in custom development. The downside of course is that you will not have a custom look, but if your budget and time is limited this may be a good option.
When you buy a theme, be careful and as like with anything online, make sure you buy from a reputable source. There are a number of theme shops selling BuddyPress themes including (not extensive list):
Mojo Themes: http://www.mojo-themes.com
Press Crew: http://shop.presscrew.com
Theme Loom: http://themeloom.com/themes/pure-theme/
Theme Forest: http://themeforest.net/category/wordpress/buddypress
WPMU DEV: http://premium.wpmudev.org
As you can see from this chapter, the way things are done now since the release of BuddyPress 1.7 are a little bit different to before, thanks to theme compatibility. This is great and means there is no better time than now to start developing BuddyPress themes.
In this chapter we skimmed over a lot of important issues that anyone making a theme has to consider. These are important, just like knowing how to build. You should have in mind the users you are creating for and what their experience will be. We all view sites on different devices, we all need to have a similar experience and not one where we're penalized.
Starting with the next chapter, we will start to create our own themes. So, let's get on with this journey into BuddyPress theme development!