Keeping readers’ attention is everything and the longer the content, the harder it is.

A steady scroll of text and embedded images is going to have a tough time maintaining the interest, which is why so many sites go to great lengths for formats that vary considerably.

Bringing these techniques to your own WordPress site is not difficult, once you know the secret to creating great looking content.

Kicked-off spectacularly by award-winning New York Times article Snowfall, longer form storytelling has proved to be more than just a bandwagon.

Whilst some online publications such as The Great Discontent only publish longer form others such as the New York Times, PitchFork and Australia’s public service broadcaster the ABC, are adding long form to their existing mix.

Long-form needs a different approach to the traditional shorter post. There’s no point trying to shoehorn longer content into a traditional 3-column layout (just like we repeatedly try on this site!). You need a more flexible approach to laying out your content, an approach that allows you to move beyond the constraints of the WordPress visual editor.

You need the power and simplicity of a grid.

The Power Of Grids

The best approach is nearly always the simplest. Simplest to implement, simplest to understand, simplest to use.

Grids fit this criteria and have been used for page layout both offline and online for many, many years.

They are simple to understand: the page is split into columns of each width; content spans a certain number of columns. They are simple to implement especially online where it’s a case of structured markup and appropriate CSS. And they are simple to use: a basic mechanism for identifying columns is all that is required.

Above all, though, grids can provide incredible flexibility.

There are many existing frameworks out there, from Bootstrap to Zurb Foundation that contain grids and can layout content. They also often come with a swag of bells and whistles which may, or, as is most likely when it comes to pure content, may not be useful.

For this article, I simply wanted a grid and nothing else and so I chose Simple Grid by Dallas Bass.

Simple Grid is a responsive grid of 12 columns, with an optional 20px gutter, and a maximum width of 1140px. Twelve is a great number, divisible by 6, 4, 3 and 2 it provides a wide range of layout choices.

Simple Grid is also responsive, changing the behavior of the columns as the screen size changes, meaning that for 90% of the time your content will respond perfectly across platforms.

Adding Simple Grid To WordPress

I’ve created a plugin to add Simple Grid to your WordPress site. Download it and install it as you would any plugin.

The plugin performs 3 tasks:

1. adds the simple.css stylesheet to the output for posts, pages and custom post types
2. adds 2 new shortcodes, sgrow and sgcol
3. changes the output of images with captions to use <figure> and <figcaption> (this adds better flexibility for styling)

Creating Content With Simple Grid

Before you create any content with a grid you need to plan it out first. This could be as simple as sketching it out on a piece of paper: it doesn’t have to be too detailed, just enough to know where you want to put the various content elements.

It’s then a matter of creating the rows and columns that correspond to your layout using the new shortcodes, sgrow and sgcol.

Shortcode : [sgrow pad=”” background=””]

An sgrow contains one or more sgcol. It has 2 attributes, pad and background. Pad determines whether gutters will be used and is a simple yes or no (default is yes). The only scenario where you don’t want to pad is if you want content, such as an image, to fill the entire width.

Background allows you to specify the url for an image that will be used as the background for the row. In the examples below you’ll find see how to use this attribute for overlaying text on an image.

Shortcode : [sgcol span=”” margin=””]

The sgcol defines the column and can have 2 attributes: span and margin.

Span is used to describe how wide the column will be and is expressed as a fraction. For example, span=”1-2″ equates to half the columns (6 columns), span=”3-4″ is three-quarters of the columns (9 columns).

Margin allows content to start at a particular column. For example, margin=”1-4″ starts the content in the sgcol at column 4.

Let’s step through some examples so you can see Simple Grid in action.

Grid Content Examples

Full-width Text

The simplest example is text that takes up the full width.

Mock-up

Mark-up

1
2
3
4
5

[sgrow pad="yes"]

[sgcol span="1-1"] text [/sgcol]

[/sgrow]

Result

Sidebars

Mock-up

Mark-up

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!-- right-hand sidebar -->

[sgrow pad="yes"]

[sgcol span="2-3"] text [/sgcol]

[sgcol span="1-3"] <img> [/sgcol]

[/sgrow]

<!-- left-han sidebar -->

[sgrow pad="yes"]

[sgcol span="1-4"] quote [/sgcol]

[sgcol span="3-4"] text [/sgcol]

[/sgrow]

<!-- even split -->

[sgrow pad="yes"]

[sgcol span="1-2"] <img> [/sgcol]

[sgcol span="1-2"] text [/sgcol]

[/sgrow]

Result

1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!

Subscribe

Sidebars are really handy for quotes and notes especially when easily distinguished

Changing the span, automatically alters the size of the image. Here’s the example where the text and the image span half (“1-2”) the area:

Image Grids

Using an image width of 100% ensures that images always fill the space available to them (obviously if the image is smaller than the width it will pixelate).

Mock-up

Mark-up

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!-- 2 image grid -->

[sgrow pad="yes"]

[sgcol span="1-2"] <img> [/sgcol]

[sgcol span="1-2"] <img> [/sgcol]

[/sgrow]

<!-- 4 image grid -->

[sgrow pad="yes"]

[sgcol span="1-4"] <img> [/sgcol]

[sgcol span="1-4"] <img> [/sgcol]

[sgcol span="1-4"] <img> [/sgcol]

[sgcol span="1-4"] <img> [/sgcol]

[/sgrow]

Result

To include more images in the grid, simply add more images and change the span – no need to specify widths. For 4 images use “1-4”, for 6 images use “1-6”.

Here’s the 4 image grid:

Large Image With Side Caption

Mock-up

Mark-up

1
2
3
4
5
6
7
8
9

[sgrow pad="yes"]

[sgcol span="1-1"]

<caption><img class="large" src="http://www.test.dev/wp-content/uploads/2013/03/man-of-steel1.jpg" alt="Man Of Steel" width="940" height="1394" />Does being the "nice guy" of superheroes make Superman the most boring?<caption>

[/sgcol]

[/sgrow]

Note that the image has had the “large” class added to it. This is a custom class that sets the image width to 75%, allowing space for the caption.

Result

Content With A Margin

Mock-up

Mark-up

1
2
3
4
5

[sgrow pad="yes"]

[sgcol span="1-2" margin="1-4"] text [/sgcol]

[/sgrow]

Result

Row With A Background Image

Mock-up

Mark-up

1
2
3
4
5

[sgrow pad="yes" background="full url"]

[sgcol span="1-2" margin="1-2"] text [/sgcol]

[/sgrow]

 Results

How Simple Grid Responds

Simple Grid responds well to screen size changes with minimal use of media queries.

However, you should always test for your theme and your preferences, adjusting the media queries as appropriate.

A Quick Word About…

Themes

Whilst this technique will generally work with any theme, a theme that doesn’t use sidebars – that is gives content the full-width or close to it, is going to work best.

For the examples I’ve use the recently released Eighties theme.

The other option, especially for established sites, is to use a specific template for content that you are going to layout using grids. The easiest way to achieve this would be to create a custom post type, for example story and then by creating a single-{name}.php (i.e. single-story.php) you can let the WordPress template hierarchy do all the hard work.

Whitespace

Whitespace in your WordPress posts can be a real pain. In these examples, I’ve spaced out the mark-up for clarity but often WordPress will insert extra <br> and <p> tags which will impact on your layout.

If you find that you are having whitespace issues then try removing linebreaks from around the shortcodes.

The CSS

In the plugin, you’ll see that I’ve extended the CSS a little for this article, in particular adding the styling for the large class applied to images and their captions.

Not all fractions or margins are present, so you may need to add more as you delve into the grid approach and you may also have your own special needs.

Workflow

The laying out of the content should be treated as an additional step to be performed after the content has been written, edited and approved.

The mark-up can make it a little tricky to edit afterwards and will greatly increase the likelihood of mistakes.

If you do go down the custom post type, then having separate fields for the raw content and the marked-up content would likely be invaluable.

Whet Your Appetite?

These are just some simple examples to whet your appetite and show you the power of laying out your content using grids.

The plugin itself is very simple and putting together great looking content is relatively straight forward, so long as you plan beforehand – which I cannot recommend enough.

Of course, a healthy dose of imagination and great content won’t hurt either.