Advanced WordPress Page Layout Experiment

Styling WordPress page and post layouts can be daunting for the novice… especially if you don’t want to dirty your hands with PHP and the like. I wanted to experiment with what was possible to do using only the default WordPress theme 2010 and plugins alone (OK, some CSS was needed).

So I set myself the challenge of mirroring something which is a classic layout across news sites and ended up with the perfect example from the BBC News web pages (please someone let me know if I’m NOT allowed to publish the below pic).

Extract of the BBC News site, the desired layout
Extract of the BBC News site, the desired layout

The desired layout is essentially a main news article with a supporting image followed by a couple of secondary articles and then a listing of tertiary articles.

My initial ideas came from using the Widgets on Pages WorPress plugin that I had developed which allows the addition of sidebar areas to be inserted inline in pages and posts. Using this plugin I was able to essentially define multiple areas in a standard page (using a standard template) which could then have independant content defined and (with some tweaks to the live version of the Widget on Pages plugin) could be styled each in it’s own way. This, by itself, was limited though as I really needed some mechanism to pull in the desired stories… I needed something to support it.

Then at the recent WordCampUK 2010 I was lucky enough to be attending Michael Kimb Jones‘ presentation on WOW Plugins when the Query Posts plugin (by the incredible Justin Tadlock) was brought to my attention. The plugin provides a widget can be set up to be populated with the result of a query against the posts in the database. Kimb actually mentioned that he had thought of producing an entire WordPress site just through widgets… a very similar one to the train of investigation I was pursuing. This Query Posts plugin was the answer.

I put this plugin to work (with some slight mods to now use WordPress featured image feature) alongside my own Widgets on Pages plugin and some additional CSS to the 2010 theme to come up with a layout that is indeed on the way to what I was after.

Screenshot of layout
Adv layout with no template messing

The page content actually consists of only the following content;

To support this I have 2 sidebar areas defined (featured_news and also_in_the_news) which each have Query Posts widgets in which pull in the news feed with each one offset to allow idea of one single feed.

The CSS used to stylize these is as follows (yes I know it’s not clean… this is an experiment remember);

The demo page

6 Replies to “Advanced WordPress Page Layout Experiment”

  1. Hey Luca,

    That’s an ace plugin… good work!
    Just one question, does the viewer of the site need javascript enabled for the layout to work or is it only needed to create the page in the 1st instance?

    1. Thanks!!!
      You need javascript only to create the page. The layout work only with html/css.
      If you create your own layout (via register_layout() function), you can add all the code you want in the layout template.

  2. Todd excellent plugin. Thanks.

    The way you have described how to place two sidebars side by side is also neat.

    The demo page does not seem to work. Is it fixable easily. If so please do that.

    Thanks once again.

    1. Hey Pali,

      Ah right, so it is… I think this is down to me not supplying featured images for my recent posts. If I get some time this weekend I’ll take a look.

      Ta,
      Todd

Leave a Reply

Your email address will not be published. Required fields are marked *