For the past few years I’ve used the Skeleton Framework as my parent theme for almost all of my WordPress websites. Skeleton is flexible and simple, as the name suggests, giving me lots of freedom to edit and modify as well as a standard set of shortcodes. I thought I’d give my clients a quick rundown of the shortcodes I most often use on their websites so that they can understand how to make basic modifications on their own.

Layout Shortcodes

We often use columns in modern web design. In responsive layouts (like Skeleton) when viewed on a mobile device, the columns rearrange to be stacked on top of each other rather than side-by-side. Three-column is the most used, but we have shortcodes for up to six columns, which can be combined in any manor. For example, you might use two 1/3 columns and two 1/6 columns, as long as the fractions add up to a whole. And who said we’d never use third-grade math?

Here are the names of the shortcodes:

[callout]

• [one_half]
• [one_third]
• [two_thirds]
• [one_fourth]
• [three_fourths]
• [one_fifth]
• [two_fifths]
• [three_fifths]
• [four_fifths]
• [one_sixth]
• [five_sixths]

[/callout]

The column shortcodes must have a beginning and ending shortcode and the last column in a row has the word “last” in it. Here’s an example:

[callout]

[one_third]FIRST COLUMN CONTENT[/one_third]

[one_third]SECOND COLUMN CONTENT[/one_third]

[one_third last]THIRD COLUMN CONTENT[/one_third]

[/callout]

To fix alignment issues, [clear] can be inserted after an element.

Componant Shortcodes

Below is a basic button, the destination of the button would replace the “#” symbol. Any basic color can be used (red, blue, light blue, green, orange, black, etc). Alignment can be center, left or right, And in place of “deafult” for size mini, small, large and huge are also options.

[callout][button link=”#” color=”white” align=”center” target=”_self” size=”default”]Button Text[/button][/callout]

Callout boxes are used to emphasize or contain a block of text. Their shortcode is simple:

[callout][callout]BOX CONTENT[/callout][/callout]

A horizontal line can be inserted by entering the code:

[callout][clearline][/callout]

My Custom Shortcodes

These are shortcodes that I have added myself. Not all of my Skeleton websites have them, but many of them do.

• [jumbotron]CONTENT[/jumbotron] – this is used for large banners, the title of a page can be inserted over the image.
• [jumbotron-jr]CONTENT[/jumbotron-jr] – this is a slightly smaller banner, usually used for sub-pages.
• [br] – forces a line break. A closing tag is not necessary.
• [anchor name=”#”] – adds an anchor anywhere in the page. Used for sending people directly to a specific point in a page or for a “back to top” link. A closing tag is not necessary.
• [pad] – ads a little extra vertical space on the fly. A closing tag is not necessary.
• [row]CONTENT[/row] – on a full-width page I use this to confine the content to the center of the page. It often has other shortcodes inside of it. I can also add color=”row-contrast”, color=”row-light” or color=”row-dark” to color the row.

When I hand a finished website over to you, all shortcodes should be in place, so you don’t need to remember them or really know how to use them. But if you want to get into your website and make your own edits, this guide should help you understand what you see.