add line breaks to wordpress editor using shortcoder plugin

How to add Line Breaks in WordPress Editor?

WORDPRESS editor is a very powerful WYSIWYG editor. I have been loving wordpress ever since I have migrated from blogger. The plugins make everything easier. But very recently I started getting formatting issues. I was unable to add line breaks using html break code. I googled for a fix and I saw many people complaining the same. I tried adding double and triple break tags just as I saw in several forum posts. But that doesn’t seem to fix my issue.  And adding empty HTML elements like <p></p> is not a good solution either.

I have tested the break tag functionality in the site editor and also in the new wordpress desktop app. As far as my testing goes, the problem is limited to self hosted wordpress blog editor. So here are 3 solutions that I recommend for bloggers experiencing wordpress line break issue.

Switch to editor OR the new Offline App

the new editor
Like I said already, the line break issue is limited to the self hosted wordpress site editor. Go ahead and download Jetpack plugin to manage your self hosted site directly from The jetpack plugin adds the functionlity to publish posts from your account. The plugin also gives daily stats, stores images on high speed servers, adds a layer of protection, etc. This solution is by far the best.

You can also use the latest offline wordpress editor.

What actually is the line break tag for wordpress editor  (<br> or <br/>) ?

adding line breaks in wordpress editor
The answer to the above question may seem quite weird because it’s none of those. You have to add </br> tags to add line breaks in self hosted wordpress editor. Never in my life have I seen that code! Surprisingly, it’s not even mentioned anywhere in the web!

Adding </br> tags to the self hosted wordpress text editor seems to add line breaks. But this solution can’t be trusted for too long.

The Shortcode Way

An advantage of this method is that the solution is quite eternal. It’s gonna work for a very long time! Moreover you could also specify the amount of space to add in the line break. This is done by adding an empty span tag and setting it’s margin properties to required spacing. You could directly add the code given below or you could create a shortcode for quick access.

Creating Line Breaks shortcode using shortcoder plugin

  1. Open your wordpress dashboard and navigate to plugins.
  2. Click on add new and search for “Shortcoder”plugin.
  3. Install and activate the plugin.
  4. Now navigate to Settings > Shortcoder .
  5. Now enter the title for the shortcode such as “line-break”.
  6. Copy the below code to the text area (not visual) and click “Create Shortcode”.
<span style="display:inline-block;height:%%space-in-px%%;"></span>
[sc:line-break ]

Adding the Line Break in wordpress editor

  1. Open the wordpress editor and click on the shortcoder icon.
  2. Select line break shortcode to insert it into the post. Enter the desired space in the field (Sometimes you will need bigger values to insert even a little space. This is due to interference of other CSS styles.) .

Have you experienced this kind of problem with wordpress? Let me know your thoughts in the comments.

[sc:h2-style class=”hhh” bg=”#607D8B” ][sc:list-nonReversed color=”#607D8B” ]

Shan Eapen Koshy

Shan Eapen Koshy is a technology enthusiast from Kerala, India. He has a particular interest in discovering new workflows, automating repetitive works, and trying out new tech.


Services Offered

  • Web Design and Development
  • AppScript Development
  • Web Scraping
  • Sponsored Articles
  • Ad Placement
Contact Us

Your Support is Appreciated

If you love what I'm are doing, please support me by buying a coffee.

Buy me a coffeeBuy me a coffee PayPal

Follow Us

Don't be shy, get in touch. We love meeting interesting people and making new friends.