How To Integrate WordPress and BBPress

Introduction

WordPress is the light (3.5 MB unzipped) blog and content management system application that powers this site and all my other sites. It makes adding and updating content very simple and allows others to add and/or update content easily also.

BBPress is the forum application that can either be used as a stand alone or in conjunction with WordPress.

What this guide is designed to do, is show how to integrate BBPress visually into a WordPress theme. I’ll be showing step by step how I did it.

Please Note: Recently updated for BBPress 0.8.1.

What You Need

A Word of Warning

Depending on which theme you are using and who created it and your HTML skills, how easy or difficult it will be to integrate BBPress visually into WordPress is determined by how well written the WordPress theme your using is and/or your abilities to “fix” it or modify it to fit your needs.

In most cases, if the header.php file contains the usual head information and the navigation, you’ll probably be fine.

WordPress

  1. Open your WordPress’s Theme’s header.php and locate where your stylesheet is called up. You have to place a link to your BBPress stylesheet. For example, I use the import stylesheet feature, so mine looks like this:
    <style type="text/css" media="screen">
    @import url(<php bloginfo('stylesheet_url'); ?>;
    @import url("http://www.my-website.com/bbpress/my-templates/style.css");
    </style>

    This was the method I use to use, but I’m not sure if this will create problems down the road, so I’m defaulting to a safer method. Please skip to BBPress section instead.

BBPress

  1. Open the config.php file located inside the BBPress parent directory.
  2. At the very beginning, before, where it says:
    <?php // ** MySQL settings ** //
  3. You want to add this right above:
    <?php require_once('/absolute/path/to/WordPress Parent Directory/wp-blog-header.php') ?>
  4. What this does is that it is telling BBPress to load all the WordPress functions so that you can use WordPress functions inside of BBPress which will make integrating the look and feel of your BBPress to WordPress very, very easy.
  5. Upload the config.php file you just modified to your webserver and refresh the BBPress page, nothing should look different and you should not get any errors. If you get some kind of php error, look back in your code to make sure you didn’t mispell something.
  6. Make a copy of the entire bb-templates folder inside of the BBPress parent directory and rename it to my-templates. You should now have a my-templates folder with the same contents as the bb-templates folder in the BBPress parent directory. Any edits we will make will only to be the contents inside of the my-templates. Note: This is deprecated in BBPress 0.8.1.
  7. Create a new theme directory in bb-templates. Copy ALL the files in the kakumei theme in the newly created directory. The files copied in the new directory are the ones that you are to edit, not the files in the kakumei theme.
  8. I usually find the easiest way to start the visual integrating process is to edit the front-page.php file first since that page is BBPress’s equivalent of an index.php file. Open up front-page.php in a text editor program (e.g. Notepad for Windows or TextWrangler for the Mac).
  9. On the very first line, you will see:
    <?php bb_get_header(); ?>
  10. Leave the bulk info in the <head></head> alone. What you want to do is add in
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

    above

    <link rel="stylesheet" href="<?php bb_stylesheet_uri(); ?>" type="text/css" />

    This will import the main look and feel of your WordPress theme into BBPress.

  11. Scroll to the bottom and find:
    <?php bb_get_footer(); ?>
  12. Change that to:
    <php get_footer(); ?>
  13. Upload front-page.php to the my-templates folder and check your website, http://www.your-website.com/bbpress/ to see the results. It should start looking similar to your website now.
  14. If you want the sidebar to appear in your forum also, you will have to place <div id=”discussions”> into your WordPress theme’s content container on the front-page.php file, of course how you do that is dependent upon what theme you are using. For example, since <div id=”content”> is my theme’s container, I would arrange it like so in my front-page.php file:
    <div id="content">
    <div id="discussions">
  15. At the end, right before
    <php get_footer(); ?>

    add

    <php get_sidebar(); ?>

    and style it accordingly to your theme’s layout.

  16. After you upload front-page.php to your web server, check the layout in multiple web browsers to ensure it loads correctly. By now it should really look like a part of your theme’s layout.
  17. Make similar changes to: edit-post.php, favorites.php, forum.php, login.php, password-reset.php, profile.php, profile-base.php, profile-edit.php, register.php, register-success.php, search.php, tags.php, tag-single.php, topic.php, and view.php by replacing <php bb_get_header(); ?> to <php get_header(); ?> and <php bb_get_footer(); ?> to <php get_footer(); ?> and adding in <php get_sidebar(); ?> if you want a sidebar.
  18. The rest of the stuff will just need to be styled via the style.css in the my-templates folder. Make sure to remove any conflicting ids or classes from the BBPress stylesheet so as to not get W3C validation errors.

55 thoughts on “How To Integrate WordPress and BBPress”

  1. Aleko, in step 3, you’re entering the wrong absolute path. Notice how right here: /home/mhd-01/http://www.alessandropagano.net/htdocs/blog/forum/config.php , in italic you have your website. That’s not correct.

    Do this, create a file and name it path.php and inside, copy and paste this:
    <?php $p = getcwd(); echo $p; ?>
    Upload that file to your BBPress directory and run it via: http://www.yourwebsite.com/your bbpress directory/path.php.

    This is going to output the absolute path, use that for Step 3 in the directions above. That should do the trick.

  2. It’s the same problem as before. The absolute path that you have contains http://www.alessandropagano.net, which doesn’t work. The only problem is…I’m not sure where that error is produced. Check wp-config.php for the offending code. Most likely it will be there because when you added the <php require_once()> line it’s now passing wordpress functions through and the problem might be on the WordPress side. Give that a try and let me know. I’m always glad to help!

  3. Pingback: SITEBASES.ORG
  4. Now i discover that it’s incompatible with BBLANG because if i try to set it on it_IT (my language) i get this error Fatal error: Cannot redeclare class streamreader in /…./forum/bb-includes/streams.php on line 26

    Anyway if i remove the first lines i added in config.php the language work correctly but i cannot use “get_header” “get_footer” in bbress template.

    it’s a wp-blog-header fault?

  5. Fatal error: Call to undefined function: get_header() in /home/website/public_html/forum/bb-templates/kakumei/front-page.php on line 1

    If I try it with my-templates I get the same error, but then my-templates/front-page.php on line 1

    Line 1 is

  6. The function is not getting defined. Check that you did BBPress Step 3 correctly. Remember it is absolute path so it would be something like: /home/website/public_html/

  7. oh, that is what I did wrong. Now its fixed. The forum is now in my template, but totally messed up. So I guess that is something I can fix with the style.css file.

    Thank you so much for posting this and taking the time to help me.

  8. Hi,

    Thanks for creating this guide, however, I have followed everything exactly [I think] and I am not getting any errors but also not getting my WP theme to load.

    Is there something obvious I should be looking for to correct this?

    Thanks for any help 🙂

  9. Thanks for this.

    I’ve managed to do it, and I managed to tweak it a little. I made some of the suggested changes to the header and footer files, leaving the normal pages alone, which means that I don’t need to manually edit every page, just the style sheet.

  10. I customised my bbpress forum to fit in with the look of my blog.

    I am 99% finished now but noticed one problem.

    If you go to http://www.thecvstore.net/community/ all forum pages have the same page title.

    What have I done wrong and does anyone know how to rectify it?

    Below is a copy of text I altered in ‘Header.php’:

    <link rel=”stylesheet” href=”” type=”text/css” />
    <link rel=”stylesheet” href=”” type=”text/css” />

    <link rel=”stylesheet” href=”” type=”text/css” />

    Is there something I have done wrong here that could be causing the problem?

    In addition, my config.php file has this entered as the top line:

  11. Part of the txt in my above post relating to header.php has been cut of (in case you’re thinking it’s wrong) 😉

  12. What your missing is the bbcode for the header <?php bb_title() ?>. There is two ways to accomplish this. Either you copy the contents of the WordPress header file, rename it to the bbheader and change <?php bloginfo('name'); ?> to <?php bb_title() ?>. The other way is you can write a php conditional statement. Let me know if that helps.

  13. Richard – thanks. Just a couple of questions:
    After I copy the WP header file and rename bbheader.php, where do I upload it to?
    Then, do I need to change any other files, such as config.php to get things working?

    Thanks for all your help!

  14. Lee, make sure the new bbpress header is named bbpressheader.php (or whatever bbpress’ theme header should be named, look at the default bbpress theme for the naming of the header file) and you put it into your bbpress theme folder. Then you got to go through every bbpress theme file and change <?php get_header(); ?> to <?php bb_get_header(); ?>.

    You should be set then.

  15. Thanks Richard, done that, the title now changes but I get this message at the top of the page:

    Warning: include_once(/home/fhlinux208/t/mysite/user/htdocs/community/bb-templates/tcvs/functions.php) [function.include-once]: failed to open stream: No such file or directory in /home/fhlinux208/t/mysite/user/htdocs/community/bb-templates/tcvs/header.php on line 1

    Warning: include_once() [function.include]: Failed opening '/home/fhlinux208/t/mysite/user/htdocs/community/bb-templates/tcvs/functions.php' for inclusion (include_path='.:/usr/share/pear/') in /home/fhlinux208/t/mysite/user/htdocs/community/bb-templates/tcvs/header.php on line 1

  16. Richard – sorry, ignore the above post – I have finally done it.

    Thanks again – I have spent days on this little problem and couldn’t have solved it without your help!!!

  17. Sorry Richard, can I ask one more thing?

    When I click on RSS feed for this topic, I get:

    XML Parsing Error: xml declaration not at start of external entity
    Location: http://www.thecvstore.net/community/rss.php?topic=8
    Line Number 2, Column 1:

    Is there an easy way of solving this problem?

  18. Lee, unfortunately with RSS, I no have experience in that…sorry.

    As for the first error, you had a space before the php declaration right?

    Please report back once you figured out a solution!

  19. You have a great guide here! My only problem is that I can’t get the header to display right on the forum’s front page:

    http://gsupoetry.com/forum/

    All the other pages display correctly. What’s missing is a navbar and the forum title on the right is messed up. I have the site in maintenance mode so the only part you will be able to access is the above link. If you need access to the whole site, let me know. Otherwise, below is the beginning of my front-page.php file.

    <link rel=”stylesheet” href=”” type=”text/css” />

    I hope you can help! Thanks.

  20. Taking a quick guess, you’ve declared id=header twice. Once in BBPress’s stylesheet and again in the New Yorker theme’s stylesheet. You can not declare the same id twice. Plus the codes are in conflict with each other. In one stylesheet, the header is set for a height of 236px and in the other it is set for 106px.

    Fix that and I think your problems are solved. Let me know.

  21. Thanks for the quick reply. 🙂 I took out the #header section in the bbpress template stylesheet but now, as you can see (http://gsupoetry.com/forum/) the login form has been displaced and I still don’t know where to put it, plus the header still doesn’t look quite like the wordpress header. I posted a screenshot of my blog on http://gsupoetry.com/forum/code/ so you can see what I’m talking about. I thought it must just be a problem with the front-page.php since that’s the only page that isn’t displaying correctly.

  22. Is this guide still compatible with the new bbPress 0.9.0.1 and WordPress 2.5? I’ve a lot of problem merging both…

  23. Richard, you obviously know what you’re doing here, and thanks for the article and all your effort as demonstrated in your post.

    My current needs are a bit different, but probably a lot easier than integrating a WP blog with bbPress – easier, that is, if you have half a clue about php, which I don’t! I wonder if you would mind giving me some advice, please?

    I have added a bbPress forum to a website I’m designing, and just need a nav button on the bbPress forum that can take a user straight back to the home page of the website.

    I’d be really appreciative if you could please post an example line of code that could be added to the appropriate php page to add a navigation button (or just a link if a button is too complicated) to the header, or just under the header, of a bbPress forum?

    Also, exactly which bbPress php page would this nav button code go on, please, and where?

    I need to position the nav button on bbPress so that it is left-aligned to the header, or just below the header.

    In case it helps, the forum link is: https://ashb.proofreadercentral.com/bbpress/

    The website link is: http://www.ashb.proofreadercentral.com/

    I’ve got both the website and bbPress forum password protected at the moment, before it all goes “public”.

    User: tester
    Password: testing123

    Appreciate your help – I’m stuck right now!

    Cheers
    Ross
    PS: If it’s easier, maybe you could just explain how to replace the bbPress header with one of my own that would contain the appropriate nav button? On second thoughts, maybe that’s more complicated?

  24. I spent forever trying to work out how to do this. After days of searching with a “last 6 months” filter on Google to get (what I thought were the most relevant) solutions, I went on random hunt and stumbled across this post. Thank you so much for taking the time to put this online. You’ve made my maw-in-law a very happy person!

  25. argggggggg

    I’ve tried several sites now to help get bbpress inside a ‘wp theme’.

    All result in the page going white / blank!

    Back to the drawing board…

    1. Lee, these are REALLY old directions. The latest BBPress (v 1.0) is very easy to integrate the look and feel of your WP Theme. You don’t actually put BBPress inside your WP Theme. You create your BBPress theme to look like you WP theme if that makes sense? Send me an email to richard [at] bui4ever.com and show me what you have and I’ll see if I can help you.

      1. Hey Richard,

        Thanks for the reply.

        I’ve found a way of doing it instead. (seems my theme css + bbpress css was conflicting) so even the new way doesn’t work.

        I got it working by just using an ‘iframe’. I then edited the bbpress css to remove the header, edit the colors – so now it looks like it’s part of my wp site 🙂

        Thanks again though!

Leave a Reply

Your email address will not be published. Required fields are marked *