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

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?

HTML Form Validation in 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!

Building My First BuddyPress Theme

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!

Intro To BuddyPress

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

Wordpress 2.9 Image Editing is Awesome!

I installed the bleeding edge release of Wordpress 2.9 using the Wordpress Beta Tester plugin last night, and I must say that the new image editing feature is awesome!  It is no Photoshop, but it will allow us to resize, scale, crop, rotate, and flip images in a WYSIWYG fashion.  Pretty fantastic!

Add to this the new “Magazine-style” Post Thumbnails, and we are rocking and rolling!