Total Followers 132,503
After installing BuddyPress you may want to change from the default theme. Yes it looks great, but to stand out from other sites using BuddyPress you’ll want to use a different theme. Finding a good-looking BuddyPress theme you like is hard too, compared to WordPress there isn’t near as good a selection. So why not make your own?
In this 2nd guide of the series we’ll be making a bp-default child theme, which will only contain 2 files, this is to ensure your theme is as future proofed for BuddyPress as possible. Although we will be limited to the amount that can be done with these two files, you’d be surprised how much they can do.
These 2 files are
style.css
functions.php
Create a new folder in wp-content/themes/ bearing the name of your theme, and create the above files, leave them empty for now.
I’ve called the theme “bp-child” for this tutorial. (I’ll be referring to this theme as bp-child from now on. This is the theme that will be used on the BuddyPress site.
You can name your theme whatever you like, just be sure to remember you aren’t using bp-child when I write the themes folder hierarchy.
In your newly created style.css add the following code
/* Theme Name: bp-child Theme URI: Description: Author: Author URI: Version:3.0.2 Template: bp-default Tags: */
Technically you now have a working theme, but if you take a look at it, it has no styling, though it does include all the BuddyPress functionality included in the default theme.
Most of the work we do now in this tutorial will be to style this new BuddyPress child theme.
If you only want to make a few changes to the default BuddyPress theme then you can import the default themes styling using:
/* Inherit the default theme styles */
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/default.css );
To style the admin bar we can import the adminbar.css file from bp-default using
/* Inherit the default theme adminbar styles */ @import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/adminbar.css );
You can find these to files in /wp-content/plugins/buddypress/bp-themes/bp-default/_inc/
As importing style sheets is very inefficient, I recommend copying the code from these files into your style.css. By cutting down on the amount of style sheets you use, you are helping speed up your sites loading time. Every file that needs loads is another http request visitors must make when loading your site. (Although this will probably not be noticeable on its own, these inefficient practises do add up)
As browsers don’t apply css exactly the same way as each other. Making a style compatible with the major web browsers can be a pain. Adding a css reset to your css can make life allot easier when trying to make your site load properly in different browsers.
BuddyPress includes a css reset style sheet in its default theme which you could import with
@import url( ../../plugins/buddypress/bp-themes/bp-default/_inc/css/reset.css );
But as you’ve heard above @import isn’t as efficient as some other methods.
You can copy the reset style sheet into your style.css if you so wish.
/* --------------------------------------------------------------
Reset default browser CSS.
Based on work by Eric Meyer:
http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
background:#fff;
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a img { border: none; }
Although I’ve supplied a diagram showing the main div ids and classes, when compared to the total amount in the theme it doesn’t show all the smaller divs and more importantly where in the style sheet you can find the css you want to edit.
Firebug is a great add-on for Firefox which allows you to click an element and it will show you the html that its consisted off, as well as the css used to render it, and what line to find it on.
You can download firebug here, and there’s plenty of guides on how to use it properly here
You can add files to your new child theme, which will be used instead of bp-defaults although in this tutorial as its only minor edits being made its best to stick to the 2 core files in your theme. Later in the series when we’re making more advanced changes we can add more files if needed.
So far functions.php has just been left there blank, now we’ll put it to good use!
Note: Any code in the functions.php file in bp-default will still be loaded even if it’s not present in your child themes functions.php
Add
php // to the 1st line
// to the last line ?>
All code mention in regards to funtions.php will go in between these two lines.
<h3>Adding a Favicon</h3>
To add a favicon to your theme add the following code to functions.php
1
function bpchild_favicon() { ?>
php echo bloginfo('stylesheet_directory') ?>/images/favicon.ico" />
php }
add_action('wp_head', 'bpchild_favicon');
You must then place the favicon.ico in your child themes folder in /images/favicon.ico, alternatively you can edit the above code to reflect the location of your favicon.
Using the same above technique we can also add a style sheet for IE
function bpchild_ie7() { ?>
php }
add_action('wp_head', 'bpchild_ie7');
Instead of the usual BuddyPress homepage which displays the main blogs latest posts, you may like to display the latest activity of your site.
To do this add the following code to your functions.php
// adds the latest activity to the homepage
function bpchild_activity() { ?>
<h2>Recent Activity on php bp_site_name() ?></h2>
php if ( bp_has_activities() ) : ?>
<div class="pagination">
<div class="pag-count">php bp_activity_pagination_count() ?></div>
<div class="pagination-links">php bp_activity_pagination_links() ?></div>
</div>
<ul id="activity-stream" class="activity-list item-list">
php while ( bp_activities() ) : bp_the_activity(); ?>
<li class="<?<span class=">php</li>
bp_activity_css_class() ?>" id="activity-">
<div class="activity-avatar">
<a href="<?<span class=">php</a><a href="<?<span class="> bp_activity_user_link() ?>"></a>
php bp_activity_avatar( 'type=full&width=100&height=100' ) ?>
</a>
</div>
<div class="activity-content">
<div class="activity-header">
php bp_activity_action() ?>
</div>
php if ( bp_get_activity_content_body() ) : ?>
<div class="activity-inner">
php bp_activity_content_body() ?>
</div>
php endif; ?>
php // Add code for comments here ?>
php do_action( 'bp_activity_entry_content' ) ?>
</div>
</li>
php endwhile; ?>
<!--<span class="hiddenSpellError" pre=""-->ul>
php else : ?>
<div id="message" class="info">
php
_e( 'Sorry, there was no activity found. Please try a different filter.', 'buddypress' ) ?>
</div>
php endif; ?>
Note the above code it only the standard activity loop, and does not contain any comments or meta, which. You can add the full activity loop to your homepage with the following code below line 35 of the above code (after the line containing php // Add code for comments here ?> )
<div class="activity-meta">
php if ( is_user_logged_in() && bp_activity_can_comment() ) : ?>
<a href="<?<span class=">php</a><a href="<?<span class="> bp_activity_comment_link() ?>" class="acomment-reply" id="acomment-comment-"> ()</a>
php endif; ?>
php if ( is_user_logged_in() ) : ?>
php if ( !bp_get_activity_is_favorite() ) : ?>
<a href="<?<span class=">php</a><a href="<?<span class="> bp_activity_favorite_link() ?>" class="fav" title=""></a>
php else : ?>
<a href="<?<span class=">php</a><a href="<?<span class="> bp_activity_unfavorite_link() ?>" class="unfav" title=""></a>
php endif; ?>
php endif;?>
php do_action( 'bp_activity_entry_meta' ) ?>
</div>
php if ( bp_activity_can_comment() ) : ?>
<div class="activity-comments">
php bp_activity_comments() ?>
php if ( is_user_logged_in() ) : ?>
<form action="" method="post" id="ac-form-" class="ac-form">
<div class="ac-reply-avatar">php bp_loggedin_user_avatar( 'width=25&height=25' ) ?></div>
<div class="ac-reply-content">
<div class="ac-textarea">
<textarea id="ac-input-" class="ac-input" name="ac_input_">
</div>
<input name="ac_form_submit" type="submit" value="<?<span class=" />php _e( 'Post', 'buddypress' ) ?> →" />
<input name="comment_form_id" type="hidden" value="<?<span class=" />php bp_activity_id() ?>" />
</div>
php wp_nonce_field( 'new_activity_comment', '_wpnonce_new_activity_comment' ) ?>
</form>
php endif; ?>
</div>
php endif; ?>
For info on editing the loop to mean your needs the BuddyPress Codex has plenty of info to help you out.
Instead of the usual BuddyPress homepage which displays the main blogs latest posts, you may like to display the latest activity of your site.
To do this add the following code to your functions.php
// adds the latest activity to the homepage
function bpchild_activity() { ?>
<h2>Recent Activity on php bp_site_name() ?></h2>
php if ( bp_has_activities() ) : ?>
<div class="pagination">
<div class="pag-count">php bp_activity_pagination_count() ?></div>
<div class="pagination-links">php bp_activity_pagination_links() ?></div>
</div>
<ul id="activity-stream" class="activity-list item-list">
php while ( bp_activities() ) : bp_the_activity(); ?>
<li class="<?<span class=">php</li>
bp_activity_css_class() ?>" id="activity-">
<div class="activity-avatar">
<a href="<?<span class=">php</a><a href="<?<span class="> bp_activity_user_link() ?>"></a>
php bp_activity_avatar( 'type=full&width=100&height=100' ) ?>
</a>
</div>
<div class="activity-content">
<div class="activity-header">
php bp_activity_action() ?>
</div>
php if ( bp_get_activity_content_body() ) : ?>
<div class="activity-inner">
php bp_activity_content_body() ?>
</div>
php endif; ?>
php // Add code for comments here ?>
php do_action( 'bp_activity_entry_content' ) ?>
</div>
</li>
php endwhile; ?>
</ul>
php else : ?>
<div id="message" class="info">
php
_e( 'Sorry, there was no activity found. Please try a different filter.', 'buddypress' ) ?>
</div>
php endif; ?>
Note the above code it only the standard activity loop, and does not contain any comments or meta, which. You can add the full activity loop to your homepage with the following code below line 51 of the above code (after the line containing php // Add code for comments here ?> )
<div class="activity-meta">
php if ( is_user_logged_in() && bp_activity_can_comment() ) : ?>
<a href="<?<span class=">php</a><a href="<?<span class="> bp_activity_comment_link() ?>" class="acomment-reply" id="acomment-comment-"> ()</a>
php endif; ?>
php if ( is_user_logged_in() ) : ?>
php if ( !bp_get_activity_is_favorite() ) : ?>
<a href="<?<span class=">php</a><a href="<?<span class="> bp_activity_favorite_link() ?>" class="fav" title=""></a>
php else : ?>
<a href="<?<span class=">php</a><a href="<?<span class="> bp_activity_unfavorite_link() ?>" class="unfav" title=""></a>
php endif; ?>
php endif;?>
php do_action( 'bp_activity_entry_meta' ) ?>
</div>
php if ( bp_activity_can_comment() ) : ?>
<div class="activity-comments">
php bp_activity_comments() ?>
php if ( is_user_logged_in() ) : ?>
<form action="<?<span class=">php</form> bp_activity_comment_form_action() ?>" method="post" id="ac-form-" class="ac-form">
<div class="ac-reply-avatar">php bp_loggedin_user_avatar( 'width=25&height=25' ) ?></div>
<div class="ac-reply-content">
<div class="ac-textarea">
<textarea id="ac-input-<?<span class=">php</span> bp_activity_id() ?>" class="ac-input" name="ac_input_<?php bp_activity_id() ?>"></textarea>
</div>
<input name="ac_form_submit" type="submit" value="<?<span class=" />php _e( 'Post', 'buddypress' ) ?> →" />
<input name="comment_form_id" type="hidden" value="<?<span class=" />php bp_activity_id() ?>" />
</div>
php wp_nonce_field( 'new_activity_comment', '_wpnonce_new_activity_comment' ) ?>
</form>
endif; ?>
</div>
endif; ?>
For info on editing the loop to mean your needs the BuddyPress Codex has plenty of info to help you out.
You may also like to show members of your site different information. Such as a nice welcome!
function member_welcome() { ?>
<?php if ( is_user_logged_in() ) : ?>
Welcome back!
endif; ?>
<?php }
add_action('bp_before_sidebar_me', 'member_welcome');
Although I’ve shown how to add some changes to the bp-default theme I couldn’t cover as many changes as I’d like, that and all you creative people have probably thought of something better that you want to do.
I recommend reading the guides I’ve linked to, and then you can refer to the images below which shows some of the BuddyPress hooks, all laid out for easily reference. (Click on the images for full view)
Two great posts by one of the greats in WordPress themes Ian Stewart
Using Filter Hooks in WordPress Child Themes
Using Action Hooks in WordPress Child Themes
we also wrote about plenty of resources in regards to child themes
20 WordPress Theme Frameworks And Starting Resources
Although this guide was wrote with BuddyPress in mind, a lot of this guide can apply to creating a normal WordPress child theme. In step 2 we’ll start adding extra theme files to our child theme in order to customize it even further.
If you have any questions your more than welcome to ask in the comments section. I look forward to seeing all your BuddyPress themes soon!
Get The Only Freelancer crash course you will ever need to read!
I'm Darren ,A teenager living in Ireland.I run a few different sites around the web, zomghow.com being my newest addition Connect with me on twitter. Look forward to hearing form you!
Sunday, January 29th, 2012 10:03
Hi everyone, I am really new at this and ADD beyond belief. The little that I know came from trial and error and the easy to find explanations in posts from people like you. I want to tweek the bg color in the activity feed of my buddypress site. I’m familiar with how to create child themes but am having trouble finding clear cut direction on what code to edit…. at least before my mind starts wondering. Can anyone help?
Monday, October 24th, 2011 07:50
First I userd the blogger tool from google, but wordpress is much better. You can change the things much more by yourself and you have so much more possibilities to create an own design
Friday, August 19th, 2011 19:58
I am not so sure how this will display in your comments But Why Did you Post your Code in This Format
1
/*
2
3
Theme Name: bp-child
4
5
Theme URI:
6
7
Description: Author:
8
9
Author URI: Version:3.0.2
10
11
And not This format
/*
Theme Name: bp-child
Theme URI:
Description: Author:
Author URI: Version:3.0.2
Template: bp-default
Tags: */
Template: bp-default
Tags: */ so readers could just copy and paste the code
Saturday, August 20th, 2011 13:16
Looks like the formatting got messed up with the theme update
Wednesday, April 6th, 2011 00:12
Hi,
I would like to add boxes to profile pages instead of standard tabs in buddypress(like friends, groups etc…)
I just want that when another user visits a members profile, he can see friends, groups, entries of that members in boxes like widgets with the thumbs or gravatars…
How can i change the codes to achieve that?
Thank you very much for your help!
Wednesday, March 16th, 2011 13:15
Thank you for this tutorial…it is the best tutorial for BuddyPress on internet…
But there is some problem with code…can you please fix it ? :)
Tuesday, November 30th, 2010 01:53
I’m having the same issue… on google chrome pasting into BBEdit
Tuesday, June 22nd, 2010 02:41
Your post looks really useful, but the code doesn’t work when copied and pasted. Maybe you posted it wrong?
Monday, June 21st, 2010 01:39
The code is broken, I’ve tried to mend it, but I don’t understande what’s up with the spans, I get error at the end of my funtions.php, even though I paste this in the middle. I’m trying to get bp sensible to display activities. Or just the activity menu button that seems to be missing in this theme.
Thursday, June 17th, 2010 22:12
Is this the same Darren that works with HostGator?
Thursday, June 17th, 2010 00:21
Hi and thanks for the good article. I’m having a site which is WP + BP based (www.chwisgi.com) and I really love what you can do. One thing that I haven’t figured out is how to change the admin bar. I want to add some navigation for examples categories and some hard coded links. Is that possible, and how?
Cheers,
Jens
Wednesday, June 16th, 2010 00:01
This is all quite new to me so thanks for the great article.
Monday, June 14th, 2010 17:18
Hey Darren, I’m not really gonna read this as I’m currently not in BuddyPress theming, but having a look here and there I can say the article is awesome! I’ll surely read this when I’ll need to start creating themes for BP. Thank you!
Tuesday, June 15th, 2010 21:20
Thanks and good luck when you start making themes for BuddyPress!
Monday, June 14th, 2010 17:57
Thank you for all this usefull informations. I use wordpress now for years an it is getting better and better from version to version. First I userd the blogger tool from google, but wordpress is much better. You can change the things much more by yourself and you have so much more possibilities to create an own design. I also use the buddypress plugin, so this guide here is really very helpful for me. Thanks a lot.
Tuesday, June 15th, 2010 21:19
No problem. Glad you like it!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Jack
Monday, June 14th, 2010 17:57
Thank you for all this usefull informations. I use wordpress now for years an it is getting better and better from version to version. First I userd the blogger tool from google, but wordpress is much better. You can change the things much more by yourself and you have so much more possibilities to create an own design. I also use the buddypress plugin, so this guide here is really very helpful for me. Thanks a lot.
DarrenM
Tuesday, June 15th, 2010 21:19
No problem. Glad you like it!
Jens Wedin
Thursday, June 17th, 2010 00:21
Hi and thanks for the good article. I’m having a site which is WP + BP based (www.chwisgi.com) and I really love what you can do. One thing that I haven’t figured out is how to change the admin bar. I want to add some navigation for examples categories and some hard coded links. Is that possible, and how?
Cheers,
Jens
Chris
Thursday, June 17th, 2010 22:12
Is this the same Darren that works with HostGator?
Steve Graham
Wednesday, June 16th, 2010 00:01
This is all quite new to me so thanks for the great article.
Cosmin Negoita
Monday, June 14th, 2010 17:18
Hey Darren, I’m not really gonna read this as I’m currently not in BuddyPress theming, but having a look here and there I can say the article is awesome! I’ll surely read this when I’ll need to start creating themes for BP. Thank you!
DarrenM
Tuesday, June 15th, 2010 21:20
Thanks and good luck when you start making themes for BuddyPress!
Lasse
Monday, June 21st, 2010 01:39
The code is broken, I’ve tried to mend it, but I don’t understande what’s up with the spans, I get error at the end of my funtions.php, even though I paste this in the middle. I’m trying to get bp sensible to display activities. Or just the activity menu button that seems to be missing in this theme.
Ched
Tuesday, June 22nd, 2010 02:41
Your post looks really useful, but the code doesn’t work when copied and pasted. Maybe you posted it wrong?
Helc
Monday, October 24th, 2011 07:50
First I userd the blogger tool from google, but wordpress is much better. You can change the things much more by yourself and you have so much more possibilities to create an own design
eyeam
Sunday, January 29th, 2012 10:03
Hi everyone, I am really new at this and ADD beyond belief. The little that I know came from trial and error and the easy to find explanations in posts from people like you. I want to tweek the bg color in the activity feed of my buddypress site. I’m familiar with how to create child themes but am having trouble finding clear cut direction on what code to edit…. at least before my mind starts wondering. Can anyone help?
Roezer
Friday, August 19th, 2011 19:58
I am not so sure how this will display in your comments But Why Did you Post your Code in This Format
1
/*
2
3
Theme Name: bp-child
4
5
Theme URI:
6
7
Description: Author:
8
9
Author URI: Version:3.0.2
10
11
And not This format
/*
Theme Name: bp-child
Theme URI:
Description: Author:
Author URI: Version:3.0.2
Template: bp-default
Tags: */
Template: bp-default
Tags: */ so readers could just copy and paste the code
Darren
Saturday, August 20th, 2011 13:16
Looks like the formatting got messed up with the theme update
Gearupnow
Tuesday, November 30th, 2010 01:53
I’m having the same issue… on google chrome pasting into BBEdit
MR MiLLeR
Wednesday, March 16th, 2011 13:15
Thank you for this tutorial…it is the best tutorial for BuddyPress on internet…
But there is some problem with code…can you please fix it ? :)
caramel
Wednesday, April 6th, 2011 00:12
Hi,
I would like to add boxes to profile pages instead of standard tabs in buddypress(like friends, groups etc…)
I just want that when another user visits a members profile, he can see friends, groups, entries of that members in boxes like widgets with the thumbs or gravatars…
How can i change the codes to achieve that?
Thank you very much for your help!