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

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

It’s easy to get into the kind of mindset of “well of course you then click X to get to Y” which is why usability testing is really important. We have to remember that web sites will be used (hopefully) all the time by people who’ve never been there before and hence things should be logical and flow… and when this is not always so simple provide enough guidance to aid the user.

Sometimes folks can go too far… and in fact confuse the user. Take a look at the screenshot below and think about where you’d instinctively click to go to the next page. Bear in mind that it’s likely you’ve just scanned down the text (although I’ve blurred it here but please pretend that the text might be semi-important).

Too helpful?

I would think that most people would click the right facing arrow at the centre bottom of the page, bearing in mind that they’ve just scanned the text above. Yup, the one with the word continue written next to it. Either that or they also see the button at the top right and then may think “Oh, which one do I press and does it matter at all?”. Sadly you’ve got at best a 50% chance of going nowhere. In fact these arrows at the bas of the page are not buttons at all but simply ‘helpful’ instructions about the arrows that will appear at the top right corner of each page.

So what’s the lesson here? Testing is important… and it’s no good just testing something yourself as you know what and how a system is meant to work.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

Following getting the first batch through in the post I was disappointed to see that the ‘front’ had a black background instead of the white I was expecting. I mailed the Moo customer service suggesting that perhaps this was due to my use of transparent png images. They promptly replied stating that ‘yes’ they use a default black background colour. They also offered me a discount code enabling me to get a second order for free (inc P&P) and that once I’d placed it they’d check to make sure that they looked OK.

Once I’d replaced my order I did contact them giving my order number and got a reply back from their CS saying that all was good with my new cards… what great customer service!

Our new business cards

And front…

Our new business cards

I would definitely recommend Moo to anyone who needs this kind of printing to be done… just brilliant!

Oh… there’s a useful page here with a template image that can be used.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

This sofa is the design of Cristian Zuzunaga who I believe was a student at the royal college of art and I think is (or was) being sold by a Danish manufacturer Kvadrat.

I want: Very cool Pixel Sofa

I don’t know really why I like it so much but I can guarantee hours of fun playing the “You’re colourblind, what colour is this?” game.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

The Brighton Doughnut

The sculpture was a gift from the Mayor of Naples, officially called The Big Green Bagel. In this particluar photo you can just make out Badja’s face in the centre.

Schmap is an online resource of worldwide guides.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

.net Magazine

Apparently I’ve won a free .co.uk domain and hosting with Heart Internet. I presume this is for a year and I’ve no idea what the quality of their hosting is like but hey… free stuff is cool right?

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny