Todd Halfpenny

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

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.

Adv layout with no template messing

The page content actually consists of only the following content;

[widgets_on_pages id="featured_news"]
[widgets_on_pages id="also_in_the_news"]

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);

.featured_news {
width:650px;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
padding-bottom: 8px;
}
 
.also_in_the_news ul li {
float: left;
width:290px;
padding: 0 0 0 0
}
 
.also_in_the_news  {
margin: 5px 0px 10px 0;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
width:650px;
}
 
.also_in_the_news ul li:first-child {
float: left;
width:290px;
margin: 0 0px 0 0;
}
 
.widgets_on_page ul {
list-style: none;
}
 
.widgets_on_page h2.widgettitle  {
font-size:1.2em;
}
 
.widgets_on_page h2.post-title a  {
font-size:0.9em;
}
 
.featured_news h2.post-title a   {
font-size: 1.5em;
}
 
.widgets_on_page .entry-summary {
clear: both;
padding: 0px 0 0 0;
font-size: 0.8em;
line-height: 1.5em;
font-family: arial;
}
 
.widgets_on_page  {
font-size:0.9em;
}
 
.widgets_on_page .hentry  {
margin: 0 0 5px 0;
}
 
#content .widgets_on_page  p,
#content .widgets_on_page  ul,
#content .widgets_on_page  ol,
#content .widgets_on_page  dd,
#content .widgets_on_page  pre,
#content .widgets_on_page  hr {
margin-bottom:5px;
}
 
img.attachment-thumbnail {
float: left;
}
 
.also_in_the_news img.attachment-thumbnail {
display: none;
}
 
.featured_news .words {
margin: 0 0 0 20px;
clear: none;
float: left;
width: 440px;
}
 
li.widget li a {
font-family: arial;
text-decoration: none;
font-weight: bold;
font-size: 0.8em;
}
 
li.widget li ,li.widget li:first-child  {
margin-bottom: 0.8em;
}
 
li.widget li a:hover {
font-family: arial;
text-decoration: underline;
}

The demo page