What I mean by Dynamic Editor Style is adding CSS style based on user setting/option. For example you have a font option via the customizer where user can select font to use or maybe link color option like my previous tutorial about color option in customizer.
There’s tons of tutorial about how to add feature in WP Editor (tinymce) via “formats” drop downs, but none really explain how it works. Most just a recycle of other tutorials with different element and CSS and (sometimes) poorly coded.
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.
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.
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.
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:
It’s very simple, you can add this code in your theme/child theme functions.php or add it in a functionality plugin.