The Secret To Creating Great Looking WordPress Content

The Secret To Creating Great Looking WordPress Content

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.

Composite image showing 3 screenshots of content elements created using a grid
Don’t be fooled by the name – grids bring immense power to content layout

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

A 12 column grid template
Download and print this template

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

Screen element spanning 12 columns on a grid
This text element will take the whole 12 columns

Mark-up

1
2
3
4
5
[sgrow pad="yes"]

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

[/sgrow]

Result

Screengrab of loreum ipsum text that spans the entire width
The simplest option is text that spans the full 12 columns

Sidebars

Mock-up

Mockup showing an 8 column element and a 4 column element
Text element spanning 8 columns (two-thirds) with a 4 column (one-third) sidebar
Mockup of left sidebar of 3 columns and main element of 9 columns
Side element spanning 3 columns (one quarter) and a main element spanning 9 columns (three quarters)

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

Screengrab showing maint text occupying two-thirds and the right-sidebar occupying one-third of the available real estate
Create a right-hand sidebar that is one third of the screen width

Screengrab showing quote formatted as red text in a left-hand sidebar

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:

Screengrab showing two equal columns with an image in one
Simply change the span to change the size of the image

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

Mockup of a 2 and 4 image grid
Image grids are easy to create for 2, 3, 4 or 6 images

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

Two images taking up half the available space each.
Two images, side-by-side, width determined by column span.

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:

4 images equally spaced in a grid
The image width is constrained by the column giving consistent widths

Large Image With Side Caption

Mock-up

An image with a width of 75% leaving 25% for the caption
It’s easy to customize your own layouts based on the grid

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

Large image with caption aligned right in its own column
Moving captions around helps introduce white-space and break up the content

Content With A Margin

Mock-up

Mockup of half-width content being centered
To center elements that aren’t full-width use a spacer margin

Mark-up

1
2
3
4
5
[sgrow pad="yes"]

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

[/sgrow]

Result

Centered text that is 6 columns wide
A centered narrower column is achieved by setting a margin

Row With A Background Image

Mock-up

Mockup of a full-width background image and a half-width text element
Add a background then “overlay” text for visual impact

Mark-up

1
2
3
4
5
[sgrow pad="yes" background="full url"]

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

[/sgrow]

 Results

Screengrab with an image overlaid to the right-hand side with text
Adding a background image can create a visual impact

How Simple Grid Responds

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

Screengrab of thin screen
SImple Grid with it’s almost exclusive use of percentage responds well to changing screen sizes

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.