How to add Shortcode to your page or post

Adding shortcode to your wordpress theme is fairly simple but at the same time it can be problematic when working with the default content editor that comes with WordPress; the same goes for any third party wysiwyg editors. When adding your shortcode, you MUST remember to paste the code into the HTML VIEW and not the VISUAL (WYSIWYG) VIEW, otherwise you will end up with problems.

What do I mean by both views?

This shows the editor active in WYSIWYG Mode:

As you can see with the screenshot below, you get more icon buttons and the upper right tab is active while the HTML tab is greyed out.


This shows the editor active in HTML Mode:

This screenshot shows how the default editor looks when you have the HTML tab active.


Sample Shortcode

This is what one type of shortcode looks like:

[sample]Some content here.[/sample]

Shortcode can be noticed by it’s opening and closing “square” brackets which wraps around the shortcode name. However, not all shortcodes will look like this because there are times you may get a really short one. For example, in the Corporate 3 theme, there is one for a page divider which separates content from each other horizontally. The shortcode you would use for this will look like this:


You may have noticed there is no opening and closing tags. Some may be more complex like adding several columns of content into a page or post. Another example from the Corporate 3 theme that gives you 3 columns of content:

<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>

<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>

<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>

The Problems With Content Editors

In general, most content editors are notorious for changing your own html code when you paste into the window whether you like it or not, and in most cases, you cannot do a thing about it except send the developers emails requesting a better quality editor.

Your own custom html and css code will look correct when you paste it into the editor window until you click SAVE and then all changes because developers of these content editors think they should change your code to what it thinks it should be, even if it’s correct in the first place. The most common editor used and used by other third party editors is Tinymce…

I won’t go into a complete review here about the different editors and what they do right and what they do wrong, but to go back to Shortcodes, remember to paste the code in the HTML View and not the VISUAL View.

Also be careful how much custom html and other coding (including css) you perform within the WordPress editor’s HTML mode because you will run into a very finicky problem of it changing your code and causing headaches. It happens unfortunately because the editor that WordPress uses is extremely limited and very messy to work with. The same goes for most of the other editor plugins you can install.

The best content editor I have worked with is one called “JCE Editor” which is actually based on TinyMCE but the developers did an amazing job with it. The downside to this is that it’s only available for the Joomla cms…not WordPress.

Where is the Shortcode for The Corporate?

You can find the shortcode in two places, the first is within the theme settings in the admin, but also, and the better place to copy and paste from, is the online demo which you can find your Corporate 3 Shortcodes.

By | 2010-09-25T02:00:54+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply