Using Shortcodes in the Visionary

Shortcodes are like mini-templates of elements that consist of many things like:

  • Read More buttons
  • Bullet lists
  • Contact forms or other forms
  • Column layouts
  • and more…

**Coming to this page right now? I am currently adding shortcodes for every element the Visionary theme offers and will be posting them here as I go along.

First is to understand that Shortcodes must be added in the HTML editor view, because if you do it on the visual view, things get messed up. The other VERY IMPORTANT note is that the editor in WordPress really is the worst on the planet and I know the WP development team does not like being told that. However, we’ll leave that topic for another day…

The IMPORTANT note that I am referring to is that the HTML view does not show html code, it shows blank spaces, so you will have to imagine there is actual html coding mixed in with your own content (it’s there, it’s just that it’s invisible). When you paste stuff into the editor, shortcodes or anything else, and you click your “Enter” key on your keyboard, you are in fact adding a line space. The result of this will show a new line in your site’s front-end. This is especially important when you are using multi-column shortcodes in your page because if they are not pasted correctly without that line spacing, you will get each column side-by-side as one line down from the other (offset alignment). This happens often with people and they are confused as to why their columns are not lined up horizontally in perfect unison. Here is what you might see:

sc-offset

What you don’t see until you look at the browser source code, is that between the 1st and 2nd columns, and the 2nd and 3rd, there is a <br> tag. This is done by the editor. So how do you prevent this offset look of columns? Not a perfect fix but this is what I discovered…when you paste your shortcode like this:

[c290] <h2>Your Heading Here</h2> <p>Add your content here</p> [/c290] [c290] <h2>Your Heading Here</h2> <p>Add your content here</p> [/c290] [c290_last] <h2>Your Heading Here</h2> <p>Add your content here</p> [/c290_last]

If you discover that the layout looks like the screenshot above, then in your html view of your editor, move each opening tag [c290] to the end of the closing [/c290] tag but do one single space between to separate them with your spacebar so that your code looks like this:

[c290] <h2>Your Heading Here</h2> <p>Add your content here</p> [/c290] [c290] <h2>Your Heading Here</h2> <p>Add your content here</p> [/c290] [c290_last] <h2>Your Heading Here</h2> <p>Add your content here</p> [/c290_last]

Although this is just one example, it seems to work for me.

So be careful as the HTML editor in WordPress is very hard to work with if you are doing anything more than simple typing.

IMPORTANT: Due to WordPress’s editor, some shortcodes in my tutorials will be standard HTML snippets instead of shortcodes because it’s just too buggy for some types of shortcodes.

The HTML View

This is what the HTML view looks like…notice the tab HTML is highlighted in darker text:

wp-html-editor

Shortcode

Shortcode is code that you paste into your page or post, and in most cases, has an opening and closing tag like the example below for a quote:

[quote]This is my quoted text sample[/quote]

  • The opening tag is: [quote]
  • The content is: This is my quoted text sample
  • The closing tag is: [/quote]

Some shortcodes will be just one line without a closing tag, like this example:

[contactform email=#]

The above sample will put a Contact us form into your page.

You can even do nested shortcodes, but be careful with these as it can be tricky.

Where Can you Use Shortcodes?

Somewhat flexible, you can use shortcodes (providing your theme supports shortcodes) in the following areas:

  • Pages
  • Posts
  • Text Widgets
By | 2010-11-01T02:46:09+00:00 November 1st, 2010|Blog|0 Comments

About the Author:

Leave a Reply