{"id":129129,"date":"2014-06-12T08:30:13","date_gmt":"2014-06-12T12:30:13","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=129129"},"modified":"2017-10-24T00:44:45","modified_gmt":"2017-10-24T00:44:45","slug":"the-secret-to-creating-great-looking-wordpress-content","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/the-secret-to-creating-great-looking-wordpress-content\/","title":{"rendered":"The Secret To Creating Great Looking WordPress Content"},"content":{"rendered":"

Keeping readers’ attention is everything and the longer the content, the harder it is.<\/p>\n

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.<\/p>\n

Bringing these techniques to your own WordPress site is not difficult, once\u00a0you know the secret to\u00a0creating great looking content.<\/p>\n

<\/p>\n

\"Composite
Don’t be fooled by the name – grids bring immense power to content layout<\/figcaption><\/figure>\n\n

Kicked-off spectacularly by award-winning New York Times article Snowfall<\/a>, longer form storytelling\u00a0has proved to be more than just a bandwagon.<\/p>\n

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

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.<\/p>\n

You need the power and simplicity of a grid.<\/p>\n

The Power Of Grids<\/h2>\n

The best approach is nearly always the simplest. Simplest to implement, simplest to understand, simplest to use.<\/p>\n

Grids fit this criteria and have been used for page layout both offline and online for many, many years.<\/p>\n

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.<\/p>\n

Above all, though, grids can provide incredible flexibility.<\/p>\n

There are many existing frameworks out there, from Bootstrap to Zurb Foundation that contain grids\u00a0and 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.<\/p>\n

For this article, I simply wanted a grid and nothing else and so I chose Simple Grid<\/a>\u00a0by Dallas Bass.<\/p>\n

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\u00a06, 4, 3 and 2 it provides a wide range of layout choices.<\/p>\n

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.<\/p>\n\n

Adding Simple Grid To WordPress<\/h2>\n

I’ve created a plugin to add Simple Grid to your WordPress site. Download it<\/a> and install it as you would any plugin.<\/p>\n

The plugin performs 3 tasks:<\/p>\n

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

    Creating Content With Simple Grid<\/h2>\n
    \"A<\/a>
    Download and print this template<\/figcaption><\/figure>\n

    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.<\/p>\n

    It’s then a matter of creating the rows and columns that correspond to your layout using the new shortcodes, sgrow<\/em> and sgcol<\/em>.<\/p>\n

    Shortcode : [sgrow pad=”” background=””]<\/h3>\n

    An sgrow<\/em> contains one or more sgcol<\/em>. It has 2\u00a0attributes, pad<\/em> and background<\/em>. Pad determines whether gutters will be used\u00a0and is a simple\u00a0yes<\/em> or no<\/em> (default is yes). The only scenario where you don’t want to pad is if you want content, such as an image, to fill\u00a0the entire width.<\/p>\n

    Background allows you to specify the url for an image that will be used as the background for the row. In the\u00a0examples below you’ll find see how to use this attribute for overlaying text on an image.<\/p>\n

    Shortcode : [sgcol span=”” margin=””]<\/h3>\n

    The sgcol<\/em> defines the column and can have 2 attributes: span<\/em> and margin<\/em>.<\/p>\n

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

    Margin allows content to start at a particular column. For example, margin=”1-4″<\/em> starts the content in the sgcol<\/em> at column 4.<\/p>\n

    Let’s step through some\u00a0examples so you can\u00a0see Simple Grid in action.<\/p>\n\n

    Grid Content Examples<\/h2>\n

    Full-width\u00a0Text<\/h3>\n

    The simplest example is text that takes up the full width.<\/p>\n

    Mock-up<\/h4>\n
    \"Screen
    This text element will take the whole 12 columns<\/figcaption><\/figure>\n

    Mark-up<\/h4>\n

    <\/p>\n

    [sgrow pad=\"yes\"]<\/p>\n

    [sgcol span=\"1-1\"] text\u00a0[\/sgcol]<\/p>\n

    [\/sgrow]<\/p>\n

    <\/code><\/p>\n

    Result<\/h4>\n
    \"Screengrab
    The simplest option is text that spans the full 12 columns<\/figcaption><\/figure>\n

    Sidebars<\/h3>\n

    Mock-up<\/h4>\n
    \"Mockup
    Text element spanning 8 columns (two-thirds) with a 4 column (one-third) sidebar<\/figcaption><\/figure>\n
    \"Mockup
    Side element spanning 3 columns (one quarter) and a main element spanning 9 columns (three quarters)<\/figcaption><\/figure>\n

    Mark-up<\/h4>\n

    <\/p>\n

    <!-- right-hand sidebar --><\/p>\n

    [sgrow pad=\"yes\"]<\/p>\n

    [sgcol span=\"2-3\"] text [\/sgcol]<\/p>\n

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

    [\/sgrow]<\/p>\n

    <!-- left-han sidebar --><\/p>\n

    [sgrow pad=\"yes\"]<\/p>\n

    [sgcol span=\"1-4\"] quote\u00a0[\/sgcol]<\/p>\n

    [sgcol span=\"3-4\"] text\u00a0[\/sgcol]<\/p>\n

    [\/sgrow]<\/p>\n

    <!-- even split --><\/p>\n

    [sgrow pad=\"yes\"]<\/p>\n

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

    [sgcol span=\"1-2\"]\u00a0text\u00a0[\/sgcol]<\/p>\n

    [\/sgrow]<\/p>\n

    <\/code><\/p>\n

    Result<\/h4>\n
    \"Screengrab
    Create a right-hand sidebar that is one third of the screen width<\/figcaption><\/figure>\n

    \"Screengrab<\/p>\n

    Sidebars are really handy for quotes and notes especially when easily distinguished<\/p>\n

    Changing the span, automatically alters the\u00a0size of the image. Here’s the\u00a0example where the text and the image span half (“1-2”) the area:<\/p>\n

    \"Screengrab
    Simply change the span to change the size of the image<\/figcaption><\/figure>\n

    Image Grids<\/h3>\n

    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).<\/p>\n

    Mock-up<\/h4>\n
    \"Mockup
    Image grids are easy to create for 2, 3, 4 or 6 images<\/figcaption><\/figure>\n

    Mark-up<\/h4>\n

    <\/p>\n

    <!-- 2 image grid --><\/p>\n

    [sgrow pad=\"yes\"]<\/p>\n

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

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

    [\/sgrow]<\/p>\n

    <!-- 4 image grid --><\/p>\n

    [sgrow pad=\"yes\"]<\/p>\n

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

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

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

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

    [\/sgrow]<\/p>\n

    <\/code><\/p>\n

    Result<\/h4>\n
    \"Two
    Two images, side-by-side, width determined by column span.<\/figcaption><\/figure>\n

    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”.<\/p>\n

    Here’s the\u00a04 image grid:<\/p>\n

    \"4
    The image width is constrained by the column giving consistent widths<\/figcaption><\/figure>\n

    Large Image With Side Caption<\/h3>\n

    Mock-up<\/h4>\n
    \"An
    It’s easy to customize your own layouts based on the grid<\/figcaption><\/figure>\n

    Mark-up<\/h4>\n

    <\/p>\n

    [sgrow pad=\"yes\"]<\/p>\n

    [sgcol span=\"1-1\"]<\/p>\n

    <caption><img class=\"large\" src=\"https:\/\/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><\/p>\n

    [\/sgcol]<\/p>\n

    [\/sgrow]<\/p>\n

    <\/code><\/p>\n

    Note that the image has had the “large” class added to it. This is a\u00a0custom\u00a0class that sets the image width to 75%, allowing space for the caption.<\/p>\n

    Result<\/h4>\n
    \"Large
    Moving captions around helps introduce white-space and break up the content<\/figcaption><\/figure>\n

    Content With A Margin<\/h3>\n

    Mock-up<\/h4>\n
    \"Mockup
    To center elements that aren’t full-width use a spacer margin<\/figcaption><\/figure>\n

    Mark-up<\/h4>\n

    <\/p>\n

    [sgrow pad=\"yes\"]<\/p>\n

    [sgcol span=\"1-2\" margin=\"1-4\"] text\u00a0[\/sgcol]<\/p>\n

    [\/sgrow]<\/p>\n

    <\/code><\/p>\n

    Result<\/h3>\n
    \"Centered
    A centered narrower column is achieved by setting a margin<\/figcaption><\/figure>\n

    Row With A Background Image<\/h3>\n

    Mock-up<\/h4>\n
    \"Mockup
    Add a background then “overlay” text for visual impact<\/figcaption><\/figure>\n

    Mark-up<\/h4>\n

    <\/p>\n

    [sgrow pad=\"yes\" background=\"full url\"]<\/p>\n

    [sgcol span=\"1-2\" margin=\"1-2\"] text\u00a0[\/sgcol]<\/p>\n

    [\/sgrow]<\/p>\n

    <\/code><\/p>\n

    \u00a0Results<\/h4>\n
    \"Screengrab
    Adding a background image can create a visual impact<\/figcaption><\/figure>\n

    How Simple Grid Responds<\/h2>\n

    Simple Grid responds well to screen size changes with minimal use of media queries.<\/p>\n

    \"Screengrab
    SImple Grid with it’s almost exclusive use of percentage responds well to changing screen sizes<\/figcaption><\/figure>\n

    However, you should always test for your theme and your preferences, adjusting the media queries as appropriate.<\/p>\n

    A Quick Word About…<\/h2>\n

    Themes<\/h3>\n

    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.<\/p>\n

    For the examples I’ve use the recently released Eighties theme<\/a>.<\/p>\n

    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.<\/p>\n

    Whitespace<\/h3>\n

    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.<\/p>\n

    If you find that you are having whitespace issues then try removing linebreaks from around the shortcodes.<\/p>\n

    The\u00a0CSS<\/h3>\n

    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.<\/p>\n

    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.<\/p>\n

    Workflow<\/h3>\n

    The laying out of the content should be treated as an additional step to be performed after the content has been\u00a0written, edited and approved.<\/p>\n

    The mark-up can make it a little tricky to edit afterwards and will greatly increase the likelihood of mistakes.<\/p>\n

    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.<\/p>\n

    Whet Your Appetite?<\/h2>\n

    These are just some simple examples to whet your appetite and show you the power of laying out your content using grids.<\/p>\n

    The plugin itself is very simple and\u00a0putting together great looking content is relatively straight forward, so long as you plan beforehand – which I cannot recommend enough.<\/p>\n

    Of course, a healthy dose of imagination and great content won’t hurt either.<\/p>\n

     <\/p>\n

     <\/p>\n

     <\/p>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    Creating great looking WordPress content is not difficult, once you know the secret. Hint: it’s got everything to do with grids. <\/p>\n","protected":false},"author":262394,"featured_media":129939,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[38,1044,9901],"tutorials_categories":[],"class_list":["post-129129","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-design","tag-css","tag-grids"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/129129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/262394"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=129129"}],"version-history":[{"count":1,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/129129\/revisions"}],"predecessor-version":[{"id":168888,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/129129\/revisions\/168888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/129939"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=129129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=129129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=129129"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=129129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}