Create A WordPress Line Break (br) Shortcode

Create A WordPress Line Break (br) Shortcode


Want to some extra spacing to your blog post using a line break in the WordPress visual 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. 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 today’s daily code trick will allow you to use line breaks whenever and how many times you feel like it.

The Line Break Shortcode for WordPress

Simply insert the following shortcode code into your child theme functions.php file (if you’re not sure how to create a child theme, checkout our complete WordPress child theme guide):

/* ------- Line Break Shortcode --------*/
 function line_break_shortcode() {
 return '<br />';
 }
 add_shortcode( 'br', 'line_break_shortcode' );

Add Line Breaks To Your Posts

With the code added to your functions.php file now all you have to do to create line breaks in your visual editor is to insert the shortcode wherever you want a space.

[br]

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.

The Simple Way to Add Line Breaks to WordPress

An easy option is to just 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 will only work for one line break. 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.



Source link

Share this post

Do NOT follow this link or you will be banned from the site!