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

Posted in Tutorials4 years ago • Written by 16 Comments

After completing the 1st part of this guide you should have a theme which looks just as you want it, or is not far off what you aimed for. In this part I’ll show you how to add even more changes to your child theme.

If you haven’t read the previous parts yet I recommend you do so to gain an insight into how to best go about the required steps.

Doing more with your child theme

If you want to make changes to any of your themes files, usually all you have to do is open up that file and edit. Couldn’t be easier. But if you’re using a child theme you don’t have the theme templates there to edit, as you’re using files belonging to another theme. So what do you do?

It’s actually a very simple process. All that’s required for editing a file is for you to copy the file i.e. “header.php” from the parent theme, into your child themes folder and then you can edit what you wish.

An example of something that many people wish to change in their BuddyPress site is the credit links found in the  footer , as many spammers merely search “proudly powered by WordPress and BuddyPress” in Google to find sites using BuddyPress as the quoted text is found in the footer of the default BuddyPress theme.

To remedy this do the following:

In footer.php you’ll find the below code, remove or edit it as you wish

is proudly powered by WordPress and buddypress.org”>BuddyPress

You could remove this code, although leaving a credit link in your footer is the least you can do to thank everyone who works so hard to make sure BuddyPress, and indeed WordPress are as great as they are now.

Every template file you copy over to your child theme folder can be edited as normal, just remember if when you update BuddyPress you may need to edit the file to include any added functionality, although there should be no need to worry about the theme breaking. Remember to try to use your functions.php to add extra content, instead of copying over the file if you’re only adding a few small pieces of code, refer to the previous guide if you’re stuck!

Making a normal WordPress theme BuddyPress compatible

Making a child theme using the default BuddyPress theme as the parent theme is great and not too difficult when you know what you have to do, but if you already have a working WordPress theme you mightn’t want to go through the whole process of making a child theme from scratch. I’ll show you how to make your WordPress theme work with BuddyPress in this next section.

For this tutorial I’m going to add BuddyPress support to the new default WordPress theme Twentyten (Requires WordPress 3 and up).

Note: In the interests of future proofing my work, I’m choosing to make a child theme and not edit any of the Twentyten’s actual code.

To make life easier we’ll use a plugin by Andy, the developer of BuddyPress to do as much of this work as possible for us!  I’ll show you how to make your theme independent of the plugin later in the guide.

Download the plugin BuddyPress Template Pack and install it.

Go into “Appearance” then “BP  Compatibility”  you’ll now be at the start of the setup menu for the BuddyPress Template Pack.

By following the on-screen steps your theme should be working well with BuddyPress. As it says on the plugins page “Once you are finished, your existing WordPress theme will be able to manage and display all BuddyPress pages and content.”

What the plugin does is copy the special BuddyPress folder and files into your theme.

The BuddyBar will now be able to display throughout your site.

All the special sections that BuddyPress adds to your site will also work, although no navigation will be visible to these places except any links found in the BuddyBar.

This is because BP Template Pack doesn’t edit any of your theme files. Which is great if you change your mind about BuddyPress, but if you want to use it you’ll need to edit these files yourself.

If you’re reading this and are using WordPress 3, then you could create the links using the new menu feature. Alternatively you’ll need to add the following code for the navigation links.

<ul id="nav">
				php if ( bp_is_front_page() ) : ?> class="selected"<!--?php endif; ?-->>
					<a href="<?<span class=">php echo site_url() ?>" title="<!--?php _e( 'Home', 'buddypress' ) ?-->"><!--?php _e( 'Home', 'buddypress' ) ?--></a>
				</li>

				<!--?<span class="hiddenSpellError" pre=""-->php if ( 'activity' != bp_dtheme_page_on_front() && bp_is_active( 'activity' ) ) : ?>
					php if ( bp_is_page( BP_ACTIVITY_SLUG ) ) : ?> class="selected"<!--?php endif; ?-->>
						<a href="<?<span class=">php echo site_url() ?>/<!--?php echo BP_ACTIVITY_SLUG ?-->/" title="<!--?php _e( 'Activity', 'buddypress' ) ?-->"><!--?php _e( 'Activity', 'buddypress' ) ?--></a>
					</li>
				<!--?<span class="hiddenSpellError" pre=""-->php endif; ?>

				php if ( bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ) : ?> class="selected"<!--?php endif; ?-->>
					<a href="<?<span class=">php echo site_url() ?>/<!--?php echo BP_MEMBERS_SLUG ?-->/" title="<!--?php _e( 'Members', 'buddypress' ) ?-->"><!--?php _e( 'Members', 'buddypress' ) ?--></a>
				</li>

				<!--?<span class="hiddenSpellError" pre=""-->php if ( bp_is_active( 'groups' ) ) : ?>
					php if ( bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ) : ?> class="selected"<!--?php endif; ?-->>
						<a href="<?<span class=">php echo site_url() ?>/<!--?php echo BP_GROUPS_SLUG ?-->/" title="<!--?php _e( 'Groups', 'buddypress' ) ?-->"><!--?php _e( 'Groups', 'buddypress' ) ?--></a>
					</li>

					<!--?<span class="hiddenSpellError" pre=""-->php if ( bp_is_active( 'forums' ) && ( function_exists( 'bp_forums_is_installed_correctly' ) && !(int) bp_get_option( 'bp-disable-forum-directory' ) ) && bp_forums_is_installed_correctly() ) : ?>
						php if ( bp_is_page( BP_FORUMS_SLUG ) ) : ?> class="selected"<!--?php endif; ?-->>
							<a href="<?<span class=">php echo site_url() ?>/<!--?php echo BP_FORUMS_SLUG ?-->/" title="<!--?php _e( 'Forums', 'buddypress' ) ?-->"><!--?php _e( 'Forums', 'buddypress' ) ?--></a>
						</li>
					<!--?<span class="hiddenSpellError" pre=""-->php endif; ?>
				<!--?<span class="hiddenSpellError" pre=""-->php endif; ?>

				<!--?<span class="hiddenSpellError" pre=""-->php if ( bp_is_active( 'blogs' ) && bp_core_is_multisite() ) : ?>
					php if ( bp_is_page( BP_BLOGS_SLUG ) ) : ?> class="selected"<!--?php endif; ?-->>
						<a href="<?<span class=">php echo site_url() ?>/<!--?php echo BP_BLOGS_SLUG ?-->/" title="<!--?php _e( 'Blogs', 'buddypress' ) ?-->"><!--?php _e( 'Blogs', 'buddypress' ) ?--></a>
					</li>
				<!--?<span class="hiddenSpellError" pre=""-->php endif; ?>

				<!--?<span class="hiddenSpellError" pre=""-->php wp_list_pages( 'title_li=&depth=1&exclude=' . bp_dtheme_page_on_front() ); ?>

				<!--?<span class="hiddenSpellError" pre=""-->php do_action( 'bp_nav_items' ); ?>
			</ul><!-- #nav -->

There are somethings you’ll need to edit to make sure your theme is working as you want it to with BuddyPress,  this includes

  • The Title tag
  • The homepage
  • The footer credit link
  • The css of certain areas which may not be loading correctly.
  • RSS activity Link

To ensure your theme will still work if you disable BuddyPress we will be using the” if function exists”  tag in php when adding BuddyPress specific code.

Title Tag

The  <title> tag , to show the correct title information BuddyPress requires.

BuddyPress requires the following code to show the correct title tags.

We can add this code as shown below

Homepage

As I’ve shown in the previous Part to this guide adding the Activity to the homepage is very easy, for this example I’m going to do this to Twentyten, although the homepage is working perfectly well as it is, it’s a matter of choice whether you change the homepage or not.

Although the Activity Loop can merely be pasted into your index.php inside the div you wish, as Twentyten keeps its loop in a separate file I’ll do the same when adding the activity loop.

All this requires is copying the activity loop into a file named loop-activity.php, you can replace activity with any name you wish.  Save the file in the themes folder.

Next open up index.php on line 26 you’ll see the code where the main loop is added.

get_template_part( 'loop', 'index' );

You can either remove this code replacing it with

get_template_part( 'loop', 'activity' );

or add it above or below the code. The activity should now be working on your homepage, although you may need to edit the css for it to display correctly. In Twentyten we have no need to.

Removing the theme Warning

WordPress will display a warning asking you to use a BuddyPress compatible theme until you add BuddyPress as a tag to the theme.

To do this open up you r themes style.css and near the top you should see a line with tags, such as the following (taken from Twentyten)


/*

Theme Name: Twenty Ten

Theme URI: http://wordpress.org/

Description: The 2010 default theme for WordPress.

Author: the WordPress team

Version: 1.0

Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style

*/

Add BuddyPress as a tag and the warning will go away.

Removing the need for BP Template Pack

If you don’t want to depend on a plugin for your theme to work, some people do have reasons for this, although as Andy( the BuddyPress Core Developer) is the developer of BP Template Pack, I don’t think you have to worry too much!  None the less here is how to make your theme independent of The BP Template Pack.

Deactivate BP Template Pack and you’ll notice that the site still loads, although bits of the site are all over the place! Don’t fret though we’ll have that sorted in a few moments.

By referring to the previous guide you should be able to add the css from admin.css and default.css

Theming for BuddyPress isn’t as different and as difficult as some people think, once you follow a few simple guidelines it’s no harder than normal WordPress theme development. I hope now that you know this you’ll start work on a BuddyPress theme yourself.

If you have any queries or need help with your theme let me know in the comments, I’d be more than happy to help!

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
  • Marian S.

    Monday, July 5th, 2010 00:44

    7

    I’ve had the hardest time with Buddypress. Maybe these tips will work for me better… I wish I could understand all the code easier!

    0
  • mahsyar

    Wednesday, June 30th, 2010 03:47

    5

    omg you are 17 years old? salute!

    0
    • Saad Bassi

      Wednesday, June 30th, 2010 09:39

      6

      Hahaha. Same expressions I had. :D

      0
  • Cosmin Negoita

    Tuesday, June 29th, 2010 22:18

    4

    Well done again, Darren :)
    Nice article!

    0
  • Melissa joyce

    Monday, June 28th, 2010 18:38

    2

    Really amazing ……

    0
  • Mandie

    Monday, June 28th, 2010 12:39

    3

    Hi, thanks you very much for your BP theming tutorials.
    By the way, is there a way to move Activity tab from BP user profiles page next to Profile tab, without hacking the core file, bp-activity.php? So the final result of the profile tabs would be Profile, Activity, Messages, Friends,.. etc. I also tried to overwrite in bp-custom.php, but can’t. May be I did the wrong way. :(
    Again, thank you very much for your theming tutorials.

    0
    • Erock

      Tuesday, August 17th, 2010 00:26

      8

      Add this to, or create ‘ /plugins/bp-custom.php’

      function erocks_change_bp_tag_position()
      {
      global $bp;
      $bp->bp_nav['activity']['position'] = 10;
      $bp->bp_nav['profile']['position'] = 20;
      $bp->bp_nav['posts']['position'] = 30;
      $bp->bp_nav['blogs']['position'] = 40;
      $bp->bp_nav['friends']['position'] = 50;
      $bp->bp_nav['messages']['position'] = 60;
      $bp->bp_nav['groups']['position'] = 70;
      $bp->bp_nav['settings']['position'] = 80;

      }
      add_action( ‘bp_init’, ‘erocks_change_bp_tag_position’, 999 );

      0
    • DarrenM

      Monday, June 28th, 2010 14:22

      1

      No problem :P Glad you like them

      by adding
      define( ‘BP_DEFAULT_COMPONENT’, ‘profile’ );
      to your wp-config you can make the profile element the default tab instead of activity, though to rearrange the links would be alot more work.

      as for bp-custom.php make sure its in wp-content/plugins

      Hope that helps! Let us know how you get on!

      0
  • Dainis W. Michel

    Monday, August 30th, 2010 12:15

    9

    Hey, I’m looking for help with things like http://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/nested-comments-are-not-indenting-or-formatted-differently/

    …i have not found the buddypress community to be very giving in terms of code and direct help…

    can we work something out?

    Best,
    Dainis

    PS: I’m wanting to nest comments in bp-default and am searching for the right file and style to edit…

    0
  • Ian

    Monday, November 28th, 2011 16:02

    15

    It’s good to make your own template, do not try free unknown templates, it may contains shell or virus to attack to host.

    0
  • Martin Harvey

    Saturday, February 25th, 2012 22:48

    16

    Hey Darren,
    cool tutorial that has helped me start getting to grips with buddypress. I was wondering about the last section. I dont want to have to rely on the buddypress template pack after i have built my theme but when I deactivate the template pack plugin and even with the css copied over the ajax functionality isnt there, so i cant access some of the form fields or buttons in the activity pages. any advice would be much appreciated

    0
  • Rebeca

    Friday, November 18th, 2011 15:03

    14

    Now I can figure out the logistics and edit/create regular buddypress themes just fine!

    0
  • CindyN

    Thursday, May 26th, 2011 07:51

    13

    Hi, I’m playing around with integrating BuddyPress with an existing template that I’ve already done a lot of work with.

    I’ve added the BuddyPress and template pack plugins, but the content of my index.php file seems to have changed considerably from the original one bundled with the template… and this is a problem as I now need to tweak the design of the homepage.

    The ‘new’ index.php has thing kind of thing in it: *snippet*

     

    <option value="">

    … whilst the original has: *snippet*

    <div class="box post " id="post-">

    <a href="" rel="bookmark" title="Permanent Link to ">


    I’m a bit stumped – not sure how I’m supposed to edit my layout now?
    Any ideas would be hugely appreciated, and I promise I’ll love you forever. ;)

    Thanks!

    0
  • Ashief.k

    Saturday, September 4th, 2010 08:41

    10

    thanks for ur sharing knowledge
    i am installed buddypress its working fine.the problem is that i am trying to create dashboard for my site for that i should get the details from buddypress[user details] what should i write in my template page
    to use buddypress code the function which buddypress is using that is not accessible in that page no output is cmng ….. plz help me out i am stuck with this…

    0
  • Melton Cartes

    Sunday, January 23rd, 2011 07:26

    12

    Hi, Darren: Awesome tutorial.

    I’m child theme-ing TwentyTen with BP Template Pack but I’d like to have a “smart” log-in/log-out in one of my sidebars, as seen in BP-default.

    Where can I find that code?

    0
  • Danny

    Friday, January 7th, 2011 14:54

    11

    Dear Friends,

    I am really a newbie here.
    I install wordpress with buddypress and bbpress.
    Problem is , my forum is not working as it supposed to be.
    Do you ever experience same problem with me?

    Another one is, wordpress with buddypress is called blogging web site that can be used as social networking, but after I install buddypress theme, there is no blog tab, and I really do not know how to blog

    Can anyone please advice?

    Many thanks in advance

    -1
  • Martin Harvey

    Saturday, February 25th, 2012 22:48

    16

    Hey Darren,
    cool tutorial that has helped me start getting to grips with buddypress. I was wondering about the last section. I dont want to have to rely on the buddypress template pack after i have built my theme but when I deactivate the template pack plugin and even with the css copied over the ajax functionality isnt there, so i cant access some of the form fields or buttons in the activity pages. any advice would be much appreciated

    0
  • Ian

    Monday, November 28th, 2011 16:02

    15

    It’s good to make your own template, do not try free unknown templates, it may contains shell or virus to attack to host.

    0
  • Rebeca

    Friday, November 18th, 2011 15:03

    14

    Now I can figure out the logistics and edit/create regular buddypress themes just fine!

    0
  • CindyN

    Thursday, May 26th, 2011 07:51

    13

    Hi, I’m playing around with integrating BuddyPress with an existing template that I’ve already done a lot of work with.

    I’ve added the BuddyPress and template pack plugins, but the content of my index.php file seems to have changed considerably from the original one bundled with the template… and this is a problem as I now need to tweak the design of the homepage.

    The ‘new’ index.php has thing kind of thing in it: *snippet*

     

    <option value="">

    … whilst the original has: *snippet*

    <div class="box post " id="post-">

    <a href="" rel="bookmark" title="Permanent Link to ">


    I’m a bit stumped – not sure how I’m supposed to edit my layout now?
    Any ideas would be hugely appreciated, and I promise I’ll love you forever. ;)

    Thanks!

    0
  • Melton Cartes

    Sunday, January 23rd, 2011 07:26

    12

    Hi, Darren: Awesome tutorial.

    I’m child theme-ing TwentyTen with BP Template Pack but I’d like to have a “smart” log-in/log-out in one of my sidebars, as seen in BP-default.

    Where can I find that code?

    0
  • Danny

    Friday, January 7th, 2011 14:54

    11

    Dear Friends,

    I am really a newbie here.
    I install wordpress with buddypress and bbpress.
    Problem is , my forum is not working as it supposed to be.
    Do you ever experience same problem with me?

    Another one is, wordpress with buddypress is called blogging web site that can be used as social networking, but after I install buddypress theme, there is no blog tab, and I really do not know how to blog

    Can anyone please advice?

    Many thanks in advance

    -1
  • Ashief.k

    Saturday, September 4th, 2010 08:41

    10

    thanks for ur sharing knowledge
    i am installed buddypress its working fine.the problem is that i am trying to create dashboard for my site for that i should get the details from buddypress[user details] what should i write in my template page
    to use buddypress code the function which buddypress is using that is not accessible in that page no output is cmng ….. plz help me out i am stuck with this…

    0
  • Dainis W. Michel

    Monday, August 30th, 2010 12:15

    9

    Hey, I’m looking for help with things like http://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/nested-comments-are-not-indenting-or-formatted-differently/

    …i have not found the buddypress community to be very giving in terms of code and direct help…

    can we work something out?

    Best,
    Dainis

    PS: I’m wanting to nest comments in bp-default and am searching for the right file and style to edit…

    0
  • Marian S.

    Monday, July 5th, 2010 00:44

    7

    I’ve had the hardest time with Buddypress. Maybe these tips will work for me better… I wish I could understand all the code easier!

    0
  • mahsyar

    Wednesday, June 30th, 2010 03:47

    5

    omg you are 17 years old? salute!

    0
    • Saad Bassi

      Wednesday, June 30th, 2010 09:39

      6

      Hahaha. Same expressions I had. :D

      0
  • Cosmin Negoita

    Tuesday, June 29th, 2010 22:18

    4

    Well done again, Darren :)
    Nice article!

    0
  • Mandie

    Monday, June 28th, 2010 12:39

    3

    Hi, thanks you very much for your BP theming tutorials.
    By the way, is there a way to move Activity tab from BP user profiles page next to Profile tab, without hacking the core file, bp-activity.php? So the final result of the profile tabs would be Profile, Activity, Messages, Friends,.. etc. I also tried to overwrite in bp-custom.php, but can’t. May be I did the wrong way. :(
    Again, thank you very much for your theming tutorials.

    0
    • DarrenM

      Monday, June 28th, 2010 14:22

      1

      No problem :P Glad you like them

      by adding
      define( ‘BP_DEFAULT_COMPONENT’, ‘profile’ );
      to your wp-config you can make the profile element the default tab instead of activity, though to rearrange the links would be alot more work.

      as for bp-custom.php make sure its in wp-content/plugins

      Hope that helps! Let us know how you get on!

      0
    • Erock

      Tuesday, August 17th, 2010 00:26

      8

      Add this to, or create ‘ /plugins/bp-custom.php’

      function erocks_change_bp_tag_position()
      {
      global $bp;
      $bp->bp_nav['activity']['position'] = 10;
      $bp->bp_nav['profile']['position'] = 20;
      $bp->bp_nav['posts']['position'] = 30;
      $bp->bp_nav['blogs']['position'] = 40;
      $bp->bp_nav['friends']['position'] = 50;
      $bp->bp_nav['messages']['position'] = 60;
      $bp->bp_nav['groups']['position'] = 70;
      $bp->bp_nav['settings']['position'] = 80;

      }
      add_action( ‘bp_init’, ‘erocks_change_bp_tag_position’, 999 );

      0
  • Melissa joyce

    Monday, June 28th, 2010 18:38

    2

    Really amazing ……

    0

Comments are closed.

54.80.149.60 - unknown - unknown - US