How to Create a BuddyPress 1.2 Child Theme

January 25th, 2010 — BuddyPress, theme

I just spent a good 30 minutes figuring this out, so I thought I would post just in case anyone out there is having a similar mental block.  :)

To create a BuddyPress 1.2 child theme, simply create a new folder in your normal “wp-content/themes” folder and then put a style.css file into that folder with the following code at the top:

/*
Theme Name: YOUR THEME NAME HERE
Theme URI: http://buddypress.org/extend/themes/
Description: YOUR THEME NAME HERE based on default 1.2 theme for BuddyPress.
Version: 1.2
Author: BuddyPress.org
Author URI: http://buddypress.org
Template: bp-default
*/

/* Layout styles for home page, internal pages and blog/directory pages */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );

/* Default theme admin bar styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );

No Comments

Use locate_template instead of TEMPLATEPATH to Include Files in a BuddyPress Child Theme

January 14th, 2010 — BuddyPress, Wordpress

Today I ran into an interesting problem while developing a BuddyPress theme. I was attempting to include a custom sidebar using PHP’s “include” function. The Wordpress codex page on “include tags” gives us this:

<?php include( TEMPLATEPATH . ‘/sidebar-index.php’ ); ?>

The problem is that the above code doesn’t always work when you are utilizing a child theme (I am building a child theme based on the default BuddyPress theme). Rather, you should use the “locate_template” hook:

<?php locate_template( array( ’sidebar-index.php’ ), true ) ?>

What the “locate_template” hook does is searches the child theme’s template folder before searching the parent theme’s template folder.

Pretty nifty, eh?

No Comments

HTML Form Validation in Wordpress

January 7th, 2010 — Blog Post, Wordpress

Yesterday, I was charged with the task of validating a simple HTML form in Wordpress. I needed to make sure certain text input fields and a drop-down box contained information before the form was submitted. Surprisingly, Wordpress seems to make this a bit difficult.

Here is my solution:

I used Marc Grabanski’s “Clean Form Validation” script. I did the following:

  1. Downloaded cleanValidator.js from Marc’s website.
  2. Added this code to my header:

    <script type=”text/javascript” src=”<?php bloginfo(’stylesheet_directory’); ?>/js/cleanValidator.js”></script>

  3. Added this code after the “</form>” tag in my Wordpress template file:

    <script type=”text/javascript”>
    cleanValidator.init({
    formId: ‘example’,
    inputColors: ['#EDEDED', '#FFFFFF'],
    errorColors: ['#FFFF99', '#CF3339'],
    isRequired: ['first_name', 'last_name', 'email','phone', 'company'],
    isEmail: ['email']
    });
    </script>

  4. Added “id=example” to the form tag:
    <form id=example action=….
  5. That’s it!

I hope this helps you to create a beautifully-simple validated form in Wordpress!

No Comments

Building My First BuddyPress Theme

December 21st, 2009 — Blog Post, Wordpress

Today I started my first significant BuddyPress undertaking – a conversion of an existing WordPress theme into a BuddyPress theme. I had previously spent a good number of hours picking apart existing BuddyPress themes and creating child themes from the default BuddyPress parent theme framework.

The first question I addressed was whether or not to utilize the default BuddyPress parent theme framework. After considering my options, I decided that using the parent theme will be best due to the fact that it will make upgrading easier than if I used a totally customized theme.

Basically, I have to re-create the existing theme from scratch using the BuddyPress parent theme framework. This isn’t a big deal, but it does take time. Recreating the drop-down menu has thus far taken up most of my time. For some reason, my CSS isn’t working properly, and sub-menu items are not aligning properly…grrr…. Of course, this is par for the course with website design…and a large reason why people are willing to pay me to build websites. :)

One great thing about using the BuddyPress parent theme framework is that I don’t need to re-create the wheel when it comes to the BuddyPress profile pages. This could be a big headache if I was starting from scratch with a custom theme, but for now it’s looking pretty manageable.

So far, one day into this project, I am feeling pretty good about where things stand. I have learned a lot about how theming works in BuddyPress, and I have a solid core built (I hope!). I’ll share more as this adventure continues!

3 Comments

Intro To BuddyPress

November 21st, 2009 — Blog Post

Note: These are the notes for a presentation I gave at Minnebar on Saturday, November 21, 2009.

Definitions
BuddyPress is a plugin for Wordpress MU (Multi-User) that basically allows you to install and customize your own personal version of Facebook and/or Ning.  Wordpress MU is amazing software that lets users set up their own websites on your domain.  Wordpress is the best content management system in the world (that I have used so far).


Things BuddyPress Does Out-of-the-Box:

  • Allows users to set up and control their own profiles (with photos!)
  • Allows users to set up and control their own Wordpress installations.
  • Admin delegates access as desired.
  • Allows users to create groups and forums.  These can be public, private, or invitation-only.
  • Users control which forums and groups they are part of.
  • Users control notification settings (i.e. whether or not they receive emails for group posts, etc.)
  • “Friending” other users (like Facebook)
  • Built-in email messaging system (like Facebook)
  • Status message updates (like Facebook)
  • Template tags for displaying members, site-wide activity, user status messages, lists of user blogs, etc.
  • Adds new widgets to play with! (Ex: “Who’s online avatars”, “Welcome Message”, “Site-wide activity”, “recent site-wide posts”, “Recently active member avatars”)

Other Cool Stuff:

  • Plugins use the Wordpress plugin system, so pretty much anything you can do with Wordpress, you can do with BuddyPress.
  • Same core as Wordpress MU (PHP/MySQL)
  • It is open-source.
  • A full-time Automattic staffer, Andy Peatling, runs the project.
  • Child themes are possible (and recommended).  This means that when BuddyPress updates its core files, you will have less updating to do.
  • WIDGETS power a lot of the functionality!

Resources
How to build a child theme in BuddyPress
BuddyPress Template Tags
Creating a custom page in BuddyPress using only code (advanced)
Creating Communities in BuddyPress (presentation at Wordcamp NYC on 11/14/2009 by Lisa Sabin Wilson)
TestBP.org (Give BuddyPress a test drive!)
Sites using BuddyPress
BuddyPress FAQ

No Comments

← Previous Entries