Tuesday, June 11, 2013

Easy way to add rich editing options to your bbpress forums with Bbpress post toolbar

In one of my recent projects where I am using “bbpress” to create forums, I wanted to bring about a rich editing experience for the end user. The default “bbpress” forum template is pretty simple (displayed below) with just about very basic editing features. Users who are fluent with HTML coding could benefit from some HTML tags, but you wouldn’t want to target your site for tech savvy users only. Hence arrives the need to include a toolbar where users can easily embed images, video, smileys and rich formatting options while posting in forums.


I evaluated 2 options here:
·         tinyMCE
·         bbpress post toolbar
“tinymce”  is a plugin that adds a pretty editing toolbar for both wordpress and bbpress posts, however when it comes to adding more smileys(which is my biggest need here), it can be a pain .It involves a lot of coding ,something I am not a huge fan of.
Finally, I stumbled upon “bbpress post toolbar” and loved it...So, here’s a quick tutorial on “How to use bbpress post toolbar for your forums and add more smileys to it with just a few lines of coding”.
To add “bbpress post toolbar”, simply install the plugin by clicking on “Plugins”->Add New-> (Type in “bbpress post toolbar” in the “Search” box) and click “Search Plugins”(screenshot below) from your wordpress “Dashboard”.

bbpress post toolbar add plugin

Once it’s installed, you can find it under “Plugins”->bbpress post toolbar”. Use it to enable/disable the various features that it offers. Once you have saved the settings, visit your forum and try to post something there. You will be happy to find the cute toolbar that “bbpress post toolbar” has added to your default forum edit box.
bbpress post toolbar

For my project, I needed to be able to add more smileys to the existing list and here’s how I did it by making use of the FAQ’s from the plugin site.
I copied my new smiley to the bbpress-post-toolbar/smilies/ folder. It’s recommended that you copy or move this folder to the default /wp-content/ directory so that your customized smileys are not lost when you upgrade this plugin.
Once done, add the last line to the package-config.php file inside this directory to bind your code to the image.
/* Smilies for bbPress Post Toolbar.
 * These smilies made by Laurent Schwarzenberger.

$wpsmiliestrans = array(
                ':)'  => 'smile.png',
                '(:'  => 'smile.png',
                ':-)'  => 'smile.png',
                '(-:'  => 'smile.png',
                ':('  => 'sad.png',
                '):'  => 'sad.png',
                ':-('  => 'sad.png',
                ')-:'  => 'sad.png',
                ';)'  => 'wink.png',
                ';-)'  => 'wink.png',
                ':|'  => 'lameface.png',
                ':-|'  => 'lameface.png',
                ':D'  => 'laugh2.png',
                ':-D'  => 'laugh2.png',
                ':S'  => 'confused.png',
                ':-S'  => 'confused.png',
                ':P'  => 'tongue.png',
                ':-P'  => 'tongue.png',
                ':O'  => 'gasp.png',
                ':-O'  => 'gasp.png',
                ':cry:'  => 'cry.png',
                ';('  => 'cry.png',
                ';-('  => 'cry.png',
                ');'  => 'cry.png',
                ')-;'  => 'cry.png',
                ':B'  => 'toothy.png',
                ':-B'  => 'toothy.png',
                ':Z'  => 'sleep.png',
                ':-Z'  => 'sleep.png',
                '(lolo)'  => 'laugh.png',
                ';|'  => 'bored.png',
                ':8)'  => 'sunglasses.png',
                '(e)'  => 'embarrassed.png',
                ':*'  => 'kiss.png',
                '(l)'  => 'love.png',
                ';O'  => 'retard.png',
                ':aw:'  => 'awesomeface.png',
                ':oops:'  => 'oops.png',
                ':&lt;'  => 'duh.png',
                ':X'  => 'nospeak.png',
                ':#'  => 'zipped.png',
                ':@'  => 'blag.png',
                '=|'  => 'lookdown.png',
                ':nerd:'  => 'nerd.png',
                ':{'  => 'disappoint.png',
                ':fffuuu:'  => 'fffuuu.png',
                ':facepalm:'  => 'facepalm.png',
                ':?'  => 'question.png',
                ':tu:'  => 'thumbsup.png',
                ':td:'  => 'thumbsdown.png',
                '(XD)'  => 'xd.png',
                '(X()'  => 'xsad.png',
                '(XP)'  => 'dead.png',
                ':angry:'  => 'angry.png',
                ':pirate:'  => 'pirate.png',
                '(OX)'  => 'skullcrossbones.png',
                '(slap)'  => 'slapping.gif',
                '(punch)'  => 'punch-in-the-face.gif'   //This will add my smiley
Now go back and edit the forum post. Pull down the “smiley” panel...
Yeeeeeee, my custom smiley is right down there!!!!!!!!!!!!!

bbpress post toolbar more smiley

Post a Comment