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.

Comments (5)

    • Luciano,

      Yes, this will work perfectly fine in a single site installation.
      You’d follow the same instructions but no need to switch back between network admin and side admin to make plugin/forum changes.

      Good luck. Thanks for the comment.

      • Craig,

        I have another question regarding this topic; Do you think is better to make this Thesis + BP + Plugin + code installation or would it be better (and more trouble free) to install a BP compatible framework like Mingle? What would be your advice on this matter? and finally, what is your recommended BP compatible theme/framework?

        Thanks again for your time,
        Luciano

        • ha! Great question. To start, there are some great BuddyPress resources right on this site. You can find them all here: http://premium.wpmudev.org/projects/category/themes/?s=buddypress

          That will list more than a dozen buddypress theme related resources. I mention it because we try to make sure everything we develop compliments multisite and buddypress.

          Outside of that, you can find some great buddypress themes on a few of the other theme networks. Themeforest has a bunch for sale, most of them are pretty good.

          As far as a framework is concerned, very few developers take time to make sure their themes work with BuddyPress – it takes more time and requires more template tags be worked into the site. That’s why when you get a theme from us you know it will work.

          I like the Thesis theme because it is fast, lean, and very well supported. I’m not aware of any other theme frameworks that have integrated buddypress compatibility yet. That’s not to say they’re not out there, but I am not aware of any.

          In the end, it comes down to your budget and your development skills. If you have the budget and can have someone do a custom integration thats always going to be great. But if you’re on a tight budget, getting one of our pre-made buddypress resource themes is definitely the way to go. Most of them come with a bevy options you can change to make your site look unqiue. You can always add tweaks to the code and change the site from there.

          hope that helps.

Participate