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.

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.

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.

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.

Comments (24)

  1. Craig – This is a stellar review-set for BuddyPress + MultiSite + Thesis integration – thx for taking the time to pull this all together, particularly the video!

    As a quick aside ques, have you tried/tested the BuddyPress Thesis Child Theme for configuration (as above) in term of full-functionality along with some of the other BuddyPress specific plugins? I’ve been able to get the BuddyPress + Thesis (using @ Kristarella’s Thesis_BP Child Theme) functionality basically as far as you have in these x3 tutorials – yet haven’t been able to fully integrate a few key BuddyPress specific plugins. As a quick example, I enabled @boonebgorges (one of the core BuddyPress devs) ‘BuddyPress Docs’ plugin & the collaborative editing/sharing functionality doesn’t quite work with the Thesis + BuddyPress Child setup. I’m guessing, though not 100% sure (yet) that certain BuddyPress functionality plugins would required specific adjustments/template-mods to the BuddyPress + Thesis Child theme to work? I’d like to take a stab on making the Child Theme work with a wider range of BuddyPress plugins – though I thought I’d ask around b/f I went down any ‘re-inventing-the-wheel’ time-sinks! I’ll see is @boonebgorges has any thoughts, as he’d dev’d a significant # of BuddyPress specific plugins.

    Anyways, thx for putting this Thesis + BuddyPress series up on WPMU!

    Jeff (Arsenault)
    Vancouver (Canada)

    • I’m sorry Jeff, I haven’t played with alot of the buddypress plugins as they relate to thesis. I’ll admit I stay away from them as much as possible and try to include only what i can code. In that regard, thesis with BP is pretty flexible. I suspect the new verion of BP might make it easier to input some of the BP functionality into any theme/framework – at least, that’s what I hope. A few people are working on integration with the new thesis framework, but i think they too are waiting to see what happens with the next bp.

      Thanks for the comment though. Appreciate the kind words.

  2. Hi Craig,

    For some reason I am getting this error

    WP_Query Object ( [query_vars] => Array ( [page] => 0 [year] => 2012 [monthnum] => 11 [name] => hello-world [error] => [m] => 0 [p] => 0 [post_parent] => [subpost] => [subpost_id] => [attachment] => [attachment_id] => 0 [static] => [pagename] => [page_id] => 0 [second] => [minute] => [hour] => [day] => 0 [w] => 0 [category_name] => [tag] => [cat] => [tag_id] => [author_name] => [feed] => [tb] => [paged] => 0 [comments_popup] => [meta_key] => [meta_value] => [preview] => [s] => [sentence] => [fields] => [category__in] => Array ( ) [category__not_in] => Array ( ) [category__and] => Array ( ) [post__in] => Array ( ) [post__not_in] => Array ( ) [tag__in] => Array ( ) [tag__not_in] => Array ( ) [tag__and] => Array ( ) [tag_slug__in] => Array ( ) [tag_slug__and] => Array ( ) [ignore_sticky_posts] => [suppress_filters] => [cache_results] => 1 [update_post_term_cache] => 1 [update_post_meta_cache] => 1 [post_type] => [posts_per_page] => 10 [nopaging] => [comments_per_page] => 50 [no_found_rows] => [order] => DESC ) [tax_query] => [meta_query] => WP_Meta_Query Object ( [queries] => Array ( ) [relation] => ) [post_count] => 1 [current_post] => -1 [in_the_loop] => [comment_count] => 0 [current_comment] => -1 [found_posts] => 0 [max_num_pages] => 0 [max_num_comment_pages] => 0 [is_single] => 1 [is_preview] => [is_page] => [is_archive] => [is_date] => [is_year] => [is_month] => [is_day] => [is_time] => [is_author] => [is_category] => [is_tag] => [is_tax] => [is_search] => [is_feed] => [is_comment_feed] => [is_trackback] => [is_home] => [is_404] => [is_comments_popup] => [is_paged] => [is_admin] => [is_attachment] => [is_singular] => 1 [is_robots] => [is_posts_page] => [is_post_type_archive] => [query_vars_hash] => 7df4b4ab1047f015149e3677e012dbe0 [query_vars_changed] => [thumbnails_cached] => [query] => Array ( [page] => [year] => 2012 [monthnum] => 11 [name] => hello-world ) [request] => SELECT wp_posts.* FROM wp_posts WHERE 1=1 AND YEAR(wp_posts.post_date)=’2012′ AND MONTH(wp_posts.post_date)=’11′ AND wp_posts.post_name = ‘hello-world’ AND wp_posts.post_type = ‘post’ ORDER BY wp_posts.post_date DESC [posts] => Array ( [0] => stdClass Object ( [ID] => 1 [post_author] => 1 [post_date] => 2012-11-15 10:48:18 [post_date_gmt] => 2012-11-15 10:48:18 [post_content] => Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! [post_title] => Hello world! [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => hello-world [to_ping] => [pinged] => [post_modified] => 2012-11-15 10:48:18 [post_modified_gmt] => 2012-11-15 10:48:18 [post_content_filtered] => [post_parent] => 0 [guid] => http://localhost/buddypress/?p=1 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 1 [ancestors] => Array ( ) [filter] => raw ) ) [post] => stdClass Object ( [ID] => 1 [post_author] => 1 [post_date] => 2012-11-15 10:48:18 [post_date_gmt] => 2012-11-15 10:48:18 [post_content] => Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! [post_title] => Hello world! [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => hello-world [to_ping] => [pinged] => [post_modified] => 2012-11-15 10:48:18 [post_modified_gmt] => 2012-11-15 10:48:18 [post_content_filtered] => [post_parent] => 0 [guid] => http://localhost/buddypress/?p=1 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 1 [ancestors] => Array ( ) [filter] => raw ) [queried_object] => stdClass Object ( [ID] => 1 [post_author] => 1 [post_date] => 2012-11-15 10:48:18 [post_date_gmt] => 2012-11-15 10:48:18 [post_content] => Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! [post_title] => Hello world! [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => hello-world [to_ping] => [pinged] => [post_modified] => 2012-11-15 10:48:18 [post_modified_gmt] => 2012-11-15 10:48:18 [post_content_filtered] => [post_parent] => 0 [guid] => http://localhost/buddypress/?p=1 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 1 [ancestors] => Array ( ) [filter] => raw ) [queried_object_id] => 1 )

    No idea where is this coming from. This happens when I activate thesis bp Child theme.

    • Imran,
      that was a snippet of code from the developer which should be commented out or removed and it works fine.
      I discuss this in the tutorial, you probably just skipped over it.
      Anyway, here’s what you do:

      Open custom_functions.php file of the thesis-bp-child theme. You’ll see the following code near the top of that file:
      (remember to save the file on a local drive as a backup just in case we need to come back to it.)

      function view_query() {
      global $wp_query,$wp_the_query,$posts_query,$query;
      print_r($wp_query);
      }
      add_action(‘thesis_hook_before_html’,'view_query’);

      you can remove that section altogether or change it to this:

      /*
      function view_query() {
      global $wp_query,$wp_the_query,$posts_query,$query;
      print_r($wp_query);
      }
      add_action(‘thesis_hook_before_html’,'view_query’);
      */

      THat should do the trick.

      Craig

  3. Thanks Craig,

    I really did missed that part, now it works like a charm, Though I am not a Wp Mu expert, but just have started with it.

    Your Tutorial for awesome and looking forward for your next part. However I have one more question. I just want to know which comment plugin you are using it really good… I have been building a child theme in thesis for my site personal site and want to integrate this comment in it.

    I will be glad if you share it.

    Thanks
    Imran

    • In the areas where you see the BuddyPress shots, that’s the standard commenting functionality with the thesis bp child theme.
      Group comments is slightly different since they take place inside the groups online, but that is part of the theme functionality as well.
      basically, what I’m saying is – no special commenting functionality. You’re all set. have fun!

  4. Hi Craig. great tutorial. I do, however, have a sudden problem. I am installing Thesis 2.0 with buddypress and I believe I messed something up. After installing buddypress and the thesis theme, I installed kristarella’s child theme. Now all I can see is a pure white screen. It is white when I visit the website itself, or even in my wp admin screen. I literally can’t do anything, and I can’t find the child theme in my files to delete it and go back. Any idea on what I can do? I am completely stuck.

    • Jesse,

      I have not tested this with Thesis 2.x yet, so I can’t offer any guidance as to whether it works or not – out of the box. Kristarella mentioned she’d be working on new integration – but may have been holding off for the BuddyPress update – which she thought would work better with inserting code into the new T2 boxes.

      I’ll probably dive into it as well in the new year. My guess, is that certain snippets of code that provide the buddypress functionality need to be moved in order to be displayed properly.

      Sorry I couldn’t be more helpful on this on yet. I’ll post a note as soon as I get back into it.

      Craig

      • Thanks for the quick reply, Craig. I went ahead and followed the guide here using 1.85 (again, great tut!). Everything worked fine up until I got to installing the bbpress-thesis_124 compatibility plugin. After activating it, the site goes blank. When I de-activate it, everything is fine.

        I can’t find any missed steps in the process. Any idea what may have went wrong?

  5. Yes, Craig, it is coming along great. Though I have to do a bit of work on the community element, such as the register page. So you may hear from me again! I appreciate your time. Thanks for replying! :)

  6. Hey Craig,

    hope you had a great holiday season. Time to get back to work for this guy!

    As I mentioned, I have an issue with the “register” page in my site (www.inspirationtravels.com). When users click it, the body of the page is blank, but the widgets are still intact.

    Any idea what this could be?

    • Not sure, haven’t run into that issue.

      Just a quick look at that page code shows the form fields for the registration form are not being created.
      The form div is there, but no fields.

      A quick search of the BP forums showed this popping up a few times as a bad integration with the WP Theme my login plugin, as well as a few others.
      Not sure if you’re running any of those.

      I would check to see if there are some plugin issues that might be causing that on your site. SEcond to that I would double check to make sure you’re running the most recent version of Kristarella’s connector plugin that helps BP child theme work.

      If that doesn’t get you anywhere, run a post up the thesis support flagpole in this thread: http://diythemes.com/forums/showthread.php?39175-New-attempt-at-BuddyPress-child-theme

  7. Hey, Craig. I decided to ditch buddypress until a later time. I’m halfway around the world, broke, without internet where I stay and as much as I want to, I really can’t teach myself to do all of this right now. WordPress is enough to learn on its own.

    I’d like to undo everything I did from this tutorial to get me back to the basics so I can update to wordpress 3.5 and Thesis 2+ and just worry about the network when I am in better circumstances.

    Any chance you might be able to point me through this? I don’t want to mess anything up by winging it. I REALLY appreciate all your help!

    Cheers, Jesse

      • Well, I’d like to undo the multisite installation. Also, I wasn’t sure if I should revert the changes made to the permissions or if that’s fine to leave. Then I assume I can just deactivate the buddypress plugin and the child theme.

        In the end, I just want to have the regular wordpress blog I started with, without losing the content I posted, and if possible, not mess up the design much. Then I’ll upgrade to Thesis 2 and just go from there with a standard blog.

        • …And the reasoning is that Thesis 2 does not work with buddypress, and there are just too many problems coming up with updates, etc. Maybe I don’t need to undo the multisite installation because it may not be causing problems. Maybe it is just the buddypress. If so, that would be great as I could just deactivate the buddypress plugin and Kristarella’s child theme. At least that’s what seems logical based on what I know.

          • Yes, as of yet T2 doesn’t seem to be supporting any kind of buddypress integration out of the box. There’s a small team of Thesis developers working to change that, but no date on that just yet.

            To restore your site back to a single installation you’ll need to do a few things:

            First, you’ll want to take care of the sites you might have created in your network. If you want to save that data, make sure to export the posts and other content so you can important that into your main blog (if necessary). If you were just messing around testing and don’t care about losing those sites, then skip that part.

            During the multisite installation you added several lines to your wp_config file. You’ll want to remove those lines (or comment them out – if you think you might return to multisite at a later date). Make a backup before you do – just in case.

            You should at that point be able to log back into wordpress and you’ll notice the “My sites” is gone from menu and just your blog name remains. You’re back in single view.

            When you setup multisite, there are globals set inside your database. Since you said you might return I would let those be. It shouldn’t cause any errors or pose any security concerns.

            Hope that helps. Let us know how it goes. Drop a note if you run into trouble.

  8. Hi Craig,
    Thanks for the tutorials – great job! I’ve got everything up and running and I have for a few months now, but I have a question. I haven’t updated to WordPress 3.5 or Buddypress 1.6 because I’m afraid of breaking my site. If I update those does the Thesis child theme need to be updated as well?
    I’ve searched all over Thesis forums, wordpress forums, and buddypress forums, but I haven’t seen anything that specifically addresses the updates working (or not) with the Thesis child theme. Have you tried updating or should I just leave it as is?
    Any advice would be greatly appreciated. Thanks!
    Amy

Participate