Advertisement

Developing BuddyPress Themes - Part 2: Creating a Custom Style and Home Page

by

In the last part of this series, I walked you through the BuddyPress theme API and loops. We finished up by creating a child theme that weÕll reuse today in the next part of our series. It was my hope that the framework laid in the last tutorial will make elaborating on our child theme that much easier. This part of the tutorial will focus on creating a new overall look for our BuddyPress site and creating a custom home page. So, letÕs open up our theme folder and get our hands dirty in some code.


This tutorial will lay the groundwork for part 3, where we will focus on forums, blogs, and the overall user experience of your new BuddyPress child theme. For now, letÕs start with looking at how to changing the look and feel of a child theme using CSS.

What We Will Do

By the end of this tutorial, you should be able to:

  • customize the overall look of a BuddyPress child theme with CSS
  • create a custom.php to overwrite the default BuddyPress themeÕs functionality
  • create a custom home page for your theme
  • integrate loops into your custom pages

Creating a Custom Home Page

In this tutorial, we want to take the generic BuddyPress index page, and create an inviting home page that highlights many areas of our site and creates an overall style anchor for the site. So, in short, we want to go from this:

to this:

Step 1 Create a home.php Template File

Before we start digging into our stylesheet, take the index.php file in your child theme and duplicate it. Now, rename that file home.php. Voila! You have a page that will always load as your home page.

If you are familiar with WordPress theming, you will notice that this process is exactly the same as in WordPress.


Step 2 Start with the Stylesheet

In the last part of this series, youÕll remember that we made a new child theme by creating a folder named cool_bp_theme (or whatever you decided to name it) and placing that folder into our siteÕs wp-contents/themes folder. From there, we created a new style.css file and made sure to import this:

Now we want to edit our CSS further to make the child theme our own in terms of design and layout. LetÕs examine how to get from the default BuddyPress theme to there. To do that, we need to:

  1. Find the elements that we want to change. I use Firebug to quickly find page elements and their styles.
  2. Add the element to your style.css file.
  3. Change the CSS to your style.

Any element that we put into our child theme style.css file will overwrite style settings elsewhere. However, copy the element name exactly or it will not change.


Step 3 Customizing the Background

So, starting with the basics, let's change the background of our body and other elements. If you have Firebug, right-click (control-click) the background and select inspect element. If you don't have Firebug, or you prefer to work directly with the CSS, navigate to: your WP folder/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/css/default.css.

Remember that you always want to edit the CSS file located in your child theme, as any edits made in the bp-default theme folder will be overwritten during an upgrade.

The default body styling looks like this :

This results in our basic default styling. We want to change that, so we need to add the following to our child theme stylesheet:

Now, if you look at the home page, it should look like this:

All that is left to do is to modify the container element, which by default is:

We want to change the background to transparent and remove the border elements.

The background now looks like we want it to, and we can turn to editing the rest of the page.


Step 4 Customizing the Header Elements

Since the background is where we want it, let's turn our attention to the header. By default, the theme allows for a custom header, which is set in the admin dashboard via Appearance => Header. There is a function to turn that off listed in the BuddyPress codex, but for now just go there and remove the header image. We want to replace it with a custom logo image via simply replacing line 44 in our header.php :

with

This will add the logo image we want. Notice the logo id, which I added to style.css. That simply floats it to the right. For the navigation, I kept the custom menu that I have described in earlier tutorials, and I styled it like this :


Step 5 Customizing the Content Elements

Notice the custom image and text that I put in the top of the home page:

To get that, after <div class="padder"> on line 5 of home.php (remember, the one you created from a copy of index.php?), insert:

You'll notice that I created a new div with the following styles:

In this box, you could always put a slider or other premium content, but I kept it simple for this tutorial.

One important thing to note, when including images and scripts, be sure to use <?php bloginfo(Ôstylesheet_directoryÕ);?>.

Moving down, I edited the latest posts to only display the three latest posts by adding:

right above our post loop that starts with:

To display five members below the most recent posts, I added a custom members loop, which looks like:

From the last tutorial, you could also modify that loop more to reveal only specific users or to display different user information. This could be helpful to display site authors or other site-specific info. For the members display, I left the background white, but here is the CSS for those elements if you want to change them:


Step 6 Customizing the Sidebar Elements

For the sidebar, I kept it simple, since the default is already dynamic and I can use that to add content as needed. I simply edited the CSS, which by default has different padding than I wanted. Here is the code as I edited it:

And for the pesky orange box that displays when the lastest activity happened, I changed the font color to darken it a bit:


Step 7 Adding Cufon Font Replacement

For this site, I used a free font called BorisBlackBloxx, and I generated a Cufon font via their site here. There are plugins to do font replacement, but I wanted to demonstrate how to do it manually in your theme. After I generated the font, I:

  1. Created a new folder named js, and placed my Cufon font files there.
  2. In the header.php of my child theme, I called the scripts by adding the following within my <head> section:
  3. I then replaced the elements by adding this right below the scripts I called above:

Since WordPress automatically enqueues jQuery, I didn't need to place that in the head section. Also, you can replace any element by simply adding it to the list that is already there.


Conclusion

In conclusion, I hope this part of the series gave you a better understanding of how easy it really is to create custom BuddyPress child themes. I know there are a lot of people who could take what I've written above and make some killer sites that I would love to see.

In part 3, I'll turn our attention to the user experience of BuddyPress and how to customize elements such as: user home pages, blogs, and groups. Thanks for reading and I hope I've helped you with some new ideas that will help you dig deeper into theming with BuddyPress!

Advertisement