Introducing the popping pricing table

Our solution is a simple one. One button, you click it and the entire pricing table shows with the 2 options. You then know right there what options you will have on the next screen. No complex maths to work out how many times something goes into something, just 2 options – all themes or just one.

There was also some confusion over our varying price options so we’ve repeated our pricing table for all right in the popping pricing table. We aim to be clear from the start about what you get and what we charge and this change we hope shows just one way we want to listen to our users and those yet to become users.

If you have anything else to comment on you can always use this posts comment form, the site contact form or twitter @buddydress us – we’d love to hear from you at any time.

In conjunction with WPMU DEV we’ve released this site.  Just check out the BuddyPress themes we offer right here.

Beyond a simple demo

We have made sure that Themetastic has great content to show off the themes and shows you exactly how using our theme options you can create your own site.  We encourage you to have a wander around the sites and see each section.

Beyond theme switchers

We took the advanced theme switcher plugin and created the drop down bar you will see allowing you to easily switch between themes.  We hope you enjoy this easy to use feature.

Just check out our themes right here on Themetastic.

Fisherbook

Solo Practice University

Sofa Stop

Ooizit

Huckjive

Gameserfs (This uses our Magazine Theme)

We’d like to take this opportunity to invite you to submit your sites for inclusion in coming up showcases.  Our plan is to do a regular showcase post but for that we need your help.  If you know of a great BuddyPress site out there either that uses a custom theme or one of our themes, we’d love to hear about it.

To let us know just comment or contact us.

First up… facebook

We’ve now got a page over here.  We’d love you to like our page and start joining in the discussion there.

BuddyPress Colours gets on the theme directory

This week BuddyPress Colours was accepted into the WordPress theme directory and we’re over the moon about it.  You can now get it right here.  In just a few days we’ve been amazed by the 650 downloads.  If you don’t know what BuddyPress Colours is… it is a theme pack that consists of child themes where the colours are split from the layout elements making it really easy to create your own colour scheme.

We’d like to thank anyone whose downloaded it and look forward to welcoming new members both to the blog and as BuddyDress members through the theme.

Catch up on the tutorial videos

Missed out on a video from BuddyDress?  You can catch up with all the videos right here.

BuddyDress twitters

Don’t forget as we close up this Friday Find that you can find us all week over at twitter right here.

Over at wpmu.org there is a great article on the Important Things You Should Know Before Upgrading to WordPress 3.0.

If you are looking to upgrade you will do well to follow wpmu.org’s great guide here.

You can get WordPress 3.0 right here.

Don’t forget to get the latest version of your theme too from BuddyDress – we’ve so far updated Magazine, Business, Scholar, Daily and Product with more updates coming very very soon.

Also don’t forget the great release video from WordPress.

We hope you enjoyed this video and as usual you can check out all our themes right here.

This week the video tutorial is the main feature and after will be some useful links to support the tutorial.  We hope you enjoy this slightly different tutorial and after the video are the links to get firebug.

Get firebug

You can get firebug right here.

We hope you enjoyed this tutorial and learn to use firebug to start exploring themes more should you want to delve into customisation more.  As always if you’ve got any questions just drop us a comment.

We’ve got a video tutorial and after that the written version with the source files and code you’ll need to get you started with child themes. Let’s dive straight in with the video.

So, what are parent and child themes?  If you think of it in the sense of inheritance.  A child theme gets everything a parent theme has however it can also have it’s own styling, functions and formats that have nothing to do with the parent.

Why would you want to use them?  Parent and child themes are a great way of ensuring your changes do not get overwritten on theme updates.  They are also a great way of creating new versions based on the same core. When you update your theme you do not update your child theme therefore you can make sure your changes do not get overwritten.

Lets take a look at a basic child theme format you could use.

Delving into child themes

There are a few key features.

1.  You must reference the template you are using as the parent in the child style.css:

Template: bp-default

2.  You must inherit the parent theme’s css files along with the template files so make sure you add the css to do that:

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

3. You must keep any file structure used in the parent theme

4. You should have a screenshot.png to show what the theme looks like

5. Your style.css must have the buddypress tag to ensure it’s recognised as a buddypress theme:

Tags: buddypress

4. Here is what an example css file could look like for a child theme.

It can just be a CSS file or it can be more files but the minimum is the CSS file. You could add the styles you want to use in this file but it’s cleaner to link one in for instance here we’re going to keep the structure the default theme uses and have a directory called _inc/css/ and put all our css in there under a file called child.css.

/*
Theme Name: BuddyPress Child
Theme Date: 17/05/2010
Version: 1
Theme URI: http://buddydress.com/
Description: Child theme for the Default BuddyPress 1.2 theme
Author: Buddydress
Author URI: http://www.buddydress.com/
Tags: buddypress, two-column
Template: bp-default
*/
/* Inherit the default theme styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );
/* Inherit the default theme adminbar styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
/* Child Styles */
@import url( _inc/css/child.css );

Now we’re going to do a few things to show you how to work with a child theme in a couple of small tutorials.

Adding links to the footer

First up create a file called footer.php

In the file copy the contents from the parent theme’s footer.php in this case:

</div> <!-- #container -->
<?php do_action( 'bp_after_container' ) ?>
<?php do_action( 'bp_before_footer' ) ?>
<div id="footer">
<p><?php printf( __( '%s is proudly powered by <a href="http://wordpress.org">WordPress</a> and <a href="http://buddypress.org">BuddyPress</a>', 'buddypress' ), bloginfo('name') ); ?></p>
<?php do_action( 'bp_footer' ) ?>
</div><!-- #footer -->
<?php do_action( 'bp_after_footer' ) ?>
<?php wp_footer(); ?>
</body>
</html>

Next up lets replace the code in the bit labeled:

<p><?php printf( __( '%s is proudly powered by <a href="http://wordpress.org">WordPress</a> and <a href="http://buddypress.org">BuddyPress</a>', 'buddypress' ), bloginfo('name') ); ?></p>

We’re going to add a link to this site and also make a ‘back to top link’ so lets do that now and here’s the code you should have (note the changes):

</div> <!-- #container -->
<?php do_action( 'bp_after_container' ) ?>
<?php do_action( 'bp_before_footer' ) ?>
<div id="footer">
<p>       <a href="http://buddydress.com" title="<?php _e( 'My child theme by BuddyDress', 'buddypress' )?>" ><?php _e( 'BuddyDress', 'buddypress' ) ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="<?php echo get_settings('home'); ?>"><?php _e( 'Copyright', 'buddypress' ) ?> ©<?php echo gmdate(__('Y')); ?> <?php bloginfo('name'); ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#header"><?php _e('Go back to top &uarr;', 'buddypress'); ?></a></p>
<?php do_action( 'bp_footer' ) ?>
</div><!-- #footer -->
<?php do_action( 'bp_after_footer' ) ?>
<?php wp_footer(); ?>
</body>
</html>

For reference the new bit of code is this:

<p>       <a href="http://buddydress.com" title="<?php _e( 'My child theme by BuddyDress', 'buddypress' )?>" ><?php _e( 'BuddyDress', 'buddypress' ) ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="<?php echo get_settings('home'); ?>"><?php _e( 'Copyright', 'buddypress' ) ?> ©<?php echo gmdate(__('Y')); ?> <?php bloginfo('name'); ?></a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#header"><?php _e('Go back to top &uarr;', 'buddypress'); ?></a></p>

Save that file as footer.php making sure it’s at the root of your child theme.

Refresh and you will now see your links set up, you can click the ‘back to top’ and you get taken to the header – neat isn’t it.

Changing the background colour of the theme using child CSS

For this example we’re going to create a file and the folders if you do not have them of _inc/css/ under your child theme.

In this file we’re going to copy the body style that is used in the default theme which is this:

body {
background: #eaeaea url( ../images/background.gif ) top left repeat-x;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 170%;
color: #555;
}

We don’t want to have the font size, family and anything apart from the background style so lets delete that and give it a new colour. The new CSS would be:

body {
background: #111111;
}

Save that as child.css and refresh. There you go, the background is now black.

Get the files

We hope you enjoyed these tutorials and this basic exploration of parent and child themes. You can get the source files for the tutorial right here to get you off to a flying start.

As always if there is a tutorial you’d like to see us cover here at BuddyDress or there is something you’d like us to feature on this blog just drop us a line.

Developing themes results an hard work because every release of BP require us to update the code (and Firefox 3.5 adds new problems too), but we never surrender! In the next autumn we are seriously intentionated to give out some new kickin’ass themes, but please don’t forget to donate something through PayPal. And so, see you in september and have a good time!

Update: if you are using the official 1.0 version of Buddy Press please go here for the updated version of this theme. Ladies & gentlemen: our first BuddyPress theme has been released! Facebuddy will change the look of your private network, giving to it a Facebook appearance.

Clean and simple: in this minimal work we’ve tried to avoid images (there’s only one for the background bar and one for your logo) ando so you can really install it in a second.

In the pack are included: the site-wide-css file, the background image, the .psd file to customize with your logo or site name, and the footer files that include credits to BuddyDress. Here come the screenshots and at the end of this post you’ll find the installation guide.

Note: if you are using the latest trunk of Buddy Press RC2, you can’t use older themes. You can download the updated version of Facebuddy that works ONLY with WPMU 2.71 and Buddy Press latest trunk. If you are using the RC1 version, you can download the zip in this post.

Homepage screenshot

Member’s profile screenshot

Groups directory screenshot

Group detail screenshot

Sign up page screenshot

Put the home theme in your themes folder, and the member theme in the wp-contentmember-themes as usual

 If you want to customize your installation with your logo or your site’s name (recommended) then:

 open the logo.psd file with Photoshop (or similar) and customize it writing your site’s name. Then save it as “logo.png” in your wp-contentthemesfacebuddy home-themeimages  folder

Activate the Facebuddy home theme from Design > Themes. Then, select your member theme from Site admin > Buddypress > Select theme > Facebuddy

Download here:

[download#1#format=2]

Facebuddy is actually running on these sites:

http://reseau-artistes.com/
http://socialpyme.com/
http://community.lads.my/
http://towerofbabel.com/
http://community.grocerycouponnetwork.com/
http://moviecoupons.com/community/
http://social.gibcosta.com/ 
http://moris.us/
http://webstrategynetwork.com/
http://members.decisioncare.org/
http://esltoronto.net/
http://www.federicobo.eu/social/
http://bloghiz.com/
http://blogzin.com/
http://www.tekno.web.id/social/
http://kidoosh.com/
http://colebook.com/
http://blogcastor.com/
http://chucca.altervista.org/
http://mydivisoria.com/
http://co2.knownanswers.com/
http://romanpaladino.net/
http://www.upd8t.com/
http://a.betsocial.net/
http://blogge.rs
http://gapuranetwork.net/
http://masjidkita.net/
http://yesido.ws/
http://tijuanero.com/
http://cv.rs
http://thatdirty.com/
http://urbe.com.ve/
http://designvz.de/
http://sportnika.com/
http://ourlordsblogs.com/
http://blog.smamda.net/
http://rdc.org.ru/
http://syzranskie.ru/
http://rugbystique.fr/
http://my.peetriplats.com/
http://xaviya.net/
http://telkom.us/
http://www.funfobia.com/
http://musicfizz.com/
http://mblog.my/

Please rate this theme: