Problem: After you’ve followed all the integration steps from the bbPress site there’s only one problem left – it looks like shit. It totally breaks you site’s continuity. When someone goes into your forums, the place not only looks different, all your navigation menus, sidebars, footers, and guides are gone. I searched far and wide for an answer to this one and finally “rolled my own” and here I am sharing it. The big “aha!” moment came in the shower, when I realized the answer was dead-simple HTML.
Here are the steps.
- Install bbPress into a subdirectory of your blog pages. For example /user/public_html/forum if your blog is set up at the root of your domain. This is optional but makes things easy.
- Do the cookie integration from the bbPress site instructions. This will allow anyone who authenticates to your WordPress to access bbPress and vice-versa. No point in integrating halfway.
- Add a social networking log-in conduit to your blog. I chose Gigya Socialize for this and used their little “widget creator” to create a little widget that does the dirty work, plus their WordPress plug-in in the back-end. This is optional but its a lot easier for folks to sign in using their Twitter, Facebook or Google accounts than asking them to remember user/password combination number 457. The day my blog is as popular as Facebook, maybe I’ll ask people to sign up.
- Put the log-in widget from Gigya Socialize on the sidebar right next to the forums. Can’t miss it!
- Here’s where the magic happens. Create a WordPress Page for your Forum. Name it different than the directory you installed bbPress to. In my case the page is named “Forums” and the installation directory is “forum” (note the missing ‘s’). Now go edit that page and use the following bit of HTML as your guide:
<iframe name=”FRAME1″ src=”http://andresferraro.com/forum/” width=”100%” height=”1000″ frameborder=”0″ ></iframe>
Replace the address http://andresferraro.com/forum/ with your bbPress installation URL, and the width and height parameters to match your site. Note that you need to pick a bbPRess theme that doesn’t go crazy with the width and hopefully has a color scheme that blends in with your WordPress blog.
Voila! You now have your bbPress forum embedded into a Worpress page. Check out mine at Andres Ferraro’s Forums.
Notes: My blog is built using Headway, so the steps I followed are a smidgen different. On the WordPress page that contains the forums I edited the layout so it would have a sidebar, a footer and instead of a “Content” container, I placed a very large “Widget-ready sidebar” and aptly titled it “Forums Container”, then I went into the Appearance–>Widgets in my WordPress dashboard and added a “Text/HTML” widget to the “Forums Container” Sidebar. I then added the iFrame HTML detailed above into the widget and off it went. Check out Headway if you’re interested in the killer ultimate WordPress theme.