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> | <a href=”<?php echo get_settings(‘home’); ?>”><?php _e( ‘Copyright’, ‘buddypress’ ) ?> ©<?php echo gmdate(__(‘Y’)); ?> <?php bloginfo(‘name’); ?></a> | <a href=”#header”><?php _e(‘Go back to top ↑’, ‘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> | <a href=”<?php echo get_settings(‘home’); ?>”><?php _e( ‘Copyright’, ‘buddypress’ ) ?> ©<?php echo gmdate(__(‘Y’)); ?> <?php bloginfo(‘name’); ?></a> | <a href=”#header”><?php _e(‘Go back to top ↑’, ‘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.
She feels that she cannot say enough to express the value of life, and they
outweigh finally the other groups among his creations
Trilling and Bloom 493-494. Elizabeth Barrett scars’s Sonnet 26 from Sonnets from the Portuguese cast the male recipient in the role of another, creating a character through whom they were able to explore the world around her.
Nice weblog right here! Additionally your web site loads up
fast! What web host are you the usage of? Can I am getting your associate link
on your host? I desire my website loaded up as quickly as yours lol
Awesome blog! Is your theme custom made or did you download
it from somewhere? A design like yours with a few simple adjustements would really make my blog stand out.
Please let me know where you got your theme.
Cheers
You actually make it seem really easy along with your presentation however I find this matter
to be really something which I feel I might by no means understand.
It seems too complicated and very extensive for me.
I’m having a look ahead for your next publish, I’ll attempt to get the cling of it!
If you would like to take a great deal from this piece
of writing then you have to apply these techniques to your won web
site.
Hello, I just dropped by to learn about this place.
It looks really cool and I enjoyed viewing it, thanks for the great writing!
I am in fact thankful to the owner of this website who has shared this fantastic
post at at this place.
Piece of writing writing is also a excitement,
if you be acquainted with after that you can write or
else it is complex to write.
I’m writing a paper on romoba vacuum cleaners and I found this posting to become incredibly helpful and informative. Thank you.
@Doug: It is a basic introduction and as a result covers everything someone would need to know. We provide files also to ensure ease.
Huh??? Was that really a tutorial video? So much information was left out and when you say…cut and paste a bit of code here…it would be nice to know what that code was and where.
I’d pull this video, leave the write up and try again on the vid with a little more detail.
[...] effect the parent or get lost in updates. You can find out more about child and parent themes right here. We would also like to point out different browsers will show these elements differently always [...]