Tutorial: Integrating Thesis and BuddyPress – Part 1

In this three-part tutorial you’ll learn how to install the BuddyPress Child Theme for Thesis on a live WordPress multisite installation, and make a few custom code edits that turn a standard thesis install into a unique BuddyPress network site.

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:

Site-Admin-Dashboard-1024x652

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.