BuddyPress Customization Case Study and Code Samples: An Inside Look into The Nourish Network

This week we interviewed Lisa Sabin Wilson, author of WordPress for Dummies and BuddyPress for Dummies. In case you missed it, you can catch up here. When asked about her newest project, “The Nourish Network” website, she offered an excellent answer with short tutorial included, so we couldn’t help but post her response and the code samples for our readers. For those of you who are having trouble customizing the default BuddyPress theme or if you want to find creative ways to pull its functions into the rest of your WPMU site, here are a few tips from a BuddyPress expert.

Q: You recently launched a site called The Nourish Network for your client. What can you tell me about your process with them and how did you guide the project into a successfully launched social network?

A: NourishNetwork.com was launched very recently, within the last month. Lia Huber, the lady behind the site, was already running WordPress MU / BuddyPress by the time she reached out to me to help her take the site to a new level. She had been using a very default and basic deployment of BuddyPress and really wanted to ramp up the design of the site, as well as pull some of the community components of the BuddyPress features into the main page, as well as interspersed in and around the site to put more an emphasis on the conversations and interactions going on. However, at the same time, she wants the focus of the site, overall, to be the great content she is writing, as well as the recipes she’s sharing and video tutorials she is creating…while at the same time, sprinkle the community pieces around a little to make sure everyone who visits the site understands that it is a community, it is interactive and it is something they can actively participate on.

The first task was to get her WPMU/BuddyPress installations upgraded to the latest and greatest – and that did mean a complete overhaul of her current themeing structure because this happened right after the release of BuddyPress 1.1 – when they completely changed the theme architecture. The theme on NourishNetwork.com is a completely overhauled version of the BuddyPress default theme, but hopefully, you wouldn’t really know it by looking at it. I think the biggest challenge was to brand the entire site, and community pieces, in a way that is unique to NourishNetwork, while still using the main framework from the BuddyPress default and parent themes.

Doing this meant more than just simply switching out images and altering the default theme CSS. With the new BuddyPress parent/child theme structure, all of the functions of the theme exist within the parent theme, while the visual elements exist within the child theme. How it works is that the child theme pulls the functions from the parent theme, and then styles those functions in a way that is determined by the styling elements and formatting that exist within the child theme. However, for NourishNetwork.com – it wasn’t as simple as that because we were adding in lots of different elements to her site such as popular posts, jQuery tabbed slider on the front door, custom category pages and queries for her recipes and videos – so there was a lot going on there. While it is strongly recommended that you do NOT alter the template files that exist within the BuddyPress parent theme – - there is sometimes no way around it, right? The best practice, and best way to go about it is to decide which of the template files you want to edit, then copy that template file from the parent theme into the child theme… only THEN can you edit it. See, if there are no template files in the child theme – then BuddyPress will look for that file in the parent theme. However, if it does exist in the child theme – it will stop looking for it and use the file that it finds in the child theme first. It’s really very simple and convenient.

So, for example, the home.php file found within the BuddyPress parent theme is completely widgetized and pulls in three different sidebars with three different sets of widgets. Because NourishNetwork has a front door that pulls in so much more than that – I had to copy the home.php from the parent, into the child, and then I could edit it to include different styling, formatting and functions than what you find in the default parent theme. This practice, by the way, keeps your custom theme completely upgrade proof in the future – - it won’t break because you don’t overwrite your custom theme during the upgrade, you overwrite the parent theme files. Nice, huh?

The front door of NourishNetwork pulls in different BuddyPress components like the box titled Contributors’ Picks – - that box lists her 4 top Contributors and displays their member avatars and their latest status update (because as of BuddyPress 1.1.x – members are now able to add short status updates ala’ Twitter). So, every time one of her contributors updates their status, it changes on teh front page, as well as on their own, individual Member Profile. That was accomplished using a bit of code like this:

<?php global $bp; ?>
            <a href="<?php echo bp_core_get_userurl($userid=X) ?>" title="<?php bp_core_get_user_displayname( $userid=X, true ) ?>">
<?php echo bp_core_get_avatar( $userid=X, 1 ) ?>
            <p><?php
            global $bp;
            $status = get_usermeta( $user_id=X, 'bp_status' );
            echo $status['content'];
            ?>
            </a>

*Where the ‘X’ equals unique ID of the member you want to pull the status update (and avatar) from (you can find their userid in the “Users” section under the Site Admin menu in your WordPress Dashboard). There is a cleaner way of accomplishing this by simply defining

In the What’s The Buzz? box on the front page, you’ll find the top 3 group forum links. Here’s the code I used to accomplish this:

<ul>
        <?php if ( bp_has_site_groups(  ) ) : ?>
        <?php while ( bp_site_groups() ) : bp_the_site_group(); ?>
        <li><a href="<?php bp_the_site_group_link() ?>/forum/"><?php bp_the_site_group_avatar_thumb() ?></a> <a href="<?php bp_the_site_group_link() ?>/forum/"><?php bp_the_site_group_name() ?></a> - <?php bp_the_site_group_description_excerpt() ?></li>
        <?php endwhile; ?>
        <?php endif; ?>
        </ul>

The Forums, by the way, were renamed to “Conversations” – as that was Lia’s preference for her site. I changed the default Forums slug from http://nourishnetwork.com/forums to http://nourishnetwork.com/conversations by putting the following piece inside of the wp-config.php file:

define ( 'BP_FORUMS_SLUG', 'conversations' );

Through the use of that simple line of code, you can change the default slug for any of the BuddyPress components: BP_MEMBERS_SLUG, BP_GROUPS_SLUG, BP_BLOGS_SLUG, for example.

The rest of the front page of the NourishNetwork.com main site includes a category content slider using the jQuery library with the ui.tabs.js, which pulls in the most recent article from each of her main categories, and using custom fields along with the timthumb thumbnail resizer – she is able to create a nice looking content delivery system on the front page.

The rest of her front page contains popular posts from her recipes category, recent comments, community member listings and we left some room for monetization through her own advertising program. The community activity portion can be found as an internal page at http://nourishnetwork.com/community – where you find the site wide community activity. The members, groups, forums and blogs directory are also integrated into the main navigation.

Overall, it was a pretty comprehensive project and a really nice one to be working on while I was also, simultaneously, writing the book. Both of those project really caused me to really dig into the BuddyPress core to discover what can be done and some of the methods to go about really customizing a community site.

Sarah Gooding on Google+