Want to add some spacing to your blog posts using line breaks in the WordPress visual editor?You can use the typical
Labels insert a break, but if you add multiple labels, they are removed. Sometimes you need a little space, so removing breaks or turning them into paragraphs won’t work.
If you’re one of the many people struggling with this problem, don’t worry because today’s everyday code tricks will allow you to use newlines whenever and as many times as you like.
Word Wrap Shortcodes
Simply insert the following shortcode into your child theme functions.php file (check out our full WordPress child theme guide if you’re not sure how to create a child theme):
/* ------- Line Break Shortcode --------*/ function line_break_shortcode() return '<br />'; add_shortcode( 'br', 'line_break_shortcode' );
add line breaks to your post
Now add the code to your functions.php file, all you need to do to create a line break in the visual editor is to insert the shortcode wherever spaces are required.
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.
should appear 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 Shortcodes
If you’re not looking for shortcodes, but just a way to break lines, you’re in luck. There are other options to add line breaks to your WordPress site without creating custom shortcodes.
The Easy Way to Add Line Breaks to WordPress
An easy option is Hold down the shift button and click enter. This will push your text to the next line as you type (instead of hitting enter which just creates a new paragraph). A quick and easy solution!
Note: this only applies to one Cross the line. Adding two or more breaks will simply cause WordPress to force your text into a new paragraph. So if you want to create large gaps between your content, use the shortcode method, or you can add some CSS.
Add big line breaks with inline CSS
If for some reason you want a huge gap then you can type the CSS directly in your post. When creating a post, click the “Text” tab in the upper right corner to open the HTML side of the post editor.
Find the paragraph you want to add spaces below, and add back the paragraph tag (
In the beginning,
and ending). Then use the style attribute to add a bottom margin to the paragraph, like this:
<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. Now, if you click back to the “Visual” side of the editor, you should be able to see the exact pixel size gap you entered.
Hope this quick tutorial helps! If you have any questions, feel free to leave them in the comments section below and we will try to provide helpful answers.