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.

26 Responses to “Parent and child themes explored”

  1. J’ai guère fini de гegarder par contre ʝe ƿasserai dɑns la
    semaine

  2. Chandra says:

    Sublime article : persiste comme cela

  3. I have fun with, cause I found exactly what I used to be taking a look
    for. You have ended my four day long hunt!
    God Bless you man. Have a nice day. Bye

  4. Amazing!This blog looks exactly like my old one! It’s on a completely different subject butt it has pretty
    much the same page layout and design. Wonderful choice of colors!

  5. Mohammed says:

    Βon, je n’ai pas termiոé de regarder toutefois јe passe demain

  6. marimo says:

    Your way of explaining all in this paragraph is actually nice, every one
    can effortlessly know it, Thanks a lot.

  7. Home Page says:

    Keep on working, great ϳob!

  8. Why people still make use of to read news papers when in this technological globe all
    is existing on web?

  9. Its like you read my mind! You appear to know a lot about this, like you
    wrote the book in it or something. I think that you can
    do with some pics to drive the message home a little bit, but other
    than that, this is excellent blog. An excellent read.
    I’ll definitely be back.

  10. I leave a leave a response when I especially enjoy a article on a website
    or I have something to valuable to contribute to the conversation.
    Usually it is triggered by the sincerness communicated in the article I looked at.
    And after this post Parent and child themes explored
    : BuddyDress. I was excited enough to drop a comment :-P I do have some questions
    for you if it’s allright. Could it be simply me or do some of the responses look like coming from brain dead people? :-P And, if you are writing at other sites, I would like to keep up with everything new you have to post. Could you list all of all your shared sites like your twitter feed, Facebook page or linkedin profile?

  11. web page says:

    If some one needs to be updated with newest technologies afterward he must be
    pay a quick visit this web page and be up to date
    daily.

Leave a Reply