Throughout our time as web designers, we find that there are a variety of methods that can achieve the same result (CSS Image Replacement for example), and there are also a variety of tools & methods to help save time when working.

Today we’re focusing on WordPress specifically, and providing links to a range of tools & techniques that I find can help when creating a new website from scratch. We are not looking at using any existing themes – this article is written for anyone looking to create their own theme from the ground up – 100% yours :).

Method 1: Build upon an existing blank theme

The default & classic themes that come as standard with WordPress do their job well, but if you’d like to take your website or blog further via a custom design, there are a range of blank themes on the internet that can help you do this, and also save some time on your theme building!

K2 Theme

K2 (Kubrick 2) is a blank theme very similar to the default given with WordPress, however it comes with a range of built-in-plugins such as recent comments & AJAX functionality. The theme is also kept up-to-date, so it is sure to work with the latest version of WordPress.

Refueled Blank Themes

This would be our choice if we required a blank theme. The markup is clean (as are all the themes), and it does a great job as foundation for further design customization no matter how little or large you plan to go.

iThemes Premium Blank Theme

iThemes are well known for their premium themes, and they offer a blank theme for $79.95/£40 designed for a blog/news website. I left this to last for the fact it is premium, but the individuality of the layout makes it a good option if you are short on time.

Method 2: Building your own blank theme

Obviously, you may not wish to use a pre-made theme, and building a blank theme from the ground up wordpress toolsallows you to fully understand the ins and outs of WordPress.

I am not going to churn out an article about creating your own WordPress Theme, as it has already been done before to great effect at WPDesigner and ThemeTation, however there are some techniques & tools I’d like to bring to light that may help you when designing your theme.
Yahoo’s UI Reset CSS Library instead of * {margin:0;padding:0;}

Yahoo’s UI Reset CSS Library
All browsers render web code slightly differently to each other, most notably the deadly sin that is Internet Explorer 6. Many designers (and the blank themes above) use a single line of code to “reset” all browsers default styling.

* {margin: 0; padding: 0;}

This line accomplishes the task, however it is not an efficient method. I suggest taking a look at Yahoo’s UI Reset CSS Library, which targets the CSS selectors specifically. Do not begin any design without using a reset in your CSS, as it will save a great deal of time & stress in further development of getting your website to look correct on different web browsers.

Designing In Grids

The idea behind a CSS Grid is to create an invisible grid, which divides content horizontally and vertically, resulting in a pleasing design that is easy to browse. Grid designs are primarily used on news websites such as Wired News.

CSS Grids can be used for any website – static or content managed, plus using a grid designed around the rule of thirds or golden section will result in an aesthetically pleasing design.

There are a range of CSS Grid Frameworks available if you would like to see what they offer. Take a look at both 960 CSS Grid System and Blueprint CSS Grid System to see what grids can do for your design. Once you’ve familiarized yourself with the technique, you’ll realize it is quite simple to achieve this effect yourself, and you can build your own grid whenever you desire.

Tools to aid Productivity

Any way in which you can save time and stress when coding seem great to us! There is a huge selection of Firefox Extensions available over at their website, but there are a few in particular that are incredible when working on a design.

FireBug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.”

This is an amazing tool which allows you to view the changes you make to your style sheets in real time. This is a great tool for any scale of development.

Dust-Me

Dust-Me Selectors is an extension we should technically not require. Its job is to find unused CSS selectors in your style sheets. Surely this is not needed, but I think you’ll find as you revise code in the development stages, and then in the future when you may decide to change around areas and styles, it’s always useful to find out if you have any unused selectors which you can then remove to cut down bytes out of your page file size.

Web Developer

Web Developer is a very powerful extension that adds a menu/toolbar to your browser, allowing you to complete a range of tasks such as resizing the browser to typical monitor sizes, outline CSS selectors & much more! This is definitely an essential tool in any web designers kit.

GridFox

GridFox goes hand in hand when designing under a Grid Framework. This Firefox extension allows you to ensure your grid layout is maintained across your website at any time. It is also useful as you can use it to find out what grid layouts other websites are using.
Conclusion

With the methods & tools we’ve listed above, I think you’ll find it a lot quicker & simpler creating a website built with WordPress. Of course, these are only the opinions of Peakflow, and we’d love to hear of the ones you personally use – they may be just as useful! So please feel free to get engaged and comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation