Please note this tutorial is old – it needs updating, It was written before WP 2.0 came out! Most of the theory mentioned here still applies but for up to date easy to edit wordpress themes click here

I’ve decided to rewrite this tutorial, mainly because since writing the old one, I’ve learnt a whole lot more about design, wordpress and CSS. Plus theres a shiny new version for me to play with.
People often ask me how do/did you do this in wordpress, or how did you make this theme? In truth the answer is I spent a lot of time reading here.

This tutorial isn’t exactly a step by step guide and my methods are by no means perfect. Its just how I happen to do things. I’m going to give you a step by step guide as to how I made version 32 of eruanna.net. Please note this is a coding tutorial and not a graphics one, so I wont be showing you how I made my graphics.

I start my design process with a blank transparent page in photoshop. I already know the rough look I want but I have no idea of what it will turn out like.

First I think of colours, in this case I’m going to use pink and brown. Then I play around with shapes, images and brushes. Till I come up with something I like. For inspiration I use music. Very often in my layouts you’ll find lyrics from very obscure bands and artists. Those are what make my layouts personal to me.

banner1.gif

Once I have the header image out of the way I can start coding.

A wordpress theme is made up of several files, called templates, that make up a theme. (i’m only including the important ones here)
style.css This is what determines the colours, positions and most of the look of the website.

page.php Determines what all your pages will look like, for example my about me page.

index.php This is what groups together all the other templates. header, footer and has an include for the sidebar.

comments.php Determines how your comments will be displayed.

sidebar.php Type your side bar content in here and link to it via the index page.

header/footer.php maintains your header on all pages – its linked to via a php tag.

Now download this file. Upload it to wp-content/themes/emnet_theme then CHmod it to 777. (The url is for my old domain – don’t forget to credit eruanna.net)

Then login to your WP-admin and go to presentation > select the theme and click theme editor to edit the theme.

Changing the links click header. Scroll down and edit the links.

Editing the Sidebar click sidebar.

Simple :)

You can play around with this as much as you like as long as you give me credit :)

Free Wordpress Themes

Simple and easy to adjust for your needs.

How to:

Write your own wordpress theme. Everything you need to know.
Categories
Recent Comments

Anny: actually, 32/(2*pi) is roughly 5 inches. a 2-inch radius circle is really, really small for your waist…

heartburn no more book: First of all I would like to say great blog! I had a quick question in which I’d like...

Basic computer skills windows xp: Furnished with fundamental expertise inside pc for instance typing as well as...

baba: thanks you!!

PJC: THANK YOU SO MUCH!!!!!!!!!!!!!! :razz:

Subscribe
 RSS Feed

Or via email:


Follow eruANNA