Documentation Home »
9bit Studios.com »

Adjusting Shortcodes

Shortcodes have a tendency to be a little bit fickle when it comes to formatting in how what they display appear in your pages and posts. Because the WordPress engine automatically adds HTML <p> tags to the content that you enter into the WordPress dashboard editor, and because shortcodes do not always return <p> tags, sometimes it takes a bit of finagling to make things line up properly.

For example, when entered into the WordPress editor (HTML tab), this text:

[inlinebox orientation="left"]Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem.[/inlinebox] Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit

Might give you a different result than this:

[inlinebox orientation="left"]Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Claritas est etiam processus dynamicus, qui sequitur mutationem.[/inlinebox]
Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit

In case you are still scratching your head, the difference here was that the shortcode was on a separate line in the second example.

To make shortcodes work, try doing things deleting whitespace and carriage returns and putting them on the same line(s) as your text as shown in the first example above. Also, it seems to be a good practice to put a space character between the last bracket of the closing of your shortcode and the first letter of the next word. That is, do this:

...lectorum.[/inlinebox] Mirum est...

And not this:

...lectorum.[/inlinebox]Mirum est...

Do this:

...lectorum.[/inlinebox] Mirum est...

And not this:

...lectorum.[/inlinebox]
Mirum est...

In short, if the shortcode is not displaying exactly as you want it, try working with it a little bit before worrying that it is completely broken.

One additional note regarding shortcodes: at present you cannot use shortcodes inside of other shortcodes. So, for example, this:

[inlinebox orientation="left"]Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. [buttonlink path="https://www.website.com/back" linebreak="true"]Go Forward[/buttonlink] Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.[/inlinebox]

...will not work.