How To Go Horizontal With Your WordPress Content

How To Go Horizontal With Your WordPress Content

It’s a curious thing but whilst WordPress themes largely continue to revolve around the tried and trusted methods of delivering content and a reading experience, it’s the app makers that are pushing the boundaries.

Horizontal scrolling as an approach is pretty much shunned by WordPress theme developers, and yet is being embraced as a storytelling technique particularly on tablets.

So, let’s take a leaf out of the tablet and look at how to bring horizontal scrolling content to your WordPress content.

Screenshots from a tablet with sample horizontal content
Horizontal is rarely used but highly effective format for storytelling

The Australian Broadcasting Corporation, the local public broadcaster, has always been an innovating force in the digital domain. The first organisation to launch an online catch-up TV service in Australia, it often experiments and ultimately drives adoption of new technologies and approaches.

Screenshot of the front page of a story from The Brief about beards
The Brief shows how effective horizontal scroll can be

Recently they have launched two new digital magazines, the app-based The Brief and the Newstand-based The White Paper (interestingly built by the corporation’s radio arm). Both repurpose existing content and meld the written word with audio, video, photographs and illustrations to deliver those stories to new audiences.

The Brief really caught my eye, and is the reason for this post, as it has taken the horizontal scrolling approach to delivering content.

Horizontal scrolling is certainly not unique but it is rare, especially in the WordPress world. With the odd exception, such as The Shelf, most implementations are simply horizontal copies of vertical themes with a heavy emphasis on parallax effects that often results in a real gimmicky feel.

The Brief, though, shows that horizontal doesn’t have to be gimmicky and although it requires more work than its vertical counterparts, the end result can be just as, if not more, effective especially for mobile devices.

So, in this article we are going to walk through how we might implement horizontally scrolling posts and hopefully inspire you to explore this underutilized approach further.

Making Content Horizontal

In this implementation of horizontal scrolling we are not going to simply float all the content left and replace the vertical scroll bar with a horizontal scroll bar. That’s not going to provide much of an experience.

Rather the content will be split into sections, pages if you will, which will be displayed one at a time, with simple previous and next navigation to navigate the sections.

This gives a far more satisfying experience and also means that each section can be styled quite separately. It doesn’t take long when reading The Brief to see that the horizontal approach really does benefit from a variety of formatting.

So, in our post we’ll use a simple [section] shortcode to wrap each section’s content. We’ll also use a [block] shortcode to enable manipulation of the section’s content. You’ll see how this works a little later.

The shortcodes are set up in a plugin, which also sets up a filter that will override the template to be used to display a post if it has a custom field with a key of horizontal.

I’ve included the template in the plugin folder and it is completely standalone just for ease of use but you may want to integrate it more closely with your site or even use a custom post type and simply take advantage of the WordPress template hierarchy.

And finally, styling. Rather than create a hatful of shortcodes, I’ve kept it at just two and then used CSS to enhance the article with specific styles which are stored in a custom field, post_style and then output in the template. It’s a quick and dirty approach but it does allow flexibility when playing with the solution.

Getting Horizontal With display:table-cell

As is nearly always the way, it’s rare that you have to start a project like this completely from scratch and a search for horizontal scrolling lead me to Ezequiel Bruni‘s article on horizontal scrolling and this solution is based heavily on that article.

The mark-up mimics a table: a containing div is set to display:table and table-layout:fixed; its child section elements are set to display:table-cell.

There’s no need to float the sections, this happens automatically and so long as the overflow is hidden on the main container div, it’s simply a matter of scrolling the sections in and out of view to achieve the navigation between sections. The SmoothScroll jQuery plugin is used for the scrolling.

There’s also javascript to handle resizing the content to the window size, handling the navigation buttons and adding the ids to the sections.

Walking Through The Test Content

I created 5 pages for the testing the plugin and playing with horizontal delivery. I’m going to walk through each one to explain what’s behind them. If you want to also have a play, then download and install the plugin, grab the wptest.io test content and either create your own or modify the test content.

A few things to remember:

  • add the style to a post_style custom field on the post
  • add a horizontal custom field with the value of true
  • sections are numbered and assigned ids automatically on the client-side, so make sure you know which section you are styling
  • swap my test image links for your test image links!

The Simple Text Page

Screenshot of a two columns of text on a tablet
Two columns of plain text

Two columns of text, with no frills at all. Note, the columns are not automatically generated but are created by using two block shortcodes and setting the widths for each.

Content

[section]
<h2>Section 1</h2>
[block]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/block]
[block]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/block]
[/section]

CSS Styles

{code}

#section1 .block {
width: 48%;
margin-right: 20px;
float: left;
}

{/code}

Full-screen Image With Text Overlay

Screenshot from a tablet with a full screen image of Captain America and sample text covering 30% of the page
A far bigger visual punch with a full-screen image and a text overlay

Full-screen images are easy to achieve by using the background-size: cover styling although depending on the size of the image you may have to play with the x and y settings to get the positioning you want. The text can either be set in a block or, as is the case here, the main content div itself can be styled.

Content

[section]<h2>Section 2</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/section]

CSS Styles

{code}

#section2 {
background-color: #000000;
color: #ffffff;
background: url(http://www.test.dev/wp-content/uploads/2013/03/captian-america.jpg) 50% 40%;
background-size: cover;
}

#section2 .section-content {
width: 30%;
color: #ffffff;
font-weight: bold;
}

{/code}

Half-Page Image Left

Screenshot with image of Spider-Man talking up the full left-hand half of the page
Background images are used to give the full half-page look to this page

This technique also uses background images but this time the size is set to 50% so that it takes up half the page. The content then uses a left margin of 50% to ensure that it sits in the whitespace.

Content

[section]<h2>Section 3</h2>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/section]

CSS Styles

{code}

#section3 {
background-color: #000000;
background: url(http://www.test.dev/wp-content/uploads/2013/03/spider-man.jpg) top left no-repeat;
background-size: 50%;
}

#section3 .section-content {
width: 46%;
margin-left: 50%;
padding: 20px;
}

{/code}

Half-Page Image Right

Screengrab of a page with an image of Iron Man taking up the right-hand half of the page
Same technique as the half-page left but image is fixed right

The opposite of the half-page image left, the background image size is still set to 50% but this time it’s positioned on the right, rather than the left. No need to set a margin for the content, just a width.

Content

[section]<h2>Section 4</h2>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/section]

CSS Styles

{code}

#section4 {
background-color: #000000;
background: url(http://www.test.dev/wp-content/uploads/2013/03/ironman-2.jpg) top right no-repeat;
background-size: 50%;
}

#section4 .section-content {
width: 46%;
padding: 20px;
}

{/code}

Full-Page Image, Opaque Text Overlay

Screengrab showing full-screen background image with a 75% opaque text box floating left
Using an opaque background for the text makes it stand out more than just plain text

Content

[section]<h2>Section 5</h2>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut tincidunt lorem, quis vestibulum lorem. Fusce volutpat eleifend eros id pharetra. Quisque eu nulla ligula. Mauris elementum urna eu consequat porta. Proin lacinia odio sed adipiscing semper. Ut sem mi, egestas vel placerat at, pulvinar quis tortor. Fusce sagittis massa vel dui rhoncus adipiscing.[/section]

CSS Styles

{code}

#section5 {
background-color: #000000;
background: url(http://www.test.dev/wp-content/uploads/2013/03/man-of-steel.jpg) 50% 50%;
background-size: cover;
}

#section5 .section-content {
background-color: #ffffff;
opacity: 0.70;
width: 40%;
margin-left: 20px;
padding: 20px;
}

{/code}

Remember! When you are setting up your content, add following custom fields:

  • horizontal (value: true)
  • post_style (value: CSS styling for the post)

Adding Horizontal To Your Mix

Horizontal certainly appears to have plenty of promise, especially on tablets. Content with plenty of images seems to work well, as does content where there’s plenty of potential variety in the sections.

As well as playing with this plugin and content, and if you are in Australia then I’d strongly encourage you download The Brief from the ABC and see how they make horizontal work: it’s impressive.

And, of course, if you turn these ideas and snippets into something more production-worthy then let everyone know in the comments below.

What do you think of horizontal scrolling content? Do you have or can you see a need?