Series: WordPress Editor and TinyMCE

How To Add Background Color (Highlight) Option in WordPress Editor TinyMCE

WP Editor TinyMCE Text Highlight Backgrond Color
WP Editor Background Color Option

WordPress Visual Editor only have text color option. But sometimes we need to highlight the text by changing the text background color. TinyMCE (the editor script) actually have this feature, but WordPress hide it to make the visual editor simpler. But if you need this feature, you can activate this feature using very simple code.

Read More How To Add Background Color (Highlight) Option in WordPress Editor TinyMCE

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

wp-editor-br-vs-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:

why-like-this-wp-editor-br-p

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.

There’s nothing wrong with WordPress, this is actually a feature in WordPress called auto-p (auto paragraph)

I’ll explain that it’s easy to enable line break on “Enter” in WordPress editor. Read More WordPress Editor (TinyMCE) how to create line break <br> and not paragraph <p>.

How to add “Next Page”/ “Page Break” button in WordPress Editor

In WordPress we can separate post/pages using <!--nextpage-->. It’s hard to remember the tag, and you need to add it using “Text” editor, not visual editor. This is  how you can add “Next Page” or “Page Break” button in Visual Editor, Just like this:

wordpress-next-page-visual-editor

It’s very simple, you can add this code in your theme/child theme functions.php or add it in a functionality plugin. Read More How to add “Next Page”/ “Page Break” button in WordPress Editor