Recently I learnt about a forum software by name bbpress which can integrate well with wordpress blogs. I decided to squeeze time out of my schedule to try this software and write about it.

bbPress is a very easy to use forum or bulletin board software from the creators of wordpress. To quote their website:

“bbPress is focused on web standards, ease of use, ease of integration, and speed. We’re keeping things as small and light as possible while still allowing for great add-on features through our extensive plugin system.”

This article will cover installation of bbpress for a wordpress blog and its deep integration with wordpress blog such that the blog and the forum share common logins, cookies and user databases. Make a note of the versions used before you proceed to read the installation/integration tutorial:

bbPress version: 1.0.2
WordPress version: 2.8.9

bbPress download and server setup

- As a first step you need to download bbpress from here. Unzip and rename the folder to what ever you like. Whatever name you choose will also become a part of your forum URL in the following format:

<wordpress blog URL>/<bbPress folder name>

- Now upload this folder under you main wordpress directory on the server where you are hosting your blog. For example, I had renamed my bbPress directory to “forum” and uploaded it under the folder techblog.viveksanghi.com on the webserver such that my forum url become:

http://www.techblog.viveksanghi.com/forum

WordPress Setup

bbPress Integration Plugin

- Now login into you wordpress admin panel, install the plugin bbpress integration into wordpress and activate the plugin. On the plugin’s configuration page enter the URL of your bbpress forum which will be in the following format as already explained earlier:

<yourblog URL>/<bbpress folder name>.

Do not change anything else and hit the save button. Scroll down on the same page and you will be shown some code that you need to enter into your wordpress config file. Make a note of this code as we will require it in the next step.

WordPress Config

- Apart from the above-mentioned piece of code from the previous step, there are some additional changes that you need to make to your wordpress config file. Let’s looks are what additions are to be made to the wordpress configuration file. Download and edit your wordpress config file. This will be located under your main wordpress folder by the name wp-config.php

You have to enter the following values in the wp-config.php file:

AUTH_KEY
SECURE_AUTH_KEY
LOGGED_IN_KEY

Go here to generate complex keys for the above mentioned items. Then paste these keys in the wp-config.php file as shown below:

Also paste the code we generated earlier from the bbpress integration plugin of wordpress as shown in the image above.

Now its time to start your bbPress installation. However make sure to have the following details about your wordpress database handy as we will use the same database for wordpress and bbpress.

- WordPress database name
- WordPress database hostname (Note that it will not be “localhost” if you are hosting on dreamhost or other such hosting site)
- WordPress database username
- WordPress database password
- WordPress table prefix

In case you are new to using databases and/or are not sure where to find the above mentioned details, then you might want to install the WP-DBManager plugin in wordpress and should be able to view all these above details from within wordpress.

Once these details are ready, you may start the installation by proceeding to the following link:

[your bbPress forum URL]/bb-admin/options-wordpress.php

Step 1 – Database configuration

First you will be presented with the following screen:

Now enter the database details you collated earlier, as shown in the image below. You may also use the question mark symbols to learn more about each of these fields.

And then proceed to step 2.

Step 2 – WordPress Integration Settings

To fill in the details required for step 2, load the options screen of your wordpress blog using the following link:

[wordpress link]/wp-admin/options.php

On the bbpress installation page check integration and cookie integration settings as shown in the image. Now add the auth cookie, secure auth cookie and logged in key values (we created these values earlier before starting installation of bbpress) from the wp-config.php file. The salt values will be available from the wordpress options screen we loaded a while ago.

If you do not find the secure auth cookie salt value, you may leave it blank and it should not be a problem. Then scroll down and also check user database integration settings. Fill in the values from the database values that you noted earlier. Most of you will only require the wordpress database table prefix. Now save the integration settings and you will be prompted to proceed to step three.

Step 3 – Site settings

Fill in a name for your forum and the site URL as shown below. Site URL will depend on the folder name you gave to the bbpress folder before uploading it under wordpress folder.

Select the wordpress admin name from the drop down as the bbpress keymaster unless you wish to alot this supreme role to anyone else. Give a name for your first forum, then hit the save site settings button and you should be ready to proceed to your forum page.

Now go to the admin panel of your forum and select wordpress integration under the settings tab as shown in the image below.  Here you have to map user roles between wordpress and bbPress users as the user list is now synchronized and/or common between the two.

Once you save these settings, your wordpress and bbPress will be integrated and you are ready to go.

I am also planning to research into a system/plugin such that the wordpress posts become topics and the comments on each wordpress post become forum posts under these topics. If I find out some thing on these lines, I will definitely update this post or create a second post on this topic.

References: I researched the bbPress forums extensively and did a lot of hands on tinkering to learn how to install bbPress and integrate it with wordpress. This link was particularly helpful in my learning process.

In this article I will explain how you can:

1. Blog on a custom domain (eg. www.<yourname>.com) while not having to buy any hosting space on the web (Will cover both Blogger and WordPress)

2. Blog on a custom domain while also having custom hosting (Will cover only wordpress and explain how to migrate blogger blogs to custom/self-hosted wordpress)

I understand that many readers may question the need for this article when there are plenty or articles on the web. However I will try to make it very simple and easy to follow with judicious use of screenshots to make life simple.

Before proceeding, let’s note that one can always start of a free blog on popular blogging platforms like Google’s Blogger or WordPress. The URL of a blog on these free services will be like:

<example>.blogspot.com

<example>.wordpress.com

If you are new to blogging, I recommend that you first try out hosting via these free platforms and see if you are able to maintain a good posting frequency. Once seasoned, go ahead and buy web hosting etc and host the blog by yourself.

Blog on a custom domain (eg. www.<yourname>.com) while not having to buy any hosting space on the web (Will cover both Blogger and WordPress)

If you have a blog on Blogger or WordPress.com, you might be pleased to know that both these platforms allow you to buy a custom domain name and make that the URL address of your blog.

Blogger

1. To view the custom domain settings facility in your blogger account, just go to the settings -> publishing area as shown in the image above (expand image to read the instructions or just follow the on screen instructions in your account. It’s very easy!)

2. If you choose to buy a domain from Google, use this page as shown in the image above (read the price and the time period for which you are paying very carefully). As of now Google is using godaddy.com as partner for the domain name registrations and is also providing Google Apps on the domain. Which probably means you can have an email address like <yourname>@<yourdomain>.com .

3. However, if you have already bought a domain elsewhere, then click on the “Switch to advanced settings” link. You will be present with a page which looks like this:

4. Click on the link “setup instructions” and read it very carefully before you proceed with this step. You will have to create a CNAME (Canonical Name) record. This will make your domain point to Google’s servers such that when someone visits your domain, the request is forwarded to Google servers and they can fetch the appropriate blog (i.e. your blogspot blog) and display it to the visitor.

Blogger help provides specific instructions on setting up CNAME for certain domain providers. If you do not plan to buy your domain from Google and then I recommend buying it from one of the service providers listed on that page.

This step can be troublesome and you may feel free to contact me if you need any assistance. However note that I may be slow in responding and the real fun is in trying it out on your own

5. Once everything is done, enter the word verification and save your settings. Give it some time and then your blog will start working on your custom domain URL. Your old blogspot address will automatically redirect to your new custom domain.

As always, if you face problems, you may redirect your questions to me and I will direct you in the right direction

WordPress

If you have not already purchased a domain, then just like Blogger, wordpress also allows you to purchase a domain + redirect your wordpress.com blog to it for USD 15.00 (on this date).

You can also have your custom email by using Google apps on this newly purchased domain (learn more)

Buy a domain from wordpress and use it for your wordpress.com blog

1. Go to the “domains” section under “upgrades” on your wordpress.com dashboard (See the image).

2. On the page that appears, enter the domain you wish to use for your blog and click on “Add Domain to Blog” button (See the image below). A page will appear asking you to buy 15 credits to complete this transaction (unless you already have credits in your account). Note that you must have a Paypal account to purchase credits (currently 1 credit = USD 1.00).

3. Then you have to make sure (refer to the image below) that your newly purchased domain is recognized as your blog URL on the “domains” page and your wordpress.com blog redirects to your custom domain (also called domain mapping).

That’s it. You are ready.

You might want to learn more about managing domains purchased through wordpress.

Using your separately purchased domain for your wordpress.com blog

1. Visit this link and setup your domain to be used in wordpress domain mapping process. All you have to do is add the nameservers shown there to your domain. Remove any existing nameservers from your domain.

2. Once your domain is ready go to the “domains” section under upgrades, on your wordpress.com dashboard. Enter the domain name you wish to use as shown in the image above and click on the “Add Domain to Blog” button. If your nameservers are set correctly and have propagated, then WordPress will allow you to buy 10 credits to enable this domain mapping.

3. Now go to step 3 in the previous section (above) and you will be ready

If you ever have any problems regarding domain mapping, please do visit this link to seek help.

Alternate way to buy WordPress credits

Log into your wordpress.com account go to the gifts section under upgrades as shown in the image below:

While this page will allow you to gift the credits to other wordpress users, you may simply use it to purchase credits for your wordpress.com account.

I hope this article will make life simpler for everybody who is new to blogging platforms. Stay tuned for my next article where I will talk about having a blog on a custom domain with custom hosting.

I have successfully redirected stubborn-fanatic.blogspot.com to techblog.viveksanghi.com. The new home for this blog.

Those of you who were looking at my blogspot template for design ideas will be unable to do so any more. However I can send you my blogspot template’s full code for a nominal payment of $20 via paypal only. If you are interested, please contact me using this link for further instructions.

This is my first add-on goody for the year 2007. Hope you will like it. Brainiac came up with a suggestion to add more languages to my Google translate for posts hack. As the number of languages provided by Google is limited, I decided to use the BabelFish code, offered in a language translation widget by Amit Agarwal of Digital Inspiration. I have been using this hack in the “Translate” section of my navigational bar (at the top of the page).

- This code offers 14 languages, to which your readers will be able to translate your posts.
- There is also some translation code that Spanish Bloggers can use to allow their readers to read their blogs in English, French, Russian, German and Italian.
(See comments for credits)

I have modified that code so that you can use it in your post footers and allow your readers to translate individual posts (if they like). To learn how to add some thing to your template’s post footers, visit this page.

Update: Added code for English to Trukish courtesy emrex

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_nl"' title='Nederlands/Dutch'><img alt='Nederlands/Dutch' height='20' src='http://photos1.blogger.com/blogger/3709/485/400/nl.gif' width='30'/> Nederlands</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_fr"' title='Français/French'><img alt='Français/French' height='20' src='http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg' width='30'/> Français</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_ru"' title='Русский/Russian'><img alt='Русский/Russian' height='20' src='http://photos1.blogger.com/blogger/3709/485/1600/ru.gif' width='30'/> Русский</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_de"' title='Deutsch/German'><img alt='Deutsch/German' height='20' src='http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg' width='30'/> Deutsch</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_it"' title='Italiano/Italian'><img alt='Italiano/Italian' height='20' src='http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg' width='30'/> Italiano</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_pt"' title='Português/Portuguese'><img alt='Português/Portuguese' height='20' src='http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg' width='30'/> Português</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_es"' title='Español/Spanish'><img alt='Español/Spanish' height='20' src='http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg' width='30'/>Español</a> |

<a expr:href='"http://translate.google.com/translate?hl=ar&amp;ie=UTF-8&oe=UTF-8&langpair=en|ar&u=" + data:post.url' title='العربية/Arabic'><img alt='العربية/Arabic' border='0' height='20' src='http://www.google.com/images/flags/sa_flag.gif' width='30'/> العربية</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_el"' title='Ελληνικά/Greek'><img alt='Ελληνικά/Greek' height='20' src='http://photos1.blogger.com/blogger/3709/485/1600/el.gif' width='30'/> Ελληνικά</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_ja"' title='日本語/Japanese'><img alt='Japanese' height='20' src='http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg' width='30'/> 日本語</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_ko"' title='한국어/Korean'><img alt='Korean' height='20' src='http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg' width='30'/> 한국어</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_zh"' title='汉语简化了/Chinese Simplified'><img alt='Chinese Simplified' height='20' src='http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg' width='30'/> 汉语简化了</a> |

<a expr:href='"http://66.94.231.168/babelfish/translate_url_content?trurl=" + data:post.url + "&amp;lp=en_zt"' title='中國傳統/Chinese Traditional'><img alt='Chinese Traditional' height='20' src='http://photos1.blogger.com/blogger/3709/485/400/zh_tw.gif' width='30'/> 中國傳統</a>

Update: Added code for English to Trukish<a expr:href='"http://babel.gts-translation.com/geturl?direction=50&amp;input_url=" + data:post.url' title='Türkçe/Turkish'><img src='[Image not available]' alt='Turkish' height='20' width='30'/>Türkçe</a>

Update: Some translate links for Spanish bloggers (based on a wordpress plugin pointed out by brainiac):

<a expr:href='"http://world.altavista.com/babelfish/trurl_pagecontent?url=" + data:post.url + "&amp;lp=es_en"' title='Spanish to English'><img src='http://bp0.blogger.com/_XGtsagQTuUQ/RZk8DP2JNiI/AAAAAAAAADk/eRxHS5s1f10/s320/english.jpg' alt='Eng' /> English</a>

<a expr:href='"http://www1.worldlingo.com/SH0gfCf2o9dM33sw2faPEI,6sc5M9NFT0/translation?wl_url=" + data:post.url + "&amp;wl_srclang=ES&amp;wl_trglang=fr" title='Spanish to French'><img src='http://bp1.blogger.com/_XGtsagQTuUQ/RZk8Df2JNjI/AAAAAAAAADs/jL1jKBhgKFc/s320/france.gif' />Français</a>

<a expr:href='"http://www1.worldlingo.com/SH0gfCf2o9dM33sw2faPEI,6sc5M9NFT0/translation?wl_url=" + data:post.url + "&amp;wl_srclang=ES&amp;wl_trglang=de"' title='Spanish to German'><img src='http://bp1.blogger.com/_XGtsagQTuUQ/RZk8Df2JNkI/AAAAAAAAAD0/JubAGPyc5d4/s320/germany.gif' />Deutsch</a>

<a expr:href='"http://www1.worldlingo.com/SH0gfCf2o9dM33sw2faPEI,6sc5M9NFT0/translation?wl_url=" + data:post.url + "&amp;wl_srclang=ES&amp;wl_trglang=it"' title='Spanish to Italian'><img src='http://bp3.blogger.com/_XGtsagQTuUQ/RZk8Q_2JNmI/AAAAAAAAAEE/pJodrosGp8I/s320/italy.gif' />Italiano</a>

<a expr:href='"http://www1.worldlingo.com/SH0gfCf2o9dM33sw2faPEI,6sc5M9NFT0/translation?wl_url=" + data:post.url + "&amp;wl_srclang=ES&amp;wl_trglang=ru"' title='Spanish to Russian'><img src='http://bp0.blogger.com/_XGtsagQTuUQ/RZk8RP2JNpI/AAAAAAAAAEc/Tnq_uTX3WhY/s320/russia.gif' />Русский</a>

If you want to display only the flag images, simply delete the text between the img tag and the </a> tag. In case you want to have only the text, remove the img tag completely. As always, don’t forget to make a backup of your template before applying this code.

Please drop a line here if you find some bug or if some thing doesn’t work. I have not tested out most of the code.

Also, Deniz of imessengr is now offering a modded three-column Thisaway template loaded with popular hacks. Visit his page to learn more and download the template.

Deniz of imessengr has taken the three column rounders template and hacked it to include most of the popular hacks currently available for the new Blogger. He has done this for all the variants of rounders that are available on Blogger.

Visit here to download this template and install it in your blog.

Just a quick update here. Blogger has announced that they are now out of beta. This is shown by the change of URLs. The sign-in link on beta blog navbars no longer points to the beta.blogger.com link. It now points to www2.blogger.com.

Classic Blogger users can learn more about Blogger Beta the New Blogger here.

This is a quick & dirty or a simple hack (if you want to call it that) that allows one to add a background color to the comments. I have this set in my blog and you can simply check the post page for one of my posts that has comments to see what I am talking about. Here is an image for your convenience:

Interested? Please backup your template before proceeding with this hack.

In this hack you can assign a different background color (and text color) for the blog author’s comments (see the image above) and to do this you must have this Hack (Author comment highlighting) from Hackosphere installed.

Once you install the author comment highlighting hack from Hackosphere, your comment code will look similar to this:

/* Comments----------------------------------------------- */#comments { margin:0; }#comments h4 { margin:0 0 10px; border-top:1px dotted $borderColor; padding-top:.5em; line-height: 1.4em; font: bold 110% Georgia,Serif; color:#333; }#comments-block { line-height:1.6em; }.comment-author { background:url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0; padding:0 0 0 20px; font-weight:bold; }.comment-body { margin:0; padding:0 0 0 20px; }.comment-body p { margin:0 0 .5em; }.comment-body-author { margin:0; padding:0px 0px 0px 20px;}.comment-body-author p { font-size:100%; margin:0 0 .2em 0; color:#000000; text-decoration:bold;}.comment-footer { margin:0 0 .5em; padding:0 0 .75em 20px; color:#996; }.comment-footer a:link { color:#996; }.deleted-comment { font-style:italic; color:gray; }

Now check out this modified code. As the comment section CSS may differ across various templates, do not copy-paste the entire code. Understand and pick up the changes shown in italic-bold (and annotated for reference). Also Checkout the image below to see what I mean by comment header, comment body and comment footer in my annotations.

/* Comments----------------------------------------------- */#comments { margin:0; }#comments h4 { margin:0 0 10px; border-top:1px dotted #99bb99; padding-top:.5em; line-height: 1.4em; font: bold 110% Georgia,Serif; color:#333; }#comments-block { line-height:1.6em; }.comment-author { background:#CCFFCC /*comment header background color (comment author name)*/url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 2px .35em; margin:.5em 0 0; padding:0 0 0 20px; font-weight:bold; }.comment-body { background:#99FFFF; /*Reader comment background color*/ margin:0; padding:7px 7px 7px 7px; /*Modified padding values*/ }.comment-body p { margin:0 0 .5em; }.comment-body-author { background:#cccccc; /*The author comments background color.*/ margin:0; padding:7px 7px 7px 10px; /*Modified padding values*/}.comment-body-author p { font-size:105%; margin:0 0 .2em 0; color:#6728B2; /*The author comments text color.*/ text-decoration:bold;}.comment-footer { background:#CCFFCC; /*Comment footer background color (comment permalink)*/ margin:0 0 .5em; padding:0 0 .75em 20px; color:#996; }.comment-footer a:link { color:#996; }.deleted-comment { font-style:italic; color:gray; }

To pick up color hex values that suit your blog you can refer to this link. This is a simple tutorial on how to modify your comment section. You can add a whole lot of CSS to make it look better. Do drop a line here if you are able to create anything good looking based on these lines.

I was going through the stock dots dark template when I came across a section labeled “Page structure tweaks for layout editor wireframe” just before the closing skin tag in the template head. Soon I realized that I can use this section to modify the looks of my layout editor in the following section:

Template > Page Elements > Add and Arrange Page Elements

For those of you who couldn’t follow me, here is a visual of what I am referring to:

After converting to a three-column layout in my dots dark template, for many months my layout editor was in a mess. This happened because I changed my template’s outer-wrapper width such that there is no wastage of space on a typical 1024×768 resolution screen or in other words I stretched the template to fit snugly I did not bother my self with the layout editor and learnt to live with it.

Here’s how my layout editor looked after switching to three columns and then the widebar layout. Call it an example of a bad layout in the layout editor:

However, after the recent switch to the lighter and more legible dots template, I discovered this section of the template and found out that I can completely control the looks of the layout editor from within the template code. Here’s how the code looks:

Here’s my modified code to get the layout-editor in order:

/* Page structure tweaks for layout editor wireframe */

body#layout #sidebar, body#layout #main,body#layout #main-wrapper,body#layout #outer-wrapper,body#layout #sidebar-wrapper {   padding: 0;}

body#layout #outer-wrapper {   padding: 0;  width: 765px;  padding: 0 5px 0 10px; }

body#layout #sidebar1-wrapper {   padding: 0;  width: 150px; }

body#layout #sidebar2-wrapper {   padding: 0;  width: 170px; }

body#layout #widebar-wrapper {   width: 290px;  padding: 5px 10px 0 5px; }

body#layout #widebar {   padding: 0;  width: 290px; }

body#layout #main-wrapper {   padding: 0;  width: 360px;  padding: 5px 10px 0 5px; }

body#layout #header-wrapper {   padding: 0;  width: 750px; }

body#layout #footer-wrapper {   padding: 0;  width: 750px; }

/* End of Page structure tweaks for layout editor wireframe */

and the result is acceptable:

Just look at the code and follow its syntax and how it’s done. Play around with the width values to get the best fit (in a test blog and with backup on original). Soon you should be able to fix layout editor issues on your own. Remember that you can drop a line here in case some thing goes wrong.