- \n
- The Simple Text Page<\/a><\/li>\n
- Full-screen Image With Text Overlay<\/a><\/li>\n
- Half-Page Image Left<\/a><\/li>\n
- Half-Page Image Right<\/a><\/li>\n
- Full-Page Image, Opaque Text Overlay<\/a><\/li>\n<\/ul>\n<\/li>\n
- Adding Horizontal To Your Mix<\/a><\/li>\n<\/ul>\n
Horizontal Scrolling WordPress Content<\/h2>\n
So, let’s take a leaf out of the tablet and look at how to bring horizontal scrolling content to your WordPress content.<\/p>\n
![\"Screenshots](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/horizontal-featured-700x262.jpg\")
<\/a>Horizontal is rarely used but highly effective format for storytelling<\/figcaption><\/figure>\n The Australian Broadcasting Corporation, the local public broadcaster, has always been an innovating force in the digital domain. The first organisation to\u00a0launch an online catch-up TV service in Australia, it often experiments and ultimately drives adoption of new technologies and approaches.<\/p>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/the_brief.jpg\")
<\/a>The Brief shows how effective horizontal scroll can be<\/figcaption><\/figure>\n When they launched two new digital magazines, the app-based The Brief<\/em> and the Newstand-based The White Paper<\/em> (interestingly built by the corporation’s radio arm), both repurposed existing content and melded the written word with audio, video, photographs and illustrations to deliver those stories to new audiences.<\/p>\n
Editor’s note: we have removed links as the above publications are no longer available.<\/em><\/p>\n
The Brief really caught my eye, and is the reason for this post, as it has taken the horizontal scrolling approach to delivering content.<\/p>\n
Horizontal scrolling is certainly not unique but it is rare, especially in the WordPress world. With the odd exception,\u00a0most\u00a0implementations are simply horizontal copies of vertical themes with a heavy emphasis on parallax effects that often results in a real gimmicky feel.<\/p>\n
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.<\/p>\n
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.<\/p>\n
Making Content Horizontal<\/h2>\n
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.<\/p>\n
Rather the content will be split into sections<\/em>, pages if you will, which will be displayed one at a time, with simple previous and next navigation to navigate the sections.<\/p>\n
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.<\/p>\n
So, in our post we’ll use a simple [section]<\/em> shortcode to wrap each section’s content. We’ll also use a [block]<\/em> shortcode to enable manipulation of the section’s content. You’ll see how this works a little later.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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<\/em> and then output in the template. It’s a quick and dirty approach but it does allow\u00a0flexibility when playing with the solution.<\/p>\n
Getting Horizontal With display:table-cell<\/h2>\n
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\u00a0Ezequiel Bruni<\/a>‘s article on horizontal scrolling<\/a>\u00a0and this solution is based heavily on that article.<\/p>\n
The mark-up mimics a table: a containing div<\/em> is set to display:table<\/em> and table-layout:fixed<\/em>; its child section<\/em> elements are set to display:table-cell<\/em>.<\/p>\n
There’s no need to float the sections, this happens automatically and so long as the overflow<\/em> is hidden<\/em> on the main container div<\/em>, it’s simply a matter of scrolling the sections in and out of view to achieve the navigation between sections. The SmoothScroll jQuery plugin<\/a> is used for the scrolling.<\/p>\n
There’s also javascript to handle resizing the content to the window size, handling the navigation buttons and adding the ids to the sections.<\/p>\n
Walking Through The Test Content<\/h2>\n
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.<\/p>\n
A few things to remember:<\/p>\n
- \n
- add the style to a post_style<\/em> custom field on the post<\/li>\n
- add a horizontal<\/em> custom field with the value of true<\/li>\n
- sections are numbered and assigned id<\/em>s automatically on the client-side, so make sure you know which section you are styling<\/li>\n
- swap my test image links for your test image links!<\/li>\n<\/ul>\n
The Simple Text Page<\/h3>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/Screen-Shot-2014-06-25-at-5.09.43-PM-700x542.png\")
<\/a>Two columns of plain text<\/figcaption><\/figure>\n 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.<\/p>\n
Content<\/h4>\n
[section]\r\n<h2>Section 1<\/h2>\r\n[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]<\/pre>\n
[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]\r\n[\/section]<\/pre>\n
CSS Styles<\/h4>\n
\r\n#section1 .block {\r\nwidth: 48%;\r\nmargin-right: 20px;\r\nfloat: left;\r\n}<\/pre>\nFull-screen Image With Text Overlay<\/h3>\n
![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/section-2.png\")
A far bigger visual punch with a full-screen image and a text overlay<\/figcaption><\/figure>\n 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.<\/p>\n
Content<\/h4>\n
[section]<h2>Section 2<\/h2>\r\nLorem 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]<\/pre>\n
CSS Styles<\/h4>\n
\r\n#section2 {\r\nbackground-color: #000000;\r\ncolor: #ffffff;\r\nbackground: url(http:\/\/www.test.dev\/wp-content\/uploads\/2013\/03\/captian-america.jpg) 50% 40%;\r\nbackground-size: cover;\r\n}\r\n\r\n#section2 .section-content {\r\nwidth: 30%;\r\ncolor: #ffffff;\r\nfont-weight: bold;\r\n}<\/pre>\nHalf-Page Image Left<\/h3>\n
\n\n![\"Screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/section-3.png\")
Background images are used to give the full half-page look to this page<\/figcaption><\/figure>\n<\/div>\n<\/div>\n 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.<\/p>\n
Content<\/h4>\n
[section]<h2>Section 3<\/h2>\r\n 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]<\/pre>\n
CSS Styles<\/h4>\n
\r\n#section3 {\r\nbackground-color: #000000;\r\nbackground: url(http:\/\/www.test.dev\/wp-content\/uploads\/2013\/03\/spider-man.jpg) top left no-repeat;\r\nbackground-size: 50%;\r\n}\r\n\r\n#section3 .section-content {\r\nwidth: 46%;\r\nmargin-left: 50%;\r\npadding: 20px;\r\n}<\/pre>\nHalf-Page Image Right<\/h3>\n
![\"Screengrab](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/Screen-Shot-2014-06-25-at-5.10.08-PM-700x542.png\")
<\/a>Same technique as the half-page left but image is fixed right<\/figcaption><\/figure>\n 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.<\/p>\n
Content<\/h4>\n
[section]<h2>Section 4<\/h2>\r\n 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]<\/pre>\n
CSS Styles<\/h4>\n
\r\n#section4 {\r\nbackground-color: #000000;\r\nbackground: url(http:\/\/www.test.dev\/wp-content\/uploads\/2013\/03\/ironman-2.jpg) top right no-repeat;\r\nbackground-size: 50%;\r\n}\r\n\r\n#section4 .section-content {\r\nwidth: 46%;\r\npadding: 20px;\r\n}<\/pre>\nFull-Page Image, Opaque Text Overlay<\/h3>\n
![\"Screengrab](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/section-5.png\")
Using an opaque background for the text makes it stand out more than just plain text<\/figcaption><\/figure>\n Content<\/h4>\n
[section]<h2>Section 5<\/h2>\r\n 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]<\/pre>\n
CSS Styles<\/h4>\n
\r\n#section5 {\r\nbackground-color: #000000;\r\nbackground: url(http:\/\/www.test.dev\/wp-content\/uploads\/2013\/03\/man-of-steel.jpg) 50% 50%;\r\nbackground-size: cover;\r\n}\r\n\r\n#section5 .section-content {\r\nbackground-color: #ffffff;\r\nopacity: 0.70;\r\nwidth: 40%;\r\nmargin-left: 20px;\r\npadding: 20px;\r\n}<\/pre>\nRemember!<\/strong>\u00a0When you are setting up your content, add following custom fields:<\/p>\n
- \n
- horizontal<\/em> (value: true)<\/li>\n
- post_style<\/em> (value: CSS styling for the post)<\/li>\n<\/ul>\n
Adding Horizontal To Your Mix<\/h2>\n
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.<\/p>\n
As well as playing with this plugin and content, if you turn these ideas and snippets into something more production-worthy then let everyone know in the comments below.<\/p>\n
Editor\u2019s Note:<\/strong><\/em> This post has been updated for accuracy and relevancy. [Originally Published: Jun 2014 \/ Revised: April 2022]<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Horizontal scrolling is pretty much shunned by WordPress theme developers but is being embraced as a story telling technique particularly on tablets. So, look at how to bring horizontal scrolling content to your WordPress content.<\/p>\n","protected":false},"author":262394,"featured_media":207898,"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":[9900],"tutorials_categories":[],"class_list":["post-130040","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/130040","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=130040"}],"version-history":[{"count":12,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/130040\/revisions"}],"predecessor-version":[{"id":168897,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/130040\/revisions\/168897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/207898"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=130040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=130040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=130040"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=130040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- post_style<\/em> (value: CSS styling for the post)<\/li>\n<\/ul>\n
- add a horizontal<\/em> custom field with the value of true<\/li>\n
- Full-screen Image With Text Overlay<\/a><\/li>\n