WordPress Editor (TinyMCE) how to create line break <br> and not paragraph <p>.

This is a very simple tips/snippet. One of the biggest annoyance for first time WordPress user is that WordPress Editor/TinyMCE will produce paragraph tag instead of just simply add a line break. This makes it really hard for newbie switching from other blogging platform/social media to write a new content.

This mostly happen to my client (and my self) when first switching from blogger (google) to WordPress or use social media like facebook, twitter, or forum (vBulletin, etc) which do not do this/have this behavior.

What is <br /> and what is <p>?

In WordPress when we write content and hit “Enter”, we will add new paragraph, and there will be a margin in between text, some people try to hit “backspace” to remove the extra margin, but instead it will go to the previous line. It’s probably easier to explain using picture:

The first (with no margin in every line) is using line break / <br/> tag, and the second one with margin at the bottom is using paragraph / <p> tag.

I’ll explain that it’s easy to enable line break on “Enter” in WordPress editor.

How to create <br/> or line break in visual editor

Some (maybe most) WordPress user don’t know that it’s very simple to add <br/> directly in visual editor. Some user just switch to text editor (because it doesn’t create paragraph when hit “Enter”), add content there and switch back to visual editor after they add content to see how it looks like. Some other user might put the text inside <pre> tag, using style/format drop-down because text inside pre tag don’t have auto-p.

That’s right, it’s very simple. Instead hitting “Enter” keyboard button we can use “Shift+Enter”.
So in WordPress,”Enter” is to create new paragraph and “Shift+ Enter” will add line break.

How to Switch this Behavior?

In TinyMCE (the editor WordPress use), there’s an option called forced_root_block. We can filter the default using tiny_mce_before_init filter. We can add this code in theme functions.php or using functionality plugin.

/* Filter Tiny MCE Default Settings */
add_filter( 'tiny_mce_before_init', 'my_switch_tinymce_p_br' );

/**
 * Switch Default Behaviour in TinyMCE to use "<br>"
 * On Enter instead of "<p>"
 * 
 * @link https://shellcreeper.com/?p=1041
 * @link http://codex.wordpress.org/Plugin_API/Filter_Reference/tiny_mce_before_init
 * @link http://www.tinymce.com/wiki.php/Configuration:forced_root_block
 */
function my_switch_tinymce_p_br( $settings ) {
    $settings['forced_root_block'] = false;
    return $settings;
}

Very simple filter. This code will switch the behavior of Enter and Shift+Enter in WordPress.
So now if we hit “Enter” it will create line break/<br> and if we hit “Shift+Enter” it will create new paragraph.

A note:

Even though we can easily do this, it’s actually better to not use the code, and simply educate new WordPress user about using Shift+Enter to create new line. From TinyMCE docs:

Note that not using P elements as root block can severly cripple the functionality of the editor.

Most WordPress plugin author/theme author will expect this behavior as default. So it’s probably best to leave it as is, except in several case when it’s really necessary.