Welcome to BuddyDress

Our themes show off your site’s content - and do it well. We look for inspiration all around us - introducing personality for a dramatic effect that will bring your content to life.

Founded on the idea that your site should be exceptional in style and quality, we draw on classic design techniques to present a beautiful and unique collection of themes at an excellent value.

remember me
  

Parent and child themes explored

Today we’re going to look at parent and child themes.  To learn a bit more what we are going to do is create a child theme for the default BuddyPress 1.2 theme.

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:

{code type=CSS}Template: bp-default{/code}

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:

{code type=CSS}* 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 );{/code}

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:

{code type=CSS}Tags: buddypress{/code}

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.

{code type=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 );
{/code}

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:

{code type=PHP}

</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>

{/code}

Next up lets replace the code in the bit labeled:

{code type=PHP}

<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>

{/code}

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):

{code type=PHP}

</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’ ) ?> &copy;<?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>

{/code}

For reference the new bit of code is this:

{code type=PHP}

<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’ ) ?> &copy;<?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>

{/code}

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:

{code type=CSS}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;
}{/code}

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:

{code type=CSS}body {
background: #111111;
}{/code}

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.

36 Responses to “Parent and child themes explored”

  1. While steel deck and metal decking are his passions, he also enjoys
    collecting stamps and collecting baseball cards in his spare time.

  2. Belen says:

    Right away I am going away to do my breakfast, afterward having my breakfast coming over again to read other news.

  3. With this, the beginner has to ensure that he has his balance perfected
    before requesting for a faster ride. Some health benefits
    that you can get by using this device are preventing illness, obesity,
    reducing tension and enhancing the immune system.
    The chances are that if you actually took the time to
    look into what happens in a tattoo parlour then you would
    be quite surprised at how relaxed, painless and friendly
    it truly is.

  4. soccer news says:

    With thanks! It is definitely an great web page!

  5. Un autre, s’enliser délicatesse ou peut-être l’attrait construit en highlites sont également souhaitables à votre semblant de fête de mariage.

Leave a Reply