Shortcodes

Silverio makes use of Shortcodes to give you the power of the grid inside your WordPress content, and it also lets you quickly add buttons to your content.

Button Shortcode

Let’s start with the easy one. The code looks something like this:

[button text="My button" link="http://www.your-link-here.com" ]

And this is the result:

My button

Grid Shortcode

Silverio’s grid uses the Blueprint CSS Framework. Here’s how it works:

  • The content area is divided into 12 columns.
  • Between each column stands a 40px margin (also called “gutter”).
  • Divs can be set to span across between 1 and 12 columns using a “span-x” class (such as “span-4″).
  • One row of divs must not span across more than 12 columns.
  • The last div of the row gets the “last” class.

Now that you know all this, it’s easy to use shortcodes to create your own grid. First, start enclosing your content (in this case, we have two content blocks) between matching [grid] tags like so:

[grid]
Proin metus odio, aliquam eget molestie nec, gravida ut sapien.
Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.
Praesent eget neque.
[/grid]
[grid]
Quisque eget odio ac lectus vestibulum faucibus eget in metus.
In pellentesque faucibus vestibulum.
Nulla at nulla justo, eget luctus.
[/grid]

Now the fun part begins. We’ll add a “span” attribute to both grid blocks. The first one will be equal to 4, the second one to 8. The result will be that one block spans across one third of the area, and the other one spans across two thirds of the page. We also add a “last” attribute to the second block since it’s the last one of the row:

[grid span="4"]
Proin metus odio, aliquam eget molestie nec, gravida ut sapien.
Phasellus quis est sed turpis sollicitudin venenatis sed eu odio.
Praesent eget neque.
[/grid]
[grid span="8" last="true"]
Quisque eget odio ac lectus vestibulum faucibus eget in metus.
In pellentesque faucibus vestibulum.
Nulla at nulla justo, eget luctus.
[/grid]

The end result will look something like that (note that here I’m using two blocks that span across 4 columns, since the total width of this content zone is only 8 columns):

Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque.
Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus.