The main idea behind Viewport was to present the user with a viewport showcasing the bloggers posts in a graphic form. This of course takes no small amount of inspiration from Derek Punsalan’s ‘The Unstandard’ theme which gathered a huge following. Viewport aims to further extend that by using imagery to complement the post content. Of course it’s also good for photographers who want a slick way to show their work.

As with all new sites or themes, it’s best to start off with some sketches of ideas. This one was fairly straight forward, as there aren’t any fancy graphics or complex containers. All we’re doing is focusing on the image related to the post.

That’s all there is to the front page. Simple header displaying pages, subscribe link and search box, a viewing area containing the post title and excerpt placed over the post image, and the navigation arrows.

The home page:

The next step was to investigate which technology could power the viewing area. There are a few Javascript div sliders out there, but my preferred one is Coda Slider by Niall Doherty. Coda Slider allows for left and right navigation and cross-linking if needed whilst providing seamless transitions.

Without going into detail on the workings of Code Slider, it requires that a series of panels are built up – to do that we use the Wordpress Loop.

Firstly the panel is constructed and given the post ID and title. Next the image is found from the post meta data, and displayed. Finally positioned on top of the image are 2 divs, ‘post-title’ and ‘entry’. As their names suggest, these contain the title and link to the post, and the excerpt of the post respectively.

The single post page:

The idea behind the single post page was to retain the post image but in a small more useable form, then to display the content below that. To do that we use 300px for the single post image height.

The rest of the page is a fairly straight-forward layout, with clear controls above the post and the sidebar to the right.

The archives/category page:

The archives and category page is something a little different. We retain the viewing window, but lay the posts out in a 3×2 fashion, 6 per page. Users can then skim through quickly, whilst having the benefit of the posts still being represented by their images.

And that is Viewport in a nutshell. A clean-looking, function theme, designed to spark interest in content by using related imagery. More details and the download can be found at paulicio.us.

Curabitur facilisis consectetuer enim. Pellentesque leo. Nunc enim. Duis volutpat risus in ligula. Suspendisse potenti. Vestibulum posuere bibendum sapien. Cras suscipit justo et ipsum. Curabitur hendrerit vehicula orci. Sed quam. In hac habitasse platea dictumst. Maecenas rhoncus, ante in facilisis auctor, tellus justo luctus orci, nec porta odio dui at neque. Proin libero. Vivamus erat sapien, consectetuer et, tincidunt quis, semper ac, leo.