To create a child theme of BP Mag, first of all decide a name. Let us say, we want to create a child theme MagTest

• Initial Step

Create a directory magtest in your wp-content/themes directory, so I assume you have now the directory as

        wp-content/themes/magtest

• Create a file called style.css in the directory “magtest”
• Now put at the top of the directory something like this

[sourcecode language="css"]
/*
Theme Name: Mag test theme
Theme URI: http://yoursite.com/the page where you want to allow download for this theme(if you want)
Description: A Test Child Theme for BP mag
Version: 1.0
Author: Your Name
Author URI: http://yoursite.com
Tags: buddypress, two-columns, custom-header, white, blue, your tags, your tags etc
Template: bp-mag

*/
[/sourcecode]

Please note the First Line "Theme Name" and the last line "Template" is important, rest you can just leave them.

Theme Name defines the name of your child theme
Template says which theme is the parent theme of current theme

Also do not forget to use “buddypress” in tags otherwise BuddyPress will complain that your theme is not BuddyPress compatible, just putting buddypress in tags makes this notice go away

So, that's it, your child theme is ready, But wait, you have not applied any css yet, so The theme when activated will show the bare theme without any formatting.

Retaining The structure of BP Mag

To retain the structure of bp-mag, we will need the css shipped with BP mag to be used by our child theme, so we will put following line just after the comment block

[sourcecode language="css"]
@import url(../bp-mag/_inc/css/adminbar.css);/* Including the css for adminbar*/
@import url(../bp-mag/_inc/css/default.css);/* Including the structural css/typography of bp mag except colors*/

[/sourcecode]

Once you are done, here is how our style.css of the child theme looks like

[sourcecode language="css"]
/*
Theme Name: Mag test theme
Theme URI: http://yoursite.com/the page where you want to allow download for this theme(if you want)
Description: A Test Child Theme for BP mag
Version: 1.0
Author: Your Name
Author URI: http://yoursite.com
Tags: buddypress, two-columns, custom-header, white, blue, your tags, your tags etc
Template: bp-mag

*/

@import url(../bp-mag/_inc/css/adminbar.css);/* Including the css for adminbar*/
@import url(../bp-mag/_inc/css/default.css);/* Including the structural css/typography of bp mag except colors*/

[/sourcecode]

Now, It gives you the same structure as BP Mag, there is no difference between this child theme and the original Bp Mag Theme.

I have avoided including the colors.css as I assume you will be mostly interested in changing colors/background. You can copy the colors from bp-mag/_inc/css/colors.css to yourtheme/css/colors.css and Include in the style.css as

[sourcecode language="css"]

@import url(_inc/css/colors.css);/* Load colors.css from your theme*/
/* In case you want bp mag colors, comment the above line and put the following line*/

@import url(../bp-mag/_inc/css/colors.css);/* Including the color/background from bp mag*/

[/sourcecode]

Now decide 2 things before proceeding.

1. Do you want to change the structure of theme
2. or Do you simply want to change the color/font/layout

Most of the time, you should be able to do almost everything with css only. In case the css only approach does not fit you, you can change the PHP of the theme files. There are two approaches to do that. Using Action/filter hook[documentation coming soon] or just copying the file you want to modify to your theme[not recommended for bp mag, please try to use the action/filter approach as much as possible to cut short your development time].

The following approach is not recommended but is provided for the sake of completeness of tutorial. we will use the actions/filters as much as possible to change the appearance.

Example If you want to modify the header, copy bp-mag/header.php to yourchildtheme/header.php and modifying the local copy of your child theme's header.php ex. You want to modify the Profile-header.php, copy bp-mag/members/profile-header.php to yourchildtheme/members/profile-header.phpfor the secon


yes, remember, you do not need to copy all the files, just copy those files you really want to modify in your child theme. Any file you put in your child theme will override the same file in parent theme. Please make sure to not use this approach if possible. Our guide is coming for the changes using action/filter hook. BP mag is almost something like a canvass you can draw on using the hooks.

To apply css modification, just put the css rules below the import line in your style.css file. These rules will override those of the parent or if you want to change colors, go through the colors.css to change it to your liking.

For example, Let us say, I want to change the background color of header, I will put following line below the import lines #header{background:#000;/*we want a black background*/} So, our css file will look something like

[sourcecode language="css"]
/*
Theme Name: Mag test theme
Theme URI: http://yoursite.com/the page where you want to allow download for this theme(if you want)
Description: A Test Child Theme for BP Mag
Version: 1.0
Author: Your Name
Author URI: http://yoursite.com
Tags: buddypress, two-columns, custom-header, white, blue, your tags, your tags etc
Template: bp-mag

*/

@import url(../bp-mag/_inc/css/adminbar.css);/* Including the css for adminbar*/
@import url(../bp-mag/_inc/css/default.css);/* Including the structural css of bp mag*/
/* Child Theme css*/
@import url(_inc/css/colors.css);/* Load colors.css from your theme*/
#header{background:#000;/*we want a black background*/}

[/sourcecode]

Just keep on adding your rules and you will see those are applied to your theme.

Helpful tools:-

• Color Mania [a color picker]
• Firebug [the firefox browser addon]