Time for change

The baby has yet to arrive so I’ve had a little bit of free time to work on the new look for Up Your Ego - this blog. I’ve designed to create my own custom theme from scratch - it’s the only way I’m going to get exactly what I’m looking for.

That and it will give me a chance to brush up on some long since rusty design and developing skills - things I used to do on a daily basis before making the leap from design to journalism.

So I’ve create the look - I’ve been playing with Photoshop and I’ve create a couple of PSD files that show what I want the homepage of the blog and an article page to look like.

Here is the main homepage of the blog - the first page you’ll come to when you type upyourego.com into a browser or follow a link from someone elses sidebar.

As I explained in the last post - big orange box at the top will be a promo space - somewhere I can show off other things I’m doing or posts I want to make sticky.

Underneath you have the most recent post in a promo space on the left and on the right hand side the most popular post (based on the popularity plugin for wordpress).

Underneath that you have the bulk of the page - two or three stories (or at least the first few paras of the story) on the left hand side and on the right - at the top links to the next five stories (just headline and date) and underneath that the usual sidebar stuff like tags and links.

I haven’t included space for ads yet on this page but Google ads are making me so little at the moment that it wasn’t worth the stress trying to fit them in - they’re not exactly asthetically pleasing.

Now the actual story page. This is what you go to when you click on one of the homepage headlines, get to a story directly from Digg, Google or the like - or even through some link love in somebody elses blog feature.

One thing I’ve always looked for in a blog template is that the story page is different to the homepage - not so fundamentally different the whole look and feel is changed but enough that you know you’re somewhere else on the site.

I also like to have the right hand menus of story pages used to show content related to that story - this template does that at the moment but I think it could be improved on.

So I’ve kept the green menu bar, logo and search box as standard navigation features but I’ve removed the big orange promo space, the second green bar and the two promo spaces underneath that.

I’ve kept the basic layout structure as well - you have the full blog post on the left hand side, the Story Tags and share this links next to the story and then on the right you have links and information related to this particular blog post.

The example shows related links, related articles etc… but it could also include Flickr images, video clips or even snippets of information from Wikipedia.

The Comment box is a darker colour with the form on the right and the comments on the left (similar to the one used for the template I’m currently using).

I’m either going to have the comments shown as standard - just a list of all comments or use Ajax to show one comment at a time and a small circle bound arrow to scroll through them.

CLICK THE IMAGES ABOVE FOR FULL SIZE VERSIONS

Development

Now I’m VERY excited about all this and I’ve done the bit I enjoy - the easy bit - the design bit. Now I have to get on with the side of development that normally causes me to give up - the actual development bit.

I’ve built dozens of websites over the years - for everything from bands to government departments, I’ve even customised Wordpress templates and built Blogger templates from scratch - but any hardcore development has always fallen to a dev team.

So now I’m faced with a steep learning curve. The way I see it I need to:

1) Brush up on my CSS to create the gradients and layout
Until now I’ve only really ever used CSS for create basic styles for text and table headers. I’ve never used it for layout or creating gradient based header bars - I normally use images for that.

2) Brush up on my Javascript
I know a little Javascript, I can code simple things like form validation - but I need to learn a lot more (or at the very least learn how to integrate libraries) before I can do some of the things I want for the blog. Fortunately it will work without the AJAX stuff.

3) Get to grips with Wordpress
As I’ve decided not to customise an existing template but create my own - and some of the things I want to do (like having posts shown in four different ways in four different areas on the homepage) aren’t things that comes as standard. So I need to get reading wordpress.org and work out how to put it all together.

4) Brush up on my PHP
I know a little PHP but by a little I mean a very little - I can code a fair bit in VBScript but who the hell wants that? So I need to get myself a PHP book and start reading as I need to work out a way of getting the ‘RELATED’ content shown on the side of the Story template generated or at least inputted at the same time as creating a story in Wordpress - I’m guessing this is going to require a plugin of some kind.

So if anybody knows of any existing plugins that will do what I need or can recommend a good PHP or Wordpress information source then please do.

I’m also thinking about releasing the finished product as a Creative Commons theme for other people to use and adapt as they like. If I do - should I work out a way of changing the colour scheme and image through a Wordpress Admin page?

Anyone want to help with development of the theme?

Anyway - whatever way I decide to go about it I’m going to post updates on here as and when I do them or get time. If I write a piece of code I think might be useful - I’ll publish it.

You should be able to watch the evolution of a theme.

Share/Save