Create a WordPress Line Break (br) Shortcode

Looking to add some extra spacing to your blog post using a line break in the WordPress classic editor? You can insert a break using the typical <br> tag via the text editor, however if you add more than one they get stripped out. Sometimes you need a bit of space, so having your breaks removed or turned into a paragraph just won’t do.

If you are one of many people struggling with this issue don’t worry because this guide will show you how to create a line break shortcode that you can use to insert as many line breaks as you want into the classic editor.

Line Break Shortcode Function

Simply insert the following code into your child theme functions.php file. If you’re not sure how to create a child theme you can check out our complete WordPress child theme guide or you can use the “Code Snippets plugin to add this code to your site.

function line_break_shortcode_callback() {
	return '<br>';
}
add_shortcode( 'br', 'line_break_shortcode_callback' );

Adding Line Breaks To Your Posts

With the code added to your site you now have the power to insert line breaks anywhere you need them and as many as you want. To do so, simply add [br] anywhere you wish to add a new line break.

Example:

This is some text.[br]This is some more text after a line break.[br][br]This is even more text after adding two line breaks.

Which should display as:

This is some text.
This is some more text after a line break.

This is even more text after adding two line breaks.

How to Add Line Breaks To WordPress Posts Without a Shortcode

If you weren’t looking for a shortcode but just a way to line breaks you’re in luck. There other options for adding line breaks to your WordPress site without creating a custom shortcode.

Add a Line Break Using Your Keyboard

The easy way to add a line break to your WordPress post using a keyboard is to hold the shift button and click enter. This will push your text to the next line as you’re typing (as opposed to clicking enter which would just create a new paragraph). A quick & easy solution!

Note: This trick will only work for one line break when using the “classic editor” (it’s fine in Gutenberg). Adding two or more breaks will simply result in WordPress forcing your text into a new paragraph. So if you want to create large gaps between content use the shortcode method or you can add a bit of CSS.

Add Large Line Breaks with Inline CSS

If for some reason you want a huge gap, then you could enter CSS right into your post. When creating your post click on the “text” tab in the top right corner to open up the HTML side of your post editor.

Find the paragraph you would like to add a gap of space beneath and add back the paragraph tags (the <p> at the beginning, and </p> and the end). Then add a bottom margin to your paragraph using the style attribute, like so:

<p style="margin-bottom: 100px;">This is a paragraph I want to add a 100 pixel gap after.</p>

If you want to add space above, just use the margin-top property instead. Now if you click back over to the “visual” side of the editor you should be able to see a gap the exact pixel size you entered.

Wrapping Up

Hopefully this quick tutorial was able to help! If you have any questions feel free to leave them in the comments section below and we’ll do our best to provide a helpful answer.