How to enable bbPress’ Visual Editor?

bbPress Editor

By default, bbPress’ Visual Editor is turned off since bbPress 2.3.1. The reason is probably concerning security since the editor allows html and other codes (possibly via frames) to run in it, and bbPress developers are kind of trying to prevent code exploitation and injections by malicious users from happening. They also remove the option to turn on this editor. However, that doesn’t mean the visual editor is not working. It’s still there, deep in bbPress’ codes! It’s just hidden.

You might be able to unhide this via a bbPress-plugin, but what I’m going to teach here is how to unhide it via WordPress’ functions.php.

OK, this is a bit something about programming so I suggest you make a backup of your functions.php file in case something blows up. Now, first off… for beginners, you should find the WordPress’ functions.php file in the theme’s folder. From the folder where you install WordPress (let’s assume the usual: [public_html] directory). From there, go to wp-content/themes/[theme_name]/ where theme_name corresponds to the folder name of the WordPress theme that you are using. functions.php are one of those files you’ll find in there. Copy and save that file in your computer or in a different folder where you can copy it back to same location later in case you corrupt the functions.php file you are going to edit. Of course, the safest way to avoid this is by creating a child theme and creating a functions.php file from there, it also prevents your modifications from getting lost in an event of a theme update. Anyways…

Now that you backed up your original functions.php file, you can edit functions.php via WordPress’ Administration page under Appearance > Editor or by editing functions.php file directly from your host’s WordPress Theme’s directory.

In the functions.php file, add the code snippet below. I’d prefer to put it at the very bottom of the page, in case it contains other codes, and before the closing ?> tag.

function bbp_enable_visual_editor( $args = array() ) {
$args['tinymce'] = true;
return $args;
}
add_filter( 'bbp_after_get_the_content_parse_args', 'bbp_enable_visual_editor' );

If you look at the code snippet carefully, you’d be surprise that bbPress actually has a built-in TinyMCE (Tiny Moxiecode Content Editor). It is a WYSIWYG (What You See is What You Get) editor designed for Forums such as bbPress. It has tools to help you easily insert and apply text formats into your texts. What the code does is simply set TinyMCE to true which is a boolean value equivalent to “1” or “on”. In contrast, it should activate TinyMCE and reveal itself.

Additionally, you can also customize the visual editor by adding more arguments into the function.

Below is a function that only shows the visual editor but not the html editor.

function bbp_enable_visual_editor( $args = array() ) {
$args['tinymce'] = true;
$args['quicktags'] = false;
return $args;
}
add_filter( 'bbp_after_get_the_content_parse_args', 'bbp_enable_visual_editor' );

This is how your bbPress editor will look like:
bbPress TinyMCE

Moreover, you can also show other media buttons like an emoticon button to insert smilies if you are using a plugin like TinyMCE Advanced.

To do this, use the code below with the new argument added instead to be able to add new media options like the emoticon button.

function bbp_enable_visual_editor( $args = array() ) {
$args['tinymce'] = true;
$args['teeny'] = false;
return $args;
}
add_filter( 'bbp_after_get_the_content_parse_args', 'bbp_enable_visual_editor' );

The code above will show both the TinyMCE and the HTML (Text) Editor. Additionally, Teeny set to false will reveal “Toggle Toolbar” option that hides/unhides additional toolbars such as the Special Character toolbar, Text Color, etc.

bbpress visual editor teeny false

Note that if you disable the teeny mode in the visual editor and allow other media buttons through the TinyMCE Advanced plugin, you will probably need to add the function below to your functions.php file to allow your users to use some of the buttons like the table button: (you must enable Javascript to view it).

If you can’t see the code above, click here.

In some cases, text pasted into the visual editor will bring along unwanted styles and HTML markup. You can use another function to force pasted extra codes to be cleaned up. This will remove stray HTML codes but leave in basics like bold and italics.

function bbp_tinymce_paste_plain_text( $plugins = array() ) {
$plugins[] = 'paste';
return $plugins;
}
add_filter( 'bbp_get_tiny_mce_plugins', 'bbp_tinymce_paste_plain_text' );

Personally, this is would be my ideal setup for my own bbPress Forum:

function bbp_enable_visual_editor( $args = array() ) {
$args['tinymce'] = true;
$args['teeny'] = false;
$args['quicktags'] = true;
return $args;
}
add_filter( 'bbp_after_get_the_content_parse_args', 'bbp_enable_visual_editor' );
Follow me at:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.