Shortcodes are incredibly useful. They allow you to do complicated things with short, uncomplicated code. But there is one thing that can make them misbehave: line breaks between shortcodes.

Terminology

Just so we’re on the same page, here is some quick terminology.

Shortcode – A WordPress-specific code used on a WordPress page. Shortcodes use square brackets, ex. [top-left-box]
>More about Shortcodes 

Shortcode tags – This just means the shortcode itself, ex. [top-left-box], but does not include the content between the opening and closing tags. Ex. [top-left-box] This is not a shortcode tag [/top-left-box]

Opening tag – The first tag used in the shortcode. Ex. [top-left-box]

Closing tag – The tag used to close the shortcode. It’s almost always the same as the opening tag, but with a forward slash added. Ex. [/top-left-box]

Get rid of the line breaks

If you are seeing extra line breaks in your page, make sure that there are no line breaks around your shortcode tags.

If your code looks like this in the WordPress editor, your page might show an extra line break above your content “My text here.”

[top-right-box]
My text here
and some more text
[/top-right-box]

If that happens, don’t put a line break after your opening tag. It should look like this:

[top-right-box]My text here
and some more text
[/top-right-box]

And that should get rid of your extra line break above “My text here.”

Two sets of shortcode

In our templates, we have several layout options that allow you to break up your page into columns, all using shortcode. We’ll use the 5050 shortcode as an example. It divides the page into two equal columns.

If you have unwanted line breaks at the tops of your columns, or if the columns don’t appear to be working, you can probably fix it by removing all the line breaks before and after your shortcode tags. Here’s an example.

Before

[5050L]
Here is my text content for the left column.

I have a couple of lines. No big deal.
[/5050L]
[5050R]
Here is my text content for the right column.

I also have a couple of lines.

In fact, I have three!
[/5050R]

After

[5050L]Here is my text content for the left column.

I have a couple of lines. No big deal.
[/5050L][5050R]Here is my text content for the right column.

I also have a couple of lines.

In fact, I have three!
[/5050R]

Notice how there are no line breaks after the opening tags – [5050L] and [5050R] – so on the web page there will not be an extra line break at the tops of the columns. There is also no line break between the closing tag of the first shortcode and the opening tag of the second – [/5050L][5050R] – so there won’t be any extra code there on the web page to mess things up.

The Why

WordPress does some nice things for you: whenever you are editing a page, adding some text, and press the “Enter” key to do create a line break, WordPress turns your keystroke into code. It adds an html line break (which looks like <br>) to your page. So if you look at this logically, WordPress is doing exactly what you are telling it to do.

This:

[5050R]
Here is my text for the right column.
[/5050R]

Is interpreted as:

• start the right column (line break)
• display my text (line break)
• end the right column

Every time you add a new line, you are telling WordPress to break the previous line and start a new one. So the solution is getting rid of the unwanted line breaks.

Turn this

[5050R]
Here is my text for the right column.
[/5050R]

Into this

[5050R]Here is my text for the right column.
[/5050R]

Or even this

[5050R]Here is my text for the right column.[/5050R]