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

You can get BuddyPress Colours right here now.

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.

Tutorial video:

You can download or view online the video here and also check out our tutorial video album here.

Tutorial:

Adding a custom header

1. Upload the image

Go to Appearance and then Custom Header. Once you are there you will notice it says ‘Images of exactly 1250 x 125 pixels will be used as-is’. If you have a larger image you will have to crop it to pick the area you are going to use or it will repeat if smaller. Lets select browse and then your image and then the Upload button.

2. Crop the image

Now you will be face with a screen that if you’re image is larger than that size is for cropping the image. Select the area you want for your image then save the image.

3. Voila a header

Then you can refresh the front and you’re custom header is now done.

4. Change the text colour

If you want to change your text colour you simply go back to the Custom header screen and you will notice several buttons under the header. Here you can hide the text to not have a header text, select a text colour, use the original colour and save changes. Clicking select a text colour brings up a colour picker where you can select the colour then save the changes. If you want to do further customisation of the header text you will need to enter the CSS files.

Changing the header size

Lets expand the concept a little now. One of the key areas you may want to do is to change the height of your header.

1. Edit functions.php

In functions.php you want to go to line 150:

define( 'HEADER_IMAGE_HEIGHT', 125 );

In this demonstration we’re changing it to be 300 pixels in height:

define( 'HEADER_IMAGE_HEIGHT', 300 );

Remember to save your file once you’ve done the change.

2. Edit default.css

Under _inc/css/ we’re going to open up default.css and find line 67:

#header {
position: relative;
color: #fff;
background: url( ../images/default_header.jpg);
-moz-border-radius-bottomleft: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-bottom-right-radius: 6px;
margin-bottom: 20px;
height: 100px;
padding-top: 25px;
}

We now want to pay attention to line 76:

height: 100px;

We are going to have our new header as 300 pixels in height and if you notice we have a line of:

padding-top: 25px;

So, what we want to do is take 25px from 300px to get 275px and then line 76 becomes:

height: 275px;

Save your file and then we can move onto uploading a new image.

3. Upload your new header image

Now we want to check that the new height is showing under the Custom Header section if it is we then want to go into the browse section and get a new file to upload. We then want to crop and save this image. Hitting refresh you will see on the front we now have a new header image set up with a new size. You will probably want to adjust other things in the header once you change the size but this is the basic set up for changing the header size.

Tip: Remove custom headers in your child theme

If you want to remove the ability to have custom headers in your child theme you simply add the following line in functions.php for your child or parent theme:

define( 'BP_DTHEME_DISABLE_CUSTOM_HEADER', true );

Tip: Want to have a repeating image?

To get a repeating image just upload an image that is not the full size and it should repeat – depending on the theme you may have to adjust the css or functions.php call for css relating to the custom header.

Custom headers are a great way to personalise your theme

There you have it, you can now upload a custom header image and even change the size of the header for the image. There are some great resources you may want to check out when looking for header images here are just a few:

• Stripe generator
• Creatr web 2.0 background
• Free images.co.uk
• Istock Photo – not free but inexpensive vector images and photographs
• stock.xchng free images
• Bg Patterns: pattern generator
• Kollermedia.at range of backgrounds
• Web design ledger: 100 seamless patterns

We hope you enjoyed this tutorial. If you wish to see anything as a tutorial on buddydress just comment below or you can ask via the contact form.

We have both a video for this tutorial and below that the steps outlined for you.

Tutorial video

The tutorial

First of all you need to decide where you are going to add your widget area.  Some themes will have specific styling depending on where you place the widget along with styling you need to put in your widget declaration in your functions.php file.  We’re going to keep it simple though for this tutorial.  Our new widget area is going to be above the login / logged in user section of the sidebar.

1. Open up file you’re adding widget area into.

This first step requires us in this case to open up sidebar.php we’re going to first locate the section we want to add the code in and for us it is line 5.  Now we’re going to place the code:

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

As you can see we’re calling the sidebar demo here. Save that file.

2. Add to functions.php

Open up functions.php and find where the sidebars are declared in your theme.  In BuddyPress 1.2 Default it’s at line 8, once we are there we add from line 16 the following code:

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

You can see we are making sure the same name is used as in Sidebar-Demo and also we use the format already used in the default theme.  Save that file once you’ve added your code. You can read more about the functions register_sidebars and register_sidebar at the codex. In this example we just copy the default BuddyPress code but the rule is register_sidebar for one and register_sidebars for more than one.

3. Add your widget:

Go into your admin and select appearance > widgets and find in this case Demo and add a widget.  Make sure that’s set and then refresh your front of the site.  There you go, that’s how to easily add a widget area to any part of your template.

For those that want to go a little beyond this you may want to have a message if no widgets are selected so you could where you place the code in your theme file simply add the following (you would want to style the class textwidget yourself):

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar-Demo') ) : ?>
<div>
<?php _e( 'Please log in and add widgets to this section.', 'buddypress' ) ?>
&nbsp;<a href="<?php echo get_option('siteurl') ?>/wp-admin/widgets.php?s=&amp;show=&amp;sidebar=sidebar-demo"><?php _e( 'Add Widgets', 'buddypress' ) ?></a>
</div>
<?php endif; ?>

As you can see with these simple steps it’s really easy to add a widget area to any part of your theme.  We hope you enjoy this tutorial and if you want to have tutorials on any other subjects just let us know.