Jan
How To Create A WordPress Theme - Part 1
by admin
What was the one good thing that John Chow did to his blog last year? He had a custom wordpress theme made for it. It improved both his traffic and income. In this series I am going to show you how to create a WordPress theme so that you can too.
We are visual animals, our first instinct is to judge by appearance. It’s the same when it comes to blogs. If a site is visually attractive there is a greater chance of you reading it. Many of us start of with a free theme, there are many very good ones out there, but there is a drawback. Many others are using that same theme.
Before I joined EntreCard, as a web designer, I thought I was critical of the state of design. For the last couple of months I have been looking at 100-300 sites a day and some themes just repeat from site to site. You might call me hyper-critical now. If the the first couple of sites have below average to crap content, then the next time I see that theme the site is already at a disadvantage because of the previous association of theme to poor content.
The other problem a new blogger has, is that according to Technorati there are over 175,000 new blogs born every day. How do you stand out from a crowd that size? Good content, networking and a good theme.
It is this last item that this series will concentrate on, developing a unique WordPress theme from scratch. Now before you get all nervous about coding and graphics, don’t worry, I shall guide through each part and take things slowly. You might like to have a look at Install a web server and Wordpress as the theme will be developed locally. You might also be interested in the How To Modify A WordPress Theme series.
But before we get to the coding, we need a design. This design has to suit both the content and the visitors and what you want to do with these. It is no use, for example, having anime art work, bright colors and small text if your blog is about heart conditions for the over 50’s.
The design of a blog has to consider two things the layout - how many columns and what’s in them, visuals - colors and shapes.
The Layout
When designing a blog layout there are two things you MUST have - content and navigation. Everything else is optional, for example you don’t NEED a header image, but it can set the tone or mood for the site. You don’t NEED a footer but it can provide a clean end to the page.
How many columns should you have? These days I would say as few as possible. For example you could have a horizontal navigation bar followed by the posts and then the footer has all the widgets/plugins.
The most I would have is three columns, content, ads and widgets, with the content either far right or far left and the two narrower colums together.
The Visuals
There are lots of ways to design a site, no one way is the only way. I use different methods depending on my mood and inspiration. Here are a few ways of going about it.
Mood Board
I pick three to four words that express what I want the site to be and what reaction I want from the visitors. Then I get pictures that relate to those words. The pictures come from photo libraries, magazines and whatever I can get my hands on. Then I paste these images on a large sheet and see if there are any common themes or colors.
Colors
Again I write down three or four words, but this time I look up the colors that match those words and then pick two of the predominant colors.
Metaphor
This is a very visual way of doing it. I take the topic of the site and then brainstorm words that are associated with it. For example if it was a diet type blog I might go for a fridge as the design metaphor.
The Logo
You should also design a logo, one or two colors and preferably it fits inside a square so that it can also double as your favicon and avatar.
With any of these methods, I draw lots of small pictures of different layouts using colored felt tips. I don’t think too hard, in fact the less thinking the better. I just plonk myself down in front of the tv with a sketch pad!
Then I pick one of those layouts and go to PhotoShop and refine it, choosing fonts and the exact shades of colors. It is here where I finalize the overall design and start creating the graphics for the site.
All of this can take from a day to three or four days depending on inspiration. When I designed this blog, from initial concept to final design took me around four hours. The coding took another day.
The words I started of with were calm, modern and dynamic. What is more calming than looking at the country side? This gave me blue skies and green grass as the two main colors. Modern gave me gradients and Dynamic gave me diagonal lines. Initially I was going to have the header in blue and everything else in green but it didn’t look right. When I switched it around to how it is now, it felt right.
Usability-wise, I have two sidebars, one for the single post page and one for everything else. I also have about four different headers, you’ll see that different pages have a different globe on the right depending on what page you are on.
In the next part I shall start showing you how to create a WordPress theme from your design. If you have any questions or if there’s a particular type of layout then leave a comment here and I shall go with the most requested one, otherwise I shall go with a basic two column layout.
Tags: blog, blog layout, content, design, layout, navigation, photoshop, visitors, wordpress, wordpress theme
Category wordpress |
Print This Post
|
You always seem to blog about exactly what I want to know…and in a way that is very understandable for me! Thanks CK!
My spies are everywhere
How To Create A WordPress Theme - Part 1…
This is the first part in the new series on how to create a wordpress theme from scratch. In this part I discuss why you should consider having a unique theme instead of picking one of the thousands of free themes available.
Next we look at the differ…
Where is the second, third part?
Can’t wait.
[…] is the second part of how to create a WordPress theme. In the last part How To Create A WordPress Theme - Part 1, you brainstormed and created a layout in your graphics program. In this part I shall show you how […]
hello
I tried doing it myself but the only problem i am facing is this designing what you taught looks incomplete because all you said was about the index page. Can you give me reference of the place where i could learn the rest of the parts. Like the archieves and other stuff. Actually i downloaded a few themes from the website where they give free downloads for the theme. That theme has so much with it and all the files are saved in .PHP. Where can i get more information about this .PHP extension. Will it effect if i save the files as HTML??? Which software is used to see the .php files… ?? I am really having so many queries but no where finding the real solution…Suggest me some if possible
Thanx for this post it really gave me the idea to create the index page..
@Roshni: This post is just one in a series, I suggest that you subscribe to the feed so that you don’t miss anything. The next post in series is due tomorrow and is about making this html page into a WordPress compatible php file. As for what tools you need, these posts should help you out:
Install a web server and Wordpress
And:
How To Get Started Creating Web Pages
Hi
Just to say, Part one underway after a few failed attempts due to workload.
Will let you know how it all goes.
ImJustCreative.com
Good guide, I look forward to reading the 8 guide series. I suggest entering another more popular layout design. The three column with the 2 smaller columns next to each other on the far right. Anyways thanks for these guides.
@Jared: The series is not yet over, there is one more part, which does discuss different layouts amongst other things. I have found that when teaching this stuff, it is better to start with the basics, ie a col layout, then once the fundamentals are understood that knowledge can be expanded to other layouts.
Hi Colin, first of all sorry if this is to long.I’ve done the first part but when I preview it only this showed up;
themessample
This is my index;
Untitled
Subscribe To This Blog
Home
Archives
Sitemap
Contact
And this is my style;
/*TAGS*/
div{
margin:0px;
padding:0px;
border:none;
}
img{
border:none;
margin:0px;
}
body{
margin:0px;
padding:0px;
color:#000;
font:.9em Arial,Helvetica,sans-serif;
background:#e8e8e8 url(images/topbar.jpg)repeat-x top;
}
/*PAGE LAYOUT*/
#container{
width:800px;
margin:0px auto;
}
#header {
height: 125px;
}
/*HEADER*/
#header a.subrss{
margin: 0px 5px 0px 0px;
padding: 0px;
font-size: 2em;
font-family: Arial,sans-serif;
color: #fff;
float: right;
text-decoration: none;
}
/*NAVIGATION*/
#nav{
position:absolute;
top:40px;
width:720px;
font-size: .8em;
line-height:normal;
}
#nav ul{
margin: 0px;
padding: 0px;
list-style: none;
}
#nav li{
float: left;
background: url(images/navr.jpg) no-repeat bottom right;
margin: 0px;
padding: 0px;
margin-right: 5px;
}
#nav a{
float: left;
display: block;
background: url(images/navl.jpg)no-repeat bottom left;
padding:4px 10px;
collor: #fff;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
#nav a:hover{
color:#000;
}
#title{
position:absolute;
top:65px;
height:58px;
}
Oh man this is a XHTML allowed.
[…] I thought what the heck and signed up. As a test I submitted part 1 of How To Create A WordPress Theme. Well, like I said that was about a month ago, with everything else going on I forgot all about it, […]
@Mohamad: The CSS looks okay, have you tried to validate the xhtml?
No, I have not yet come to that part. I’ll do that thanks.