How to Create your own BuddyPress theme (Part-1)

Posted in Tutorials4 years ago • Written by 16 Comments

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

Styling your theme

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)

CSS Reset

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

Tips for finding what css you need to edit

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

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

Adding functions to your child theme

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');

Adding activity to your homepage

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.

Adding activity to your homepage

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.

Show a different homepage to logged in members

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');

Want to add some content somewhere else to BuddyPress?

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)

Some useful reading

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!

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

7 Written Articles

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!

16 Comments Best Comments First
  • Jens Wedin

    Thursday, June 17th, 2010 00:21

    6

    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

    +1
  • Chris

    Thursday, June 17th, 2010 22:12

    7

    Is this the same Darren that works with HostGator?

    0
  • Jack

    Monday, June 14th, 2010 17:57

    1

    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.

    0
    • DarrenM

      Tuesday, June 15th, 2010 21:19

      3

      No problem. Glad you like it!

      0
  • Steve Graham

    Wednesday, June 16th, 2010 00:01

    5

    This is all quite new to me so thanks for the great article.

    0
  • Cosmin Negoita

    Monday, June 14th, 2010 17:18

    2

    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!

    0
    • DarrenM

      Tuesday, June 15th, 2010 21:20

      4

      Thanks and good luck when you start making themes for BuddyPress!

      0
  • Lasse

    Monday, June 21st, 2010 01:39

    8

    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.

    0
  • Ched

    Tuesday, June 22nd, 2010 02:41

    9

    Your post looks really useful, but the code doesn’t work when copied and pasted. Maybe you posted it wrong?

    0
  • Helc

    Monday, October 24th, 2011 07:50

    15

    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

    0
  • eyeam

    Sunday, January 29th, 2012 10:03

    16

    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?

    0
  • Roezer

    Friday, August 19th, 2011 19:58

    13

    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

    0
    • Darren

      Saturday, August 20th, 2011 13:16

      14

      Looks like the formatting got messed up with the theme update

      0
  • Gearupnow

    Tuesday, November 30th, 2010 01:53

    10

    I’m having the same issue… on google chrome pasting into BBEdit

    0
  • MR MiLLeR

    Wednesday, March 16th, 2011 13:15

    11

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

    0
  • caramel

    Wednesday, April 6th, 2011 00:12

    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!

    0
  • eyeam

    Sunday, January 29th, 2012 10:03

    16

    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?

    0
  • Helc

    Monday, October 24th, 2011 07:50

    15

    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

    0
  • Roezer

    Friday, August 19th, 2011 19:58

    13

    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

    0
    • Darren

      Saturday, August 20th, 2011 13:16

      14

      Looks like the formatting got messed up with the theme update

      0
  • caramel

    Wednesday, April 6th, 2011 00:12

    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!

    0
  • MR MiLLeR

    Wednesday, March 16th, 2011 13:15

    11

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

    0
  • Gearupnow

    Tuesday, November 30th, 2010 01:53

    10

    I’m having the same issue… on google chrome pasting into BBEdit

    0
  • Ched

    Tuesday, June 22nd, 2010 02:41

    9

    Your post looks really useful, but the code doesn’t work when copied and pasted. Maybe you posted it wrong?

    0
  • Lasse

    Monday, June 21st, 2010 01:39

    8

    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.

    0
  • Chris

    Thursday, June 17th, 2010 22:12

    7

    Is this the same Darren that works with HostGator?

    0
  • Jens Wedin

    Thursday, June 17th, 2010 00:21

    6

    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

    +1
  • Steve Graham

    Wednesday, June 16th, 2010 00:01

    5

    This is all quite new to me so thanks for the great article.

    0
  • Cosmin Negoita

    Monday, June 14th, 2010 17:18

    2

    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!

    0
    • DarrenM

      Tuesday, June 15th, 2010 21:20

      4

      Thanks and good luck when you start making themes for BuddyPress!

      0
  • Jack

    Monday, June 14th, 2010 17:57

    1

    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.

    0
    • DarrenM

      Tuesday, June 15th, 2010 21:19

      3

      No problem. Glad you like it!

      0

Comments are closed.

107.21.136.116 - unknown - unknown - US