This is a very simple way of approaching designing and building your own wordpress theme, it doesn’t necessarily cover everything that’s involved – mainly the page structure, and the page look and feel. The reason I haven’t gone to that extensive detail is because the more minor elements tend to differ from theme to theme, and much of this process is actually trial and error when you build your first ever wordpress theme.
Design your wordpress page
This step may seem obvious, but when I first ever tried to put together my own wordpress theme I tried to just start building from scratch based on how another page looked.
Take your time, work out what elements you’ll want on your wordpress theme – how are people going to navigate the page and get to the categories and links.
Wireframing is important in this stage, because ultimately when you have to build into the page you’ll have everything laid out in front of you exactly how you want it, and you’ll easily know if you’ve missed anything.
Build your wordpress page outside of wordpress
Open up your favourite HTML editor, and start to build your designed page. It’s quite easy to try and skip this step and spend the next 10 hours losing hair because you can’t get the page to work.
Because of the way a wordpress theme is laid out you really want to have something working before you start trying to plug it in, so you know that those visual errors that you might be seeing are because the line of code you put in there should’ve been after the PHP code.
An example of me doing this is on http://chriswrightdesign.com/blog.php
Set up word press locally (sandbox) with wamp
If you haven’t done it already, download WAMP – it runs its own windows apache mysql server on your computer, once that’s installed download and install wordpress in the www directory there.
If you’re new to installing wordpress – I recommend you open up the little wamp box and clicking PHPMYADMIN – and simply create a new database called ‘wordpress’ then close your window.
That’s all you have to do to allow wordpress to work locally. (the default username and password for a database is root then its nothing for the password – you should change this for security reasons, but for this explanation I’ll just go on as if that is how we’re doing it.
This is where you want to call the wordpress directory something easy to remember so you can work with it.
I would actually recommend backing up your www folder completely, and installing wordpress to the www directory, since you have a number of pathing issues that cause images not to display locally etc.
This for me is the easier alternative, I’m sure others have different solutions for this. I had a directory that was something like www/wordpress/chriswrightdesign/ which meant I had to keep uploading my theme to see if it was actually working.
Try your best to meet the conditions that will be on your actual web server, so that the file paths don’t have to be changed when you upload it. It’s obvious, but because of the installer things can get ugly fast.
Find a start from scratch theme, or find a similar theme to your layout
I’ve done fairly extensive reading on this and everyone has a different approach to theming wordpress. Some people like to use that default blue theme, which to me is a hellish nightmare. Some people like to go completely from scratch, which I also don’t recommend because it is so time consuming it eats up project time.
My favourite theme to start with is a theme called Blank2r (downloadable here), it’s a very, very simple 2 column text layout that’s very easy to work with and put your code into.
The other option you have here is to find a theme that in layout is almost identical to yours – if you were to reduce it to its wireframe, how close would it look to your wireframe? If it’s very close this could be a good time saving measure to choose this particular theme and restyle it.
Go through the code of your chosen wordpress theme
Find the wp-content directory, open themes, and then open your selected theme.
This and the next step are the most time consuming part of the process, open up your chosen them to work with, start to try and understand how its put together.
Notice that the page is often split up into different sections in word press with includes.
You’ll find your header is its own file; the sidebar navigation is its own file, the footer, comments etc.
You’ll want to think about writing a list down on a piece of paper and write down what they actually do so when you start building your site or theme into word press you know exactly what you need to change. You’ll also notice there’s a screenshot .png – open it up and change the image so you know exactly what theme is yours.
Replacing the code in your wordpress theme with your own site’s html
Make sure you back up your selected theme, you might want to use it again in future projects.
This is the part where you open up your favourite HTML editor once again, and you start replacing code that is on the wordpress theme with the code that was used to build your page.
Be careful about what you replace, and where you put content. The best advice when dealing with includes, is to open the final rendered page in your browser – put your HTML comments all over the includes so you know where for example ‘sidebar.php’ starts and finishes.
This can help when you have visual errors on the page; you know where code should and shouldn’t be.
The other major issue you need to be mindful of are pages like the comments.php page. There are often a lot of case statements. For example: If there are no comments – this code goes here. If there are comments, this code will go there instead.
Upload your theme incrementally
As you are doing step 6, I would suggest using an FTP program to upload your theme to test it as you work on it, every time you make a break through or you get stuck, upload it just to make sure it works.
Test all elements of your wordpress theme
This step is really just to ensure you haven’t missed something and when a user goes to your site they click something you didn’t think of and all of a sudden.
August 30th, 2009
Top resources for web designers you might not know about
Knowledge based websites
Smashingmagazine.com is a weblog dedicated to web-developers and designers providing hundreds of useful tips to help improve upon your skills and knowledge. This is pretty much my web encyclopedia these days.
Freelanceswitch.com offers freelance job listings, a directory of freelancers, resources for freelancers, over a thousand articles on freelancing and many other resources for contract workers. Even if you aren’t a freelancer, the information provided here offers a great insight into dealing with clients, production tips, and ways to better manage your time.
www.useit.com regardless of how hideously ugly this website is (I’m convinced he’s trying to make a point), Jakob Nielsen is still one of the top usability experts in his field, a great resource if you want to learn about specific user interface design studies.
www.w3.org is still one of the most relevant websites for anyone building a website, validating your code can sometimes be the fastest way to problem solving in any build.
www.webmonkey.com this resource has often done me well when looking for a quick and simple way to find information on screen real estate in web pages and statistics on browser usage
http://www.google.com/insights/search find out what people are searching for, their habits, very handy tool for Search engine optimisation.
Stock photography websites
Flickr.com most often considered just that site you upload your photos to, this site is overlooked as a stock site offering royalty free licenses to some extremely well made texture photography and stock photography, worth checking out.
Sxc.hu is a great royalty free image site, the quality varies a lot here from keyword to keyword, so you need to keep that in mind once you’re used to the way this particular site works, you know not to waste your time on certain searches (anything with people in it comes to mind).
Gallery Inspiration
www.dopeawards.com and www.thefwa.com are gallery websites offering the cream of the crop of Flash design campaigns – these sites are often visually stunning and breathtaking and offer a great source of inspiration.
www.webcreme.com is an HTML based gallery site, there are so many of these sites on the web, this one is one of my favourites offering the best of the best.
Other useful resources
www.w3.org is still one of the most relevant websites for anyone building a website, validating your code can sometimes be the fastest way to problem solving in any build.
www.webmonkey.com this resource has often done me well when looking for a quick and simple way to find information on screen real estate in web pages and statistics on browser usage
http://www.google.com/insights/search find out what people are searching for, their habits, very handy tool for Search engine optimisation.
August 20th, 2009
Some Javascript tools to increase site usability
Users clicking on your interface
Ever wanted a way to test where people are actually clicking on your website? This tool allows you to see and measure what users are clicking on by creating hotspots in an output file.
Similarly this tool records mouse movement using Scriptaculous.
Search suggest
Many people consider this gimmicky, yet the most popular search engine in the world uses it, I believe giving the user some feedback before they click the search button is a valuable way to be certain people are getting the information they are looking for.
Form feedback
Receiving validation feedback straight away removes some of the frustration in forms for the end user, particularly useful for larger forms that are often overwhelming.
July 1st, 2009
Search for what inspires you, and surround yourself with it
Inspiration is such a powerful driving force to motivation. It is often seeing where you could be with your skills and talents in relation to where you are now, the many things you could achieve, or just a feeling of happiness that people, places, or things give you.
Searching these things out, not only helps you to see what you want to achieve, it actually helps you achieve the goals you set out for yourself.
It could be anything from a morning ritual breakfast, a coffee, a band, a person, or a sight that just makes you want to be the best that you can possibly be, that reminds you that you are destined to be part of bigger and better things.
There is nothing more demotivating than feeling completely stagnant, that you are not going anywhere, or doing anything of importance. I’m sure we’ve all been there at some point in our lives, and falling into that rut is extremely difficult to escape from once you’re down.
I find inspiration in travel, in the amazing people I surround myself with who I know are so very rare, brilliant visuals that take my breath away, bike riding and feeling the wind on my face, and listening to music that speaks to me.
Whatever that inspiration is for you, it’s definitely something you have to search for, but once you find it – it’ll be the thing that makes everything possible.
Once you find them some ways you can remind yourself of your inspiration are (using my inspiration as example):
In the workplace
- Screen background
- Ride to work
- Photos
- Get up earlier and have a nice breakfast/coffee before work
At home
- Photos
- Plants
- Posters
- Paintings