Tutorial: Integrating Thesis and BuddyPress – Part 2

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 this article, Part 2 of Integrating Thesis and BuddyPress, we focus on the installation of the Thesis Theme Framework and the Thesis BuddyPress Child Theme.

Right now your site should look like a basic install of WordPress. If you are using the basic Twenty Eleven theme, it probably looks like this:

You’ll notice the pages created by BuddyPress have automatically added to the menu bar in the 2011 theme, but again, clicking on them will likely show a blank screen since we have not yet integrated BuddyPress compatibility or a BuddyPress usable theme. That will be covered next.

 

Step 1: Install Thesis Theme Framework

During the installation of BuddyPress you also installed BBPress forums, your second plugin.

For the BuddyPress – Thesis child theme to work, we must also install the Thesis Framework. As of the writing of this article, Thesis 1.85 is the most current version and your theme file should be named thesis_185.zip. It can be installed just like any other theme, through the WordPress Theme uploader.

In your network admin dashboard navigate to the THEMES options panel, select ADD NEW, select the UPLOAD link, and then the CHOOSE FILE button. When the window pops up, navigate to the thesis_185.zip file and choose it. When the pop up closes choose INSTALL NOW. You do not need to network activate the theme.

Changing File Permissions in Thesis

The Thesis developer recommends you change the name of and permissions for a few files and folders inside the Thesis Them, in particular:

• custom-sample folder gets renamed to custom
• layout.css permissions changed to 666
• /custom/cache folder permissions changed to 775

Here’s a short video on changing permissions in thesis. I’m using Coda, but the same process should work with your FTP program as well.

9gHIlfVxJRo

It’s noteworthy to mention that inside the thesis folder I’ve created a copy of the original “custom-sample” folder, and then changed it’s name to “custom.” This is different than what Thesis instructions recommend which is simply changing the original custom-sample folder to “custom.”

The custom-sample folder that we leaved behind, in tact, will act as a backup for us if we edit or harm the custom files some time down the line. That will make sure the thesis framework continues to work regardless of what changes we make inside the custom folders.

Install Thesis-BP-Child Theme

Following the same new theme process as above, you’ll add the Thesis-BP-Child Theme. If you have not yet downloaded that file, it can be found here.

While you’re at it, also grab the BBPress-Thesis connector plugin which we’ll use later in the tutorial. That file can be found here.

The following video walks you through the plugin installation and a short code customization that makes the child theme recognize the parent Thesis theme.

YmLutYd5QRk

One thing to note when you’re installing the Thesis-BP Child theme is that it will appear broken. It will not show up in your available themes list; instead it shows up under a broken themes link in the themes options admin area. Clicking on that broken themes link will show you an error message explaining what needs to be done to fix the theme. In our case, we’ll need to change the child theme’s style.css file to reflect the correct parent theme – thesis_185. Those instructions appear around the 2:30 mark in the video listed above.

The Progress So Far

With Thesis and the Thesis-BP Child theme installed and activated, your site should look like the image below:

Most of these items are added automatically by BuddyPress or Thesis, but if your site doesn’t look like this yet, there are a few things you can do to mirror where we are:

In Thesis >>Design Options, I’ve set columns to 3, with a 480 px width for content column, and 195 px width for each of the 2 sidebars. I’ve also set the Column Order to use the layout “Content-S1-S2.”

In Appearance >> Widgets – I’ve put the following inside Sidebar 1:

• Search
• Recent Posts
• Recent Comments
• Archives
• Categories
• Meta

There is nothing in Sidebar 2, but Thesis automatically adds some default content, which you should see in the image above highlighted in blue on the right most sidebar – sidebar 2. Don’t worry, we’ll change all this later.

If, for some reason, you cannot get the site to mirror exactly what we have here, do not worry – these are cosmetic site settings that we’ll be changing soon anyway. As long as the site framework is in and the css looks lined up correctly we know we’re on the right track.

All the widgets will be changed and the column lineups will be changed with CSS in the final part of this tutorial series, so don’t fret over pixel widths  or the general site look and feel just yet.

Creating Useful BuddyPress Menus

You’ll notice from the image above, that Thesis clears out the default WordPress page menu, so before we start working with BuddyPress specific settings, it helps to create a main navigation menu.

You can add a WordPress menu by navigating to the Appearance options settings and clicking on Menus. You will be presented with a blank screen that looks like this:

Create a Main Navigation Menu

In the Menu Name selector box type the words “Main Menu” and then click the bright blue “Create Menu” button to the right. Once you do that, the items to the left will no longer be grayed-out, and we’ll be able to select some of those options.

In the Primary Menu drop down box, select the Main Menu we just created and then click the blue save button. Now scroll down a bit and let’s add some pages.

Adding Pages to the Main Menu

Under the Pages Heading Box, click the tab “View All.”

You will see a listing of all pages within our site, sorted alphabetically. There is one exception – the Home page, which should show up on top of all the other pages.

Most of the pages that we can see were added during the BuddyPress installation process. We’re now going to select each one of them for display in our new website.

Place check marks next to the following pages:

• Activity
• Blogs
• Forums
• Groups
• Members
• Register

Click the “Add to menu” button.

These menu items will be added to the right top window frame as vertical menu items.

You can drag and drop them into any order you wish, but for now – leave them as is. Remember to click the Save Menu button to lock these pages in place.

View your site and refresh the page. The menu should be added and your page should look like this:

Take a moment and click each page menu item to make sure they are in working order. Now, each page should lead to a specific BuddyPress function, rather than showing a blank screen.

However, you will notice two inconsistencies:

1. Register menu item takes you to the main blog loop
2. Forums menu item takes you to the Group Forums page

#1 occurs because you are logged in as an admin. If you log out and click back on the register menu item you will be taken to a new user registration page. This is essentially what your website viewers will see before they become a part of your network.

#2 is the issue to which I referred in the BuddyPress installation video. When you click on the Forums menu item you want it to show you the site wide forums page, but instead you are taken to the group forums page. This is how BuddyPress works with BBPress forums – it forces the group forum to take priority over the   site wide forum when they are both installed together. This might be cleared up in a future version of BuddyPress as they change their template system, but for now it represents a fix we’ll have to make, and we’ll do that in the next section.

 

Configuring BuddyPress

Make sure to have the BBPress-Thesis connector plugin handy as it will solve issue #2 mentioned above. We’ll also make a few other changes in the BuddyPress settings panel to get just the right functionality. All that is explained in the Configuring BuddyPress video below.

Ie4eV-cvVDQ

Congratulations, your site is now a fully functioning BuddyPress-Thesis Child theme. You have all the cool functionality of WordPress Multisite, BuddyPress social networking, and the powerful Thesis Framework.

If you’ve followed this tutorial your site should now look like the image below:

If you got lost along the way, it helps to go back to the beginning and make sure you didn’t miss a step. There are parts of the process that must be completed in order – meaning other things downstream rely on those upstream changes being made first.

But as good as the site looks, there’s still some work to be done styling the theme to make it more aesthetically pleasing, and inviting to our readers.

In the next and final post, Part 3 of the Integrating Thesis and BuddyPress series, we’ll discuss a few simple CSS changes that will make your new BuddyPress site truly unique.

Tags:

• child themes