Login
Sign In or Register
Not Registered Yet?
Join Now! It's FREE. Get full access and benefit from this site
Join Now! It's FREE. Get full access and benefit from this site
Monday, 14 June 2010 03:00
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
[php]
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!
