Hello everyone, can I begin by saying a huge thank you for visiting my new website and blog.
It’s been a LONG time coming but it’s finally here! This post briefly documents the building process and styling considerations that I devised as I was working through it. My main aims were to make a website which is very simple to update & to give myself a challenge to improve my WordPress skills.

Planning

I set myself a list of aims and began searching for a WordPress theme that was simple in structure and had much of the functionality that I required. It didn’t take long until I stumbled upon Graph Paper Press. Their themes are not bloated with reams of unwanted code and are a wonderful starting point for anyone who isn’t mad on PHP and wants to build on a theme that really works. I chose to use their ‘F8-Lite‘ theme because I was very keen on adopting the studio style grid based layout.

Structure & Layout

Home Page

The main task here was to incorporate a large portfolio slideshow element at the top of the page. I built on the themes standard slider to add my own branded orange circle to house the post title for each of the five most recent portfolio works. The home page features the latest six portfolio works in a grid format and below this, the latest three blog posts. These are styled differently to reduce ambiguity between portfolio ad blog posts.

Archives


The archive template is an extension of what can already be seen on the home page. I added a custom archive navigation bar at the top of the page so users can filter between categories and their sub-categories. Blog posts, again like on the home page, are displayed in a more text driven format. The excerpts for blog posts is slightly longer to enable users to gain a better understanding of what the post is about, before proceeding.

Portfolio Posts

This is how each portfolio post is laid out and this is the default post template for the website. Each post shows a featured image at the very top and has elements of the grid layout from the home & archive pages to give a sense of coherency. Each post has a short description of the project in hand and contains two thumbnails of images which show the project in further detail. I have incorporated LightBox here to enable a seamless & clean animation to enlarge the images when a user clicks on them. I also used some subtle CSS3 transitions to make the rollover effect feel that much more special.

Blog Posts

You are looking at a blog post right now, and as you can see I have created a different post template for these which serves the blogging format in more conventional way. The side bar provides much needed links to social networks and recent posts elsewhere on the website.

Well that’s the new website in a nutshell! I’d love to receive any feedback you might have about it and I do hope that you continue to check out my blog and see what I have been creating in my portfolio.