Documentation

Shortcode

A column is defined by wrapping content inside [column]...[/column] shortcodes. Each column may be assigned a class, that has been pre-defined in the theme’s CSS file. CSS attributers, such as width and padding, can also be assigned within the shortcode.

At the very minimum each column should have a defined width–either in the assigned class definition, or by using the shortcode’s width attribute. Distance between the columns is highly recommended, and easily accomplished by defining padding and/or margin values.

Use the [end_columns] shortcode to complete each row of columns. The following examples show how the Column-Matic shortcode can be used in various configurations.

Example: Two Columns

The following code will create two columns. The first column will be assigned a width of 180px, the second column will have an assigned width of only 120px. Both columns are assigned a padding of 10px.

[column width="180px" padding="10px"]content[/column]
[column width="120px" padding="10px"]content[/column]
[end_columns]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor feugiat lacus nec iaculis. Duis cursus urna et nisl cursus nec luctus massa scelerisque. In in lobortis nisl. Quisque lacinia mattis leo id fermentum. In pharetra volutpat suscipit. Nunc commodo nulla et sem rhoncus auctor. Phasellus congue dictum ultrices.
Sed facilisis feugiat vestibulum. Mauris non sapien eu lorem aliquet lacinia. Nulla quis risus eros, a porttitor dui. Aenean vehicula consequat ullamcorper. Morbi vel pharetra eros. Etiam iaculis ligula non neque ultrices.

Example: Three Columns

Values can also be defined as a percentage of available space. In this example, three columns will be created using percent values. The first column is assigned 45%, the second and third columns are assigned 20%. Columns one and two are assigned a right margin of 5%. Colored backgrounds have been added for clarity.

[column width="45%" margin_right="5%" background="#660000"]content[/column]
[column width="20%" margin_right="5%" background="#999933"]content[/column]
[column width="20%" background="#006699"]content[/column]
[end_columns]
Aenean sed dolor ac justo vulputate fermentum. In sagittis ultricies nibh at tempor. Sed et mattis massa. Etiam tempus mauris id elit euismod vestibulum. Praesent dignissim lacinia laoreet. Maecenas sed odio eu mauris bibendum tristique.
Nunc augue ipsum, fermentum sit amet consectetur at, commodo in tortor. Suspendisse pharetra, eros.
Aenean eget lacus ipsum, sed venenatis sapien. In vitae enim neque, ac adipiscing lorem. Quisque sed tur.

Class Attribute

Column-Matic does not include any pre-defined classes. Before the class attribute can be assigned the desired classes must be defined in the theme’s style.css file. In this example, we have added the following two classes to style.css:

.column_left {
	width: 150px;
}
.column_right {
	width: 150px;
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid  #CCC;
}

Once the classes are defined, the columns may have a class attribute assigned. Additional attributes can be assigned as well, and supersede related attributes defined in the class.

[column class="column_left"]content[/column]
[column class="column_right"]content[/column]
[column class="column_right" border_left="1px dashed #006699"]content[/column]
[end_columns]
Sed convallis pellentesque velit, eget malesuada libero tempus eu. Donec quis massa felis, quis imperdiet tellus vestibulum.
Ac nisi sed dui rhoncus pellentesque. Vestibulum ornare posuere nulla id porta. Duis scelerisque, enim sit amet sollicitudin.
Cras bibendum, risus tortor faucibus enim, at facilisis turpis elit eu massa. Nam egestas vestibulum dolor ac posuere.

Spacing Issues

Due to the default order in which WordPress processes content—wpautop (a WordPress core function that converts line breaks to p or br tags) is run before shortcodes are processed. An official fix is under discussion but in the meantime here are two solutions.

Change Execution Priority of wpautop

Change the execution priority of wpautop by adding the following line to functions.php:
add_filter( 'the_content', 'wpautop', 20 );

Remove Line Breaks & Spaces

Remove breaks and spaces between the shortcodes, so the the columns appear all clumped together:
[column class="column1"]Column 1 content goes here.[/column][column class="column2"]Column 2 content goes here.[/column][end_columns]

Comments

comments