The making of the Viewport theme:
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.
[...] information about the theme can be found at at Smashing Magazine, and here on the Live [...]
This looks like a pretty slick theme … I’m going to suggest it for a photographer I know.
I’ve been waiting for a free javascript driven WP theme. Thanks!
The only suggestion I would make is to make the slider window itself small enough vertically to not have to be scrolled at 1024×768.
Good work though! Love it!
Fantastic work. As well as a great inspiration.
Amazing solution for portfolio. Thanks!
Awesome THEME!!!! It would make a great portfolio theme. If i had to make any changes it would be instead of going to the body post. I would have a light box pop up with info, but. Thats only for portfolios.
Gr8 Solution for Portfolio as well as photographer sites..
Wow this is really, really, really sweet! Awesome theme!!
Very well done. Hat off to you sir!
Very nice theme, congratulations from Hungary!
I’m going to put it together for my Dad’s remodeling site. It’s all about showcasing work – and more than photographer’s have Works!
nice!
[...] Bennett, in creating Viewport this web designer not only broke new web design territory with an innovative theme design, but used [...]
[...] information about the theme can be found here at Smashing Magazine, and here on the Live [...]
great design and nice work, some truly original ideas
[...] THEME INFO | THEME DEMO [...]
I think this is the best WordPress theme I’ve ever seen. When I discovered it I was really amazed, and every time I come back to see it I just think… Awesome!
Coool theme.
Hello. And Bye.
[...] information about the theme can be found here at Smashing Magazine, and here on the Live [...]
Looks like a great theme!
[...] information about the theme can be found here at Smashing Magazine, and here on the Live [...]
[...] Không biết mình đã phải reset cái blog này bao nhiêu lần. Chủ yếu là vì vừa rất muốn viết mà lại không có thời gian để viết thế nên mỗi lần thấy cái theme nào đẹp đẹp lại hứng lên, cài tới cài lui rồi vứt đấy. Hôm nay cũng thế, đang surf SmashingMagazine thì tìm được theme Viewport này. Rất ổn, và hợp với ý định Tumblr hoá blog WordPress bên này của mình. The making of the Viewport theme [...]