Skip to content

Everything for WordPress, web development — and beyond

🛠 How to create a [br] shortcode for line breaks in WordPress

🛠 How to create a [br] shortcode for line breaks in WordPress

You're laying out a post in WordPress. Between two lines you need a small break, not a new paragraph but a light separation. You add two <br> tags in a row, switch to the visual editor and back, one disappeared. You put a blank line, WordPress turns it into a new paragraph with a full indent. Not what you want.

It's not the theme or the settings. Behind the scenes, wpautop is working, a built-in WordPress filter that automatically formats text and removes "extra" HTML tags. The logic is useful: it saves you from manually wrapping paragraphs in <p>. But when you're laying out poetry, captions for a series of images, or step-by-step instructions with micro-pauses, wpautop gets in the way.

Below, three ways to control line breaks in any WordPress editor. From a quick built-in method to fully manual through CSS. Each has been tested on WordPress 6.4+, without plugins.

💡 Quick overview:

  • Register a [br] shortcode in functions.php, a universal tool for any number of breaks that doesn't touch the editor
  • Use Shift+Enter when typing text, a built-in method for a single break, without a single line of code
  • Set precise spacing through inline CSS when you need a specific pixel distance for accent separation between blocks

Video: how to create WordPress shortcodes from scratch

Watch the full process, from registering in functions.php to output on the frontend. The same principle applies to any custom shortcodes, not just [br].

Method 1: [br] shortcode, full control over breaks

A shortcode solves the problem once and for all. Add the code once, and insert [br] anywhere: in post text, in a widget, even in a heading through do_shortcode. The editor doesn't touch content inside square brackets, the wpautop filter ignores it, breaks survive after any number of switches between tabs.

Add the following code to your child theme's functions.php. If you don't have a child theme yet, first create one using our guide. Don't want to touch theme files, install the Code Snippets plugin and paste the code there, same result.

1/**
2 * Shortcode for manual line breaks in the visual editor.
3 * Usage: [br] for single break, [br][br] for double.
4 */
5function sdstudio_line_break_shortcode() {
6 return '<br />';
7}
8add_shortcode( 'br', 'sdstudio_line_break_shortcode' );

The sdstudio_line_break_shortcode function returns an HTML <br /> tag, and add_shortcode registers the [br] shortcode, WordPress replaces it with this tag when rendering the page. The sdstudio_ prefix in the function name protects against conflicts: if another plugin registers a function with the same name, the site won't crash.

After adding the code, write in the editor like this:

1This is the first paragraph.
2[br]
3This is the second line right below the first.
4[br][br]
5And this is with a double break.

Result: the first and second texts are separated by a single break, the third is separated by a double break. WordPress processes shortcodes after the wpautop filter, so autoformatting doesn't affect them.

The name br is chosen for brevity, but technically it's a risk: another plugin or theme might register its own [br]. In practice, conflicts are almost never encountered. If you notice strange behavior, rename it, for example, to [sd_br].

Before editing functions.php, make a backup copy of the file via FTP or the file manager of your hosting. If the site stops opening after changes, upload the saved original back, everything will work.

Method 2: Shift+Enter, built-in method without code

If you need a single break and don't want to mess with code, hold Shift and press Enter in the visual editor.

The cursor will move to the next line within the same paragraph. In HTML this is the same <br>, only WordPress inserts it automatically. Regular Enter creates a new paragraph (<p>), while Shift+Enter creates a line break without spacing.

Downside of the method: works only for one break. Two Shift+Enter in a row WordPress will merge into one <br>, and three will turn into a new paragraph. If you need noticeable vertical spacing between lines, proceed to method 3.

Method 3: inline CSS for precise spacing in pixels

When neither shortcode nor Shift+Enter gives the needed distance, set the spacing directly through the style attribute.

Switch to the "Text" tab in the upper right corner of the classic editor:

Text tab in the WordPress classic editor

Find the paragraph after which you need spacing. Wrap it in <p> tags and add margin-bottom:

1<p style="margin-bottom: 100px;">
2This is a paragraph after which there will be 100 pixels of spacing.
3</p>
4<p>And this is the next paragraph, with a noticeable gap.</p>

Replace the 100px value with your own. The larger the number, the wider the gap. For spacing from the top, use margin-top. You can combine them: <p style="margin-top: 50px; margin-bottom: 80px;">.

The method is convenient for individual cases, accent separation of semantic blocks within a specific post. But inserting such code into every paragraph is inconvenient. For systematic use, return to the shortcode from method 1.

⁉️🤔 Frequent questions

Why does WordPress remove my <br> when switching between editor tabs?

The TinyMCE visual editor, when switching to the "Visual" tab, reprocesses HTML and removes tags it considers unnecessary. The [br] shortcode is not affected by this cleanup: it's decoded into <br> only when output on the frontend, and in the editor it remains ordinary text in square brackets. That's why the shortcode is more reliable than direct HTML, your breaks will survive any number of switches between tabs.

Can I use for vertical spacing?

Technically yes, but it's bad practice. Multiple in a row look messy, confuse screen readers, and fall apart on mobile screens. For empty space, use CSS spacing (method 3), and leave for linking words that can't be broken by a line break, for example, "WordPress 6.4". Non-breaking space is not intended for vertical gaps.

Does [br] work in the Gutenberg editor?

Yes, the [br] shortcode works in any WordPress editor: both in the classic and in the block-based Gutenberg. In Gutenberg, insert a "Shortcode" block and write [br]. The block is in the "Widgets" category, if you don't see it, click "Browse all" and find it through search. Note: in Gutenberg Shift+Enter also works, so for simple single breaks the shortcode may not be needed.

What to do if the shortcode displays as text and not as a break?

Two typical reasons. First: the code is inserted in the wrong file. Check that the function is added to functions.php of the active theme or child theme, not in wp-config.php or a plugin file. Second: the shortcode is inside a code block or HTML comment, WordPress doesn't process shortcodes inside <pre>, <code> and <!-- -->. Quick check: add [br] at the very beginning of a post on the frontend and see the result.

Do I need to disable wpautop for the shortcode to work?

No, disabling wpautop is not necessary and even harmful: you'll lose automatic paragraph formatting across the entire site. The [br] shortcode works independently of wpautop thanks to processing order: WordPress applies shortcodes after the autoformatting filter. Regular paragraphs will continue to format automatically, and you control line breaks manually, exactly where needed. The command remove_filter('the_content', 'wpautop') is a radical measure, after which you'll have to manually place <p> tags throughout the entire site. We advise avoiding this.

Which line break method is right for you

The choice depends on the task. There's no one universal solution, but there is clear logic:

If you need it quick and without code, Shift+Enter. A single break is enough in most cases: separate a caption from an image, break up a long heading, make a micro-pause within a paragraph.

If there are many breaks and they repeat, [br]** shortcode**. Set it up once and forget: write [br] when needed, even ten times in a row. Code in functions.php doesn't take even ten lines.

If you need precise spacing in pixels for accent separation, inline CSS. A margin-bottom: 80px pair will give exactly as much air as the design of a specific page requires. Don't overuse: for regular application, return to the shortcode.

These three methods cover all scenarios with line breaks in WordPress. Choose according to the task, and don't let the editor decide for you where there should be a gap and where there shouldn't.