Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

Create a WordPress Line Break (br) Shortcode

Last updated on: September 25, 2023

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.

WordPress Visual and Text Editor tabs

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.

Add Margin with CSS

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.

17 Comments

  1. Sergio

    Just tried this in 3.7 and it works perfectly. Thanks.

  2. sƃoɹɟqǝʍ (@webfrogs)

    This works great. Thanks for this!

  3. Liviu Plesoianu

    Thank you for this! It is really, really helpful!

  4. Mk

    After years of struggle and cursing wordpress. The ultimate solution! And sooo simple. Thanks a zillion man 🙂

  5. parlopisrael

    It does the trick!!!! thanks man!!!

  6. Elizabeth M

    Thanks so much for this! When nothing else worked, your css tidbit worked perfectly! Yaaaay!

  7. A Walton

    Is there a character to place in uploadeded text ( before uploadinging) to create the equivalent of Shift – Enter?

    • Kyla

      I’m not sure what you mean by uploaded text, but shift-enter does work in the rich text editor to go to the next line with no spacing between lines.

  8. Nyx

    Thanks for this tutorial, AJ! It’s exactly what I needed. : )

  9. Ankit

    thanks for this quick tip!

  10. Mark

    I will confirm this works in WordPress version 5.8

    What would be great is to extend the PHP code snippet to insert this function via an icon into the WordPress page editor toolbar as [br].

    That would make this 100% complete.

  11. Tony

    Thanks! This worked for me 🙂

  12. Kung Fu

    I follow your post to add a snippet to enable the shortcode [br] so that the product excerpt allows line break.

    I have more than twenty products. It works on the first page, but when I turn to the 2nd page, the [br] breaks (edited). When I return to the first page, all the [br] codes appear. It’s weird.

    I am very frustrated. Anyone can help? Thank you!

    What should I add in the code?

    • AJ Clarke

      It sounds like perhaps the theme you are using is stripping out the breaks in the excerpts. Now, if you have many products manually adding breaks to every excerpt is a tedious process, it would be best to instead update the excerpts to automatically add paragraphs this way if you are working with custom excerpts just adding a space will automatically create paragraphs and add the spacing without the need for extra shortcodes.

      How would you do this? Well, it really depends on your theme because a lot of themes work differently in terms of how excerpts are displayed so it’s best to ask the theme developer how you could enable wpautop() for your excerpts.

  13. Linn

    How do you add a new line in the iOS app, without adding a new bock…?

    • AJ Clarke

      It looks like this is an ongoing issue with the app so it’s not possible. I think the only way is to click the three dots on the top right and change the view to “HTML” mode then you can manually add a <br> tag in the HTML.

  14. Sue Williams

    Perfect thank you. It was driving me mad but now works every time.

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.