BuddyPress 1.7 is very soon on its way to a dashboard near you. Theme compatibility is one of the most exciting features of the upcoming 1.7 release. But how will this affect existing BuddyPress themes?

If you’re a BuddyPress theme author and your theme supplies its own BuddyPress templates, you will need to prevent BuddyPress from running its theme compatibility when your theme is active. Boone Gorges outlined how to do this in the latest post on the BuddyPress Development blog. You’ll want to add this line to your theme’s functions.php file:

1

add_theme_support( 'buddypress' );

Although BuddyPress knows not to load its theme compat when it finds your PHP templates, it needs to be told if you’re already using your own CSS and JS for your BuddyPress theme. You don’t want to cause any conflicts in styling or AJAX with BuddyPress trying to load scripts that your theme is already loading.

Please note that if you have created a child theme of the BuddyPress default theme, there is no need to manually register BuddyPress support.

Going forward, theme developers will need to use this function when building fully custom themes that load that load their own CSS/JS files. Read more about bit on BuddyPress trac ticket #4846

Related posts:

1. Themeforest Releases Huddle: A WordPress and BuddyPress Community Theme Huddle is a new and unique BuddyPress theme now available...
2. Coming in BuddyPress 1.7: Compatibility for ALL WordPress Themes BP 1.7 may be the most exciting BuddyPress release yet!...
3. Status: A New Responsive Child Theme for the BuddyPress Default Theme Status is a brand new free child theme for the...

Now, the wiz kids behind the inception and development of this project have harnessed its power and released it in a new, extremely well-documented and packaged project, Commons in a Box, aka CBOX.

In their words, here is a brief description and feature set of this ambitious and benevolent project:

CBOX takes the complexity out of creating a Commons site, helping organizations create a space where their members can discuss issues, collaborate on projects, and share their work.

CBOX is based on WordPress and BuddyPress and features the following:

• Out-of-the-box functionality with an intuitive set-up that guides site administrators through each step of installation.
• A powerful, responsive, highly customizable theme developed for community engagement, based on PressCrew’s Infinity Theming Engine.
• Responsive design for easy viewing on many devices, including tablets and smartphones.
• Collaborative document creation and file sharing.
• Reply-By-Email functionality for quick, on-the-go communication.
• Compatibility with many other WordPress and BuddyPress themes and plug-ins.
• Expansive wiki options.

Check out the CBOX demo to see the software in action.

Before you start thinking that this is the ultimate solution for a company that wants its own Facebook, there are a number of differences that make CBOX unique and much more versatile than its Harvard-born predecessor. For example, the wiki capabilities of Commons endorse a more collaborative approach to content than Facebook’s more profile and update-driven approach.

Collaborate With Wikis and Groups

The wikis make collaboration a key element of the CUNY Academic Commons, allowing users to create and share resources across the community. Wikis can be created by anyone but immediately become public, available for editing by any other member. Wikis can only be made private by a system administrator. Site members can then set up a Watchlist of the wikis that they choose to follow and collaborate on.

Users can also create groups, designate them as public or private and have a place to share files, forums, group docs and announcements within the structure of a particular topic or interest in a more personal and directly interactive way.

Public Profiles

In this version of CBOX, there is no such thing as a private profile, which means that a user’s profile could potentially show up in a Google search. Instead, the documentation recommends that a user who is concerned about privacy should use an alias, rather than a full name. I suppose that if you’re terribly private and worried about such things, perhaps an online social network isn’t for you. In all fairness, however, they do intend to look into developing this option later on down the road.

BuddyPress Theme Included

The implementation of Commons requires a BuddyPress theme. Admins can roll out CBOX on a current installation of BuddyPress but for those who are starting from scratch, the good CUNY folk even include a CBOX BuddyPress theme for getting started. They’ve teamed up with Marshall Sorenson and Bowe Frankema of PressCrew to offer the Infinity Theming Engine as part of the package.

You’ll find that with the Infinity theme active you will have CBOX-specific theme options to customize for your community:

Recommended Plugins to Extend CBOX

There is also a slew of recommended plugins on the CBOX site, intended to help installers and commons managers get expansive social network functionality at their fingertips. The CBOX folks have preselected the plugins based on their compatibility, both with the CBOX installation and with each other. As new versions of the plugins become available, CBOX will notify admins of the changes and walk them through the upgrade process.

100% Open Source Software

Built using WordPress Multisite, BuddyPress, bbPress and MediaWiki, CBOX is open-source all the way and seeks to promote the same platform that has enabled CUNY faculty to collaborate and build an online community. It will be exciting to watch this project empower other organizations to build a shared space for dynamic collaboration.

Props go out to the authors, designers and developers of this project for releasing an exciting and vibrant project into the wild. Are you excited to install CBOX and try it out for your community? If so, we would love to see how you choose to use it. Send us your feedback and a link to your new community site built with Commons in a Box.

Related posts:

1. Luca’s Theme: A Free WordPress and BuddyPress Theme Based on Twitter Bootstrap Check out this brand new free WordPress and BuddyPress theme,...
2. Free Community Version of BuddyPress Links Now Available Increase sharing on your BuddyPress site by giving members the...
3. BP-Tricks has Relaunched with an Expanded Community for BuddyPress Lovers If you’re a BuddyPress fan or new to the platform,...

As a quick recap, In  Part 1 of Integrating Thesis and BuddyPress - we covered installing WordPress Multisite (briefly), reviewed the network and site dashboards, and then moved on to a detailed video installation of BuddyPress.

In Part 2 of Integrating Thesis and BuddyPress, we focus on the installation of the Thesis Theme Framework and the Thesis BuddyPress Child Theme.

If you’ve been following along with the tutorial thus far, your website should look something like this:

Custom Editing in CSS

We’re going to concentrate on making a full size header, styling the main nav menu, and more evenly spacing our content and sidebar columns. With just 12 short lines of CSS you can turn a plain, stock installation of thesis into a unique display different than any other BuddyPress theme out there.

There’s no video tutorial for this section, but you do get a copy of the custom code we used to make your site look like what we have in our example.

Finding the Right CSS File

One of the benefits of using Thesis is that your custom CSS can be contained in just one file, conveniently located in the child theme folder. Since we’re operating on the only site on our network, the blog id = 1, and to find the custom css file we’ll look in the custom folder that corresponds to our blog id – namely custom-1.

Here’s the path inside your web host: /wp-content/themes/thesis-bp-child_0.4.1/custom-1/custom.css.

Again, if the id of the blog you are styling is different than #1, make sure to input that number instead of #1 in the path above.

Once you’ve located the custom.css file on your server make a copy of it by pulling it down to your local computer. After you’ve done that, make another copy for safe keeping – we’re not going to touch the safe file – it will be used only as a backup.

Open the custom.css file with your code editor and insert the following code at the bottom of the file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.custom {background:#000;padding: 40px 0px;}
#container {width:960px;}

#header {border:none;}
.menu {width: 100%;height:50px;border:none;background: #000;text-align: center;}
.menu li {display:inline;float:none;padding:0px 15px;}
.menu li a {display:inline-block;font-size: 16px;background: #000;}
.menu li a, .menu .current-menu-item a, .menu .current-menu-item a:hover {background:#000;color:#fff;border:none}
.menu li a:hover, .menu ul li a:hover, .menu .current-menu-item a:hover {background:#df4932;color:#fff;}

#content{width:540px;}
#bbpress-forums{width:920px;padding:20px;}

#sidebars{width:200px;}
#sidebar_1,#sidebar_2{width:200px;}
.bbp-login-form fieldset{padding:10px;}

Make sure to save the file, and upload it back to the server with your FTP program. It will probably ask if you want to overrite the file that is currently there, answer yes.

Breaking Down the Code

Just 12 lines of code for great custom styling, but still, it might be confusing to some – so here’s a quick explanation of what we’re doing.

1

.custom {background:#000;padding: 40px 0px;}

This class selector highlights the background of the entire web page and turns it black. It also adds 40 pixels of padding to the top of the page before the menu starts.

1

container {width:960px;}

Here we’re setting the page container to 960 pixels wide – a popular standard web page size.

1

#header {border:none;}

Thesis inserts borders around the header automatically, so we’re turning those off this with code.
 

1

.menu {width: 100%;height:50px;border:none;background: #000;text-align: center;}

Here we’re setting the menu to span the entire width of our page container, and we’re setting a menu height of 50 pixels, which is more room than we actually need to display the font. That extra room will give us some spacing before the header starts, and since we are making the background black, it will blend in nicely. We’re also centering the text, which, along with the block display used in the following lines of code, will center the menu text in it’s unordered list menu items.

1

.menu li {display:inline;float:none;padding:0px 15px;}

This sets each menu list item to display inline, removes the automatic left menu float, and adds padding of 15 pixels to the left and right side of each menu list item. This helps space our nav text so the words don’t look so crunched together.

1

.menu li a {display:inline-block;font-size: 16px;background: #000;}

The anchor text links inside the menu items are set to display as inline-block items. The background is set to match the page background, which makes the menu look like it fades into the page.

1

.menu li a, .menu .current-menu-item a, .menu .current-menu-item a:hover {background:#000;color:#fff;border:none}

Here, we target the menu items with anchor links – including the currently selected page, and the color of the menu link text.

1

.menu li a:hover, .menu ul li a:hover, .menu .current-menu-item a:hover {background:#df4932;color:#fff;}

Here we set what color the menu items appear when we hover over the links. This is what gives the menus a red highlight when we hover over them, which makes a great contrast to the black background.

1

#content{width:540px;}

Here we set the middle content column to 540 pixels wide. This gives us more room in the main content area for the BuddyPress features like activity stream, groups, and profiles.

1

#bbpress-forums{width:920px;padding:20px;}

BBPress forum styling is automatically set to span the full width of our content column, but that makes the words butt up against the borders of our site. We use 20 pixels of padding all-around to give the forums some breathing room around the edges. It looks more pleasing to the eye and is easier to read.

Since we’re using 20 pixels on each side for a total of 40 pixels side padding, we need to reduce the column width from 100% (where it is set automatically) to 920 pixels as shown above. We arrive at this number by subtracting our side padding from the total width – 960 pixels – 20 pixels left padding – 20 pixels right padding = 920 pixels total width.

1

#sidebars, #sidebar_1,#sidebar_2{width:200px;}

This sets all sidebars used to a width of 200 pixels.

1

.bbp-login-form fieldset{padding:10px;}

This adds some spacing inside the border for the login area in the top right sidebar.

Adding a Full Size Header Image

Thesis, like some other theme frameworks, gives you the ability to easily add a custom, linkable header right from the options panel. A linkable header will forward your viewer back to the home page of your site when clicked. This allows us to remove the “home” page from our menu bar and save space for other more important items.

To use the same image that we use here in the tutorial, you can download a full-size header here. Once you’ve grabbed that image, save it to your desktop, then navigate to your site admin settings. Find the Thesis Options, then select Header Image. Select choose file and navigate to the file you just saved.

That header will display in your options panel and will automatically be added as your site’s header. Since the image is the same size as our site – 960 pixels wide, it will appear as if it takes the entire width of the web page.

The Finished Product

If you’ve followed along with the tutorial, your site will now look like this:

Pat yourself on the back, you’ve got the beginnings of a great BuddyPress site running on the fantastic Thesis Framework.

You can continue styling the site to your liking, and you can also add some additional content in your custom_functions.php file for even more functionality – like adding an activity stream to your home page (or any other page for that matter), or showing forum replies, or even group members. Stay tuned to WPMU.org for future tutorials on doing just that.

If you messed up somewhere along the line just go back and retrace your steps. If all else fails, start from scratch with a clean slate. If you have questions or just want to send a note, leave them in a comment below.

Related posts:

1. Tutorial: Integrating Thesis and BuddyPress – Part 1 Part 1 of 3 in a series on integrating the...
2. Tutorial: Integrating Thesis and BuddyPress – Part 2 Part 2 of 3 in a series on integrating the...
3. BuddyPress and Thesis Together At Last Integrate Thesis and BuddyPress with the BP Child Theme for...

If you were not aware that BuddyPress had been integrated with the Thesis premium framework you can read the precursor to this article: BuddyPress and Thesis Together at Last.

Marrying these two frameworks makes great sense. You get the speed and customizability of Thesis with all the cool functionality of BuddyPress – like forums, groups, users profiles, and activity streams.

Rather than needing several (if not dozens) of plugins to achieve the same level of functionality and the high degree of customization we desire, this tutorial will accomplish the same thing with just three plugins and 12 lines of custom CSS.

Notes and Resources

Please note that this tutorial uses both video and image screenshots; and unless otherwise indicated, you can enlarge both to full screen as they were shot in HD (1280 x 800). This should clear up any resolution issues that might occur as a result of fitting a large image or movie inside the column width of this site.

Also note, the Thesis-BP Child theme is a freely distributed theme, but the Thesis Framework on which the child theme relies is a premium theme that requires purchase from DIYThemes.com. Prices vary depending on the version you buy and how the theme is implemented.

For custom code editing, I’m using the program Coda for Mac, although you can use any one of many fine coding applications. Coda also includes an FTP program built-in, so I’ll be using this one program to take care of any editing and uploading that needs to be done. You can try a free editor like net beans or text wrangler, but do NOT use text edit in mac or a simple text editor in windows.

If you choose an editing program that does not feature a built-in FTP program you’ll need to grab one of those too, as we will be making some file permission edits and uploading changes we make to our live server. I recommend Transmit from the makers of Coda. It is extremely fast. A good free FTP program is Filezilla or Cyberduck.

When we have finished the tutorial, you will have created a site that looks like this:

Step 1: Install WordPress Multisite

There are a multitude of tutorials showing you how to install WordPress multisite, and this tutorial is not one of them.

However, since WPMU is an authority on WordPress, we will give you a few good resources that explain the process and make installing a new multisite quick and painless.

WPMU Multisite Manual

This is a thorough, step-by-step guide to installing multisite, with pictures, links, and other media to help you get it right the first time. To skip the history lessons and framework introduction and go straight to the installation procedure you can head here.

WordPress Codex

This is the official WordPress network installation guide from the WordPress Codex, but the reason there are so many other guides around is because this part of the codex is very confusing. Instead, we recommend the WPMU Multisite Manual.

If you have issues installing Multisite, the rest of this tutorial might be a bit advanced for you, but please do leave a comment here, or in the WPMUDEV support forums, or more particularly, the WPMU forums for BuddyPress (for WPMUDEV Members only). Our team will answer them as best we can.

Navigating the Network Admin and the Site Admin Dashboards

From here on out, we’ll be working with plugins and theme installation and modification. We’ll use very little custom code, so don’t worry if that’s not your thing.

Because we’ll be working with themes and plugins, you’ll need to switch between the network admin section of multisite and the actual website you’ve setup under that multisite installation. We’ll make sure to spell that out in each step.

You can see the difference between the two here:

Network Admin Area looks like this:

You’ll notice the network admin dashboard is sparse – including just the basics:

• Sites
• Users
• Themes
• Plugins
• Settings
• Updates

The network admin area is where most of the behind-the-scenes network setup happens, and changes here often affect the entire network of sites.

In comparison, the Site Admin Area looks like this:

The actual site dashboard has several more options including posts, pages, media, links, etc. It makes sense that this area controls settings specific to that individual site. Changes here do not track back up to the main network site, and do not affect other sites throughout the network.

Right now we’re just working with one networked site, but when your network has 1,000 sites or more, even small changes in the network admin can have monumental effects on the downstream sites and users.

BuddyPress can sometimes make it more confusing because you control the forums from the site admin, but when you change settings for BuddyPress it kicks you back to network admin areas because BuddyPress is a network wide application.

Take a moment to orient yourself in the admin areas because you will get lost and frustrated with these steps if you are not in the correct dashboard.

Step 2: Install BuddyPress Plugin

Once you’ve arrived at a working installation of WordPress Multisite, and understand the difference between the network admin dashboard and your actual site dashboard, we can install the BuddyPress plugin, which gives our site the functionality we want.

For that, you can follow the video below, which makes installing BuddyPress easy to understand. Remember the video is shot in HD – you can click the gear icon on the YouTube video panel to watch in 1080.

Summary

For more support on BuddyPress installations you can visit the WPMUDEV forums. If you were tripped up by any lesson covered in this tutorial, or just have a general note, please post it in the comments below.

In Part 2 of the Integrating BuddyPress and Thesis Tutorial we’ll discuss installing the Thesis Framework, Thesis-BuddyPress Child Theme, and some general configurations in BuddyPress to get us started. You can find that article here: Integrating Thesis and BuddyPress Part 2.

In Part 3 of the Integrating BuddyPress and Thesis Tutorial we’ll cover fine tuning the Thesis-BuddyPress Child theme and some quick CSS edits you can use to make your new BuddyPress site truly unique. You can find that article here: Integrating Thesis and BuddyPress Part 3.

Related posts:

1. BuddyPress and Thesis Together At Last Integrate Thesis and BuddyPress with the BP Child Theme for...
2. BuddyPress Tutorial Roundup: 15 Useful Hacks and Customizations The BuddyPress community is coming up with many excellent tutorials...
3. Integrating the affiliate plugin part one The 100th plugin recently released by WPMUdev was our wonderful...

For several years Thesis has been one of the most popular WordPress frameworks. It features lean code, nearly unlimited customization options, and top-notch support.

But the one area where Thesis had been lacking was in BuddyPress support. In fact, most of the premium theme frameworks lack support for BuddyPress. But one uber developer, known in the Thesis Community as Kristarella, put together a child theme for Thesis that works specifically with BuddyPress.

It packs together all the features of BuddyPress including forums, groups, activity updates, widgets and more – and places it right inside a clean installation of the Thesis Theme framework that we all know and love.

And to top it off, the BuddyPress Thesis Child theme works with both single WordPress installations and Multisite (Network) installations – the way it was originally envisioned.

Using BuddyPress with a Non-BuddyPress Theme

If you’ve ever completed a BuddyPress installation, you know that using the plugin with a non-supported theme causes all kinds of problems.

Usually, the first thing you’ll notice are blank pages. BuddyPress creates pages for the special functions like forums, activity, groups, etc. But without a BuddyPress supported theme with the code to display that special functionality, those pages display empty. Simply going to a url like www.yourdomain.com/activity is not going to show your BuddyPress activity.

Also, when using premium frameworks that work off special CSS files, like Thesis, BuddyPress tends to break the site formatting on BuddyPress specific pages. What you see is something akin to a wire frame without any of your site’s formatting.

These two issues are part of the reason most of the premium theme developers never cracked the BuddyPress integration.

Enter The BP Thesis Child Theme

The BP Child Theme for Thesis solves all those integration problems. It puts the BuddyPress elements where they need to be inside Thesis, and takes care of internal links to the pages that BuddyPress is creating.

For instance, your standard installation of Thesis looks something like this:

With the BP Thesis Child Theme, it looks like this:

There’s not much of a difference, other than the addition of a few menu items for the BuddyPress specific pages, and even those can be controlled by the standard WordPress menu system. You will also notice the addition of BuddyPress widgets for user login, forums, and recent active users. Right away, that shows you the integration is working beautifully.

Inside the BP Child Theme for Thesis

Functionally, the BuddyPress Child Theme for Thesis works exactly like a standard Thesis Theme Framework, regardless of whether it is installed on a single site or multisite network.

This is important because if you choose to use a non-Thesis BuddyPress theme, like the stock BuddyPress WordPress theme, to change the look and feel of the site you could be editing several php and css files corresponding to the different parts of the theme. That could be upwards of 10 files or more. Keeping them all straight can be a major task, even for the most seasoned developers.

BP Thesis Child mirrors the standard Thesis installation and gives you a custom folder where the custom_functions and custom.css files are located – the two files which control your entire site design and look. Those two files allow you to customize everything about the BuddyPress experience, making it easy to turn your stock site into something like the screencap below, with just a few simple edits:

While my site shown above isn’t exactly ready for primetime, it was created by using the BP Child Theme for Thesis with less then 20 lines of custom code. You’ll notice the custom font work too. That is a non-standard font which was included in the CSS file. You can find a tutorial on how to add custom fonts to CSS here.

Thesis Makes BuddyPress Easier to Use

If you’ve ever installed BuddyPress you’ve probably had one or two issues with resolving page slugs for the forums. This has to do with installing Group Forums and Sitewide Forums and how BuddyPress and BBPress give priority to one over the other.

In creating the BP child theme for Thesis, the developer took the forum page slug issue into consideration and created a very lean plugin (just one php file) that helps solve the slug incompatibility, and makes navigating the forums easier than on standard theme installations. If you intend to run this BP Child Theme for Thesis I recommend installing that plugin as well.

Activity feeds and forums work flawlessly as shown in the two images below.

Stay Tuned for a Tutorial

If this article has whet your appetite for some great Thesis – BuddyPress integration, stay tuned for the next article – a tutorial walking you through a BP Thesis Child Theme installation and a few simple code edits to make your BuddyPress site unique.

Related posts:

1. Free BuddyPress Themes WordPress MU and BuddyPress resources tend to be scattered across...
2. WooThemes Breaks Into the BuddyPress Theme Market The BuddyPress theme market has a new player: WooThemes has...
3. BuddyPress for single WordPress.org users (not WPMU)!!! Fascinating developments over at the BP forums where, according to...

Update #2: As of Salutation 2.0 this theme is remarkably more compatible with custom post types and WPMU DEV plugins.  We’re stoked to see the developers respond for the betterment of all customers.  The article and instructions below are no longer relevant and we’re seeing folks have positive results with this theme.  Thanks.

Seriously.  I’ve been thinking about this post for over a month now and it’s clearly gone on long enough.  Consider this an official statement on our support policy in regards to the Salutation theme on ThemeForest and an open letter to its developers.

First off, never in the history of WPMU DEV have we had to make a public statement about our support of a 3rd party product.  Obviously, we can’t guarantee support with everything that’s ever been written but our entire staff works hard to make sure we play as nice as possible with products such as GravityForms, companies like WooThemes, and services such as WP Engine.  We do this because it’s what’s best for our customers and at the end of the day that’s who we’re here to serve.

What serves our customers best today is to publicly state that the current version of  the Salutation theme has serious issues and we will no longer support it.  As I’m writing this the stats for this theme are 3534 downloads with a 5 star rating.  It’s popular and it’s loved. So what’s the big deal and why are we making this move?  Well, read on and I’ll tell you exactly why  we won’t support it, what you’ll have to do if you’re stuck with it, and what the developers could do instead of blaming us.

My first interaction with this theme was working with Joe, a member of our support staff. We couldn’t figure out why the theme wasn’t working well with our Q&A plugin which has several compatibility checks to work with as many themes as possible.  Joe purchased the theme with his own money so we could take a look at the code. When I looked at the download file my heart sunk.  The theme code by itself – no PSDs – clocks in at 15MB.  For those of you counting that’s about 28 times the size of the default BuddyPress theme and nearly 400% larger than robust theme frameworks such as PageLines!  I’m surprised folks are able to upload this thing to their site.  I’m sure more than a few have tried to upload it via the WordPress admin and hit their PHP memory limit.

Ok, fair enough, it’s a beast.  But code is poetry. Maybe what we have here is the “Lord of the Rings” of the theme world. Oh if only… the old phrase about beauty and skin deep comes to mind.

Instead, what we found is a theme that lacks in structure, conventional file naming practice, and strays completely from default WordPress themeing practices.  This causes a ton of issues – especially when using custom post types.  That’s bad news as custom post types are kind of a big deal and not likely to be going anywhere.  Most of our popular plugins use post types including: Events+, Q&A, Wiki, Directory, and our upcoming appointments+ plugin.

A theme template for a custom post type should follow the format single-POST_TYPE.php. Check the codex if that’s not clear.  That’s not good enough for Salutation apparently.  It has its own naming structure.  Our plugins provide “theme template” files within the plugin which are used for displaying the post-types. When the default display doesn’t work perfectly with a theme, most of the time you can copy the files from the plugin to your theme and then edit to get the exact thing you’re looking for.

Not so with Salutation. And when we call the page.php template with a “the_content” filter to insert our content, nobody can see it because part of their CSS puts a visibility hidden on most of the page.  I’m sure that has some cute effect, but it breaks a pretty simple filter.  It also completely fails to load the footer.

If you must use the Salutations theme with a custom post type plugin you’re in for a lot of painful work through trial and error.  And it appears that the theme developers don’t care too much.  After all, their theme works fine in a vacuum and to the average user it can appear that because things break when a plugin is activated, that plugin is to blame.

I’m going to outline the (rather ridiculous) steps you’d need to take to get this theme to start working correctly with our Q&A plugin here.  The process should be extendable to other custom post type plugins, but your mileage may vary.

To the Salutation developers: The codex and standards are there for a reason.  You’re hurting your customers and the larger WordPress community when you ignore it.

BTW, the following code solution was developed by one of our hard-working members, tom.eagles. I’ve actually had the privilege to speak to him personally and he’s a guy of real integrity. If you’re reading this and want someone to assist you, you should totally beg for the privilege of paying him to fix it up. Anyway, on to the guide…

The way to gain control over these features is by integrating it into the theme’s native structure. For example, for each file you add to the theme folder which has the get_header( 'question' ); and get_footer( 'question' ); code:

1. Create a new file named “template-[your-plugin-file-name].php” and copy the content of the plugin file into the new template file.

So if you had a plugin file called “single-question.php” your template file would be “template-single-question.php”

2. Delete the references to get_header( 'question' ); and get_footer( 'question' ); in the new template file (won’t be needing them for this theme).

3. Open the plugin file you copied the code from, for example “single-question.php” and delete all the content. Add the following code to the file:

create_page_layout('single-question', 'qa-layout');  // context = single-question

That is the only code that should be on the page. This tells the theme to load the “template-single-question.php” file and also to look for a custom layout with the key “qa-layout“. Now you can to to the Layout Manager for the theme (Appearance > Layouts) and make a new layout with the key “qa-layout” and it will be used for this page. The layout key is the second filed after the layout name when adding/editing a layout.

4. Repeat this process for the rest of the plugin files that include the same header/footer references. You can optionally assign the same layout key to each file, or give them different keys if you want to have the ability to set different layouts for different areas of the plugin.

This is what I did:

template-archive-question.php
template-ask-question.php
template-edit-answer.php
template-edit-question.php
template-single-question.php
template-user-question.php

These files were created in the Salutation theme folder.

I copied over the code from the original files with same name minus the “template-” part. The content in the original files ( that where already since before copied over to the Salutation Theme folder) were then erased and this line was added in each and every one of them, where the name of the template of course were changed to fit the file names like ‘single-question’, ‘ask-question’ and so forth,

<?php create_page_layout('archive-question', 'qa-layout'); // context = archive-question ?>

I then created a new layout that I am calling Q&A with the key being your suggestion: ‘qa-layout’.

I am using same layout for all files. I fixed only in that layout a minimal header, default footer and a container with Default content in it.

Here comes the CSS changes that are done ( all in the plugins general.css that you find inside the plugin directory:

Added following lines to the css:

width: 620px!important;

to

#qa-page-wrapper {
  float: left;
  overflow: hidden;
  padding-bottom: 2em;
        background-color:white;         width: 620px!important;         }

width:470px!important;

to

.question-summary {
  padding: 0 5px 0 0;
  float: right;
        width:470px!important;
}

width: 600px!important;

to

#question-form textarea,
#answer-form textarea,
.cleditorMain {
  margin: 20px 0;
        width: 600px!important;
}

This changes fix the whole plugin to keep itself nicely to max 620px and the titles of the questions to show up properly.

Following changes are done for the title and tags input areas in the questions editor and the editor itself:

width: 600px!important;

to

#question-form textarea,
#answer-form textarea,
.cleditorMain {
  margin: 20px 0;
        width: 600px!important;
}

width:380px!important;
to

#question-title,
#question-tags {
  border: 1px solid #999;
  background-color: #fff;
        width:380px!important;
}

And finally to make the plugin look nicely in your members area where you can see the questions you have posted and or answered.

background-color:white;

to

#qa-user-answers {
  margin-top: 0px;
        padding-top:10px;
        background-color:white; }

margin-top: 20px;

is changed to

margin-top: 0px;

and

padding-top:10px;

is added.

And last part added is

background-color:white;

to

.question {
  border-bottom: 1px dotted #999999;
  overflow: hidden;
  padding: 10px 0;
        background-color: white;
}

And a fix for the user information box that hangs around with ones user name and avatar on the right side next to the questions one has posted or answered:

padding-right:5px;

add to

.qa-user-details {
  float: left;
  line-height: 17px;
        padding-right:5px;
}

Whew, if you’re still reading this congratulate yourself and hopefully you’ve got a fully working display.

Related posts:

1. Salutation: A New HTML5 WordPress and BuddyPress Theme Salutation caught my attention this weekend. It’s a new HTML5...
2. Support Your Favorite Theme Shop at WP Candy’s Theme Madness Ryan at WP Candy has launched their Theme Madness competition....
3. [Applications now closed] Work with us – Support & Sales Pro at WPMU DEV We're looking for one or more excellent support and sales...

The Status theme has some powerful and unique features that go beyond your average BuddyPress theme:

• Per-user profile customization: Under Profile, there is a new navigation element called Design, where users can set custom backgrounds and link colours for their profiles.
• Friends list: A list of your friends shows in the sidebar
• Member stats: On member profiles, you can see how many status updates, forum topics, forum replies, blog posts, and blog comments the user has created.
• Fully responsive: Status looks good on screens of all sizes
• Navigation menu in the admin bar: A custom menu area has been added to the WordPress/BuddyPress admin bar.
• Show/hide comments in the activity stream: You can open or close any nested comments in the activity stream for a cleaner, less cluttered view.
• A login template to mean content doesn’t show on the front unless logged in

The personal profile design option is one feature that makes this responsive BuddyPress theme more Twitter-like than most BuddyPress themes. Users can set the background color, image, tiling, position and scrolling. They can also match their link colors to the background.

During the process of developing this theme, the team found that there were limitations in the way JavaScript is employed in the BuddyPress Default theme. Because they were working closely with BuddyPress core developers, the team was able to rework the bp-defaults JS to be less dependent on the specific markup in the default templates. This is a huge gain for BuddyPress theme developers and offers much more flexibility than before. You can find out more details about the specific tickets this addresses in the Status theme release post.

Since Status requires the activity stream, it will not even show up on your installed themes page unless BuddyPress is already active.

You can download it today from its home at Github: status.zip. Many thanks to the team members who contributed their time and energy to this project: @hnla, @vebailovity, @mercime, @DJPaul, @karmatosed. Want to contribute to the theme? Get involved with the project on github.

Related posts:

1. Allow BuddyPress Users to Edit Their Status Updates After Posting BuddyPress Edit Activity Stream is a new plugin that lets...
2. BuddyPress My Moods Plugin Adds Moods and Smileys to Status Updates Want a fun way to get members interacting more on...
3. BuddyPress 1.2 theme updates With the release of BuddyPress we’ve updated 2 of our...

Buddies

View Demo

Gratitude

View Demo

Pure

View Demo

Mint

View Demo

Frisco

View Demo

Bounce

View Demo

Top Business

View Demo

Balance

View Demo

Feature

View Demo

Fanwood

View Demo

BuddyPress Default Theme

View Demo

Related posts:

1. 10 Free BuddyPress Themes Compatible with BuddyPress 1.5 Now that BuddyPress 1.5 is officially out, a few theme...
2. 10 Places to Find BuddyPress Themes Wondering where all the BuddyPress themes are? Check out our...
3. Two New WordPress and BuddyPress Review Themes Available on Themeforest Want to build a review site using BuddyPress? Check out...

Balance has several unique features that make it stand out from other BuddyPress themes, including:

• Works with all BuddyPress 1.5 compatible plugins
• Activity Stream Tour: Provides your new members a guided tour
• BP Component Introductions: Easily insert a introduction text, advertisements or notifications on all the BuddyPress directory pages
• Private Community: Turn your community into a private community with the tick of a box.
• Facebook Connect Integration: Integrated support for the WP-FB Autoconnect plugin for one-click Facebook sign-ups.
• Social Sharing: Easily enable social sharing buttons for BuddyPress Group and Profile pages.
• BuddyPress Specific Sidebars: With a unique sidebar for every BuddyPress component you put the right content at the right place easily.

Check out the live demo of this stunning theme to see it in action.

The folks at PressCrew have sent us an awesome Lebowski-inspired coupon code for our faithful wpmu.org readers. Input THEDUDEABIDES at checkout for a 20% discount on your purchase of the Balance theme.

Related posts:

1. Pre-Order the New Balance BuddyPress Theme from PressCrew Sign up for a special discount on the new Balance...
2. Featured BuddyPress Theme: Custom Community This week I’m going to look at some lovely theme...
3. Themeforest Releases Huddle: A WordPress and BuddyPress Community Theme Huddle is a new and unique BuddyPress theme now available...

The Politic theme features:

• Awesome design
• Strong focus on user-experience, usability, and beautiful typography
• Easily change colors via Theme Options
• Custom Background via Theme Options
• Custom Widgets: Flickr, Twitter, Video, Resolutions, Campaign Builder, Newsletter, Facebook, Recent Posts, Events
• Post Format Support: Audio, Video (both can be Self Hosted), Standard, Slideshow, Image
• Easy to use Theme Options (Unbranded)
• Custom Menus and Featured Images
• Unlimited Sidebars
• Page Templates: Home, Archive, Full Width, Contact
• Custom Login Logo
• Visual Shortcode Creator (Alerts, Tabs, Toggles, Columns, Buttons)
• Layered PSD
• Full localization!
• Readable and well-documented code
• Extensive Documentation
• Quality Support

The homepage is fully widgetized so you’re not locked in to one set display. You can add widgets and rearrange as much as you like:

View the live demo to see the theme in action.

The Politic theme is already BuddyPress 1.6-ready so you’ll be good to upgrade when the time comes without any issues. It’s also SEO-optimized and scores a 87/100 on Google Pagespeed out of the box.

With election year battles heating up, there has never been a more important time for a candidate to present a clean, clear, functional and modern website. More voters get their news, and therefore their opinions, from the web than ever before. If you or a politician you know needs an overhaul on web presence, check out Politic.

Related posts:

1. Launch Effect: A Free WordPress Theme for Creating a Viral Campaign in Minutes Launch Effect is a brand new free WordPress theme on...
2. Exclusive Discount Code for Pure: A New Responsive HTML5 BuddyPress Theme ThemeLoom has released Pure, another responsive BuddyPress theme that uses...
3. PressWork to Launch First WordPress Theme: InstaPress Inspired by Instagram PressWork 1.0 will be released next week with an exciting...