We hope you enjoy it and discover this great theme a bit more through it.

We hope this video helps you discover this powerful theme.

You can download Business Feature right here.

Discover Business Feature in our demo here.

We hope you enjoy the tutorial and look forward to seeing your colour schemes.

You can get BuddyPress Colours right here now.

This is a how to video so lets get straight on with it.

Want to use this feature in a theme? We’ve already updated Product and Daily to use this feature and we have plans for further updates coming soon. Check out the themes right here.

Have you got something you want to see a tutorial and video on? Let us know in the comment form.

We hope you enjoy it and you can download Product right here.

We are going to start our tutorials again next week after the updating themes break. We should also have some news about things this week for you so keep posted and subscribed to us.

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

Let’s get on with the tutorial then and discover this marketing and sales wonder of a theme.

Like what you see?  You can get the theme right here or view the demo 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’re going to dive right in with the video and after will be the written tutorial with code.

The important function we’re going to be using that will be core to all of the examples is the function:

<?php if ( is_user_logged_in() ) : ?>
<?php else : ?>
<?php endif; ?>

Using this simple function and either the if / else or just an if we can hide or show content depending on whether a user is logged in or not.  It’s that easy.

Showing different widgets depending on if signed in or not

First of all we’re going to use the existing code so we want open the file sidebar.php then we want to find the first if statement at line 8:

<?php if ( is_user_logged_in() ) : ?>

Add a widget area after so that becomes:

<?php if ( is_user_logged_in() ) : ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar-Loggedin') ) : ?>
<?php endif; ?>

Next at the else statement at line 31 find:

<?php else : ?>

Add a widget area to that for the logged out content so it becomes:

<?php else : ?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar-Loggedout') ) : ?>
<?php endif; ?>

Save that file and lets move onto functions.php.

After line 16 where the register_sidebar is add the following:

register_sidebars( 1,
array(
'name' => 'Sidebar-Loggedin',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);
register_sidebars( 1,
array(
'name' => 'Sidebar-Loggedout',
'before_widget' => '<div id="%1$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);

Save that file and then go into appearance > widgets and you can add some widgets to the loggedin and loggedout widget areas.

There you go that is how you can show different widgets depending on if a user is logged in or not.

Showing a message to logged in users only

Finally we’re going to add a message that will only show to our logged in users.  First, open up header.php and find the following line 44:

<h1 id="logo"><a href="<?php echo site_url() ?>" title="<?php _e( 'Home', 'buddypress' ) ?>"><?php bp_site_name() ?></a></h1>

After that, lets add the phrase we want to show to logged in users only and use the if user logged in check so we have the following:

<h1 id="logo"><a href="<?php echo site_url() ?>" title="<?php _e( 'Home', 'buddypress' ) ?>"><?php bp_site_name() ?></a>
<?php if ( is_user_logged_in() ) : ?>
&nbsp;Welcome member
<?php endif; ?>
</h1>

Save the file and refresh.  There you go, you’ve now added a logged in message, log out and you can see the message for logged out users.

As you can see with this simple check you can easily show or hide content it’s up to you what you do with it.

Here are some great links around these topics if you wish to read a little deeper:

http://codex.wordpress.org/Function_Reference/register_sidebars

http://codex.wordpress.org/Function_Reference/register_sidebar

Power tip

Want to do a quick not logged in check? How about this:

<?php if (!is_user_logged_in()) { ?>
// code here
}

We hope you enjoyed this tutorial and let us know if you’d like any other topic covered.

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.