Creating My Own WordPress Theme: #1

I’ve set out on the path of making my own WordPress theme. I’ve quickly realised that it’s really going to test my skills. It involves HTML, CSS and PHP. I’d say I’m at beginner level for all of these, particularly PHP which I don’t know any of.

To help me with this task I’ve been reading and watching a number of different articles and videos on CSS-Tricks.com by Chris Coyier. If you don’t know who he is then I suggest you start by looking at some of his articles on CCS-Tricks. He use really up-to-date and clever techniques for developing websites. His tutorials and techniques are also very well explained, so it’s great for a novice like me. The videos I’ve been watching is are a 3 part series where Chris takes you through the design and implementation of a custom WordPress powered blog. You can see the first video by clicking here, the rest of the videos are linked on that page. One of the first things I noticed about his work is just how well presented his CSS is. Everything is commented in an easy and understandable way so you always know exactly what section of the page you’re working on. He also has the clever idea of commenting in his colour scheme at the top of his CSS document so he can refer to it whenever he needs it. These are definitely things I’m going to be doing going forward. I’ve also been following a very good tutorial over at ThemeShaper by Michelle Langston and Ian Stewart.

I’ve constructed a little mock up of my purposed theme using Adobe Fireworks. The reason for using Fireworks is because it provides great tools for aligning your objects and it allows you to cut you page into sections easily using its guide feature.  I’ve included a picture of my mock up at the bottom of this page (fig.1) as well as an image where I have left the guides visible (fig.2) so you can see how I cut up my page and align everything nicely. It’s really simple at the minute and I welcome any feedback on it, good or bad.

With my mock design done, I’ve stared to code it out in Dreamweaver. At this moment in time I’m just concentrating on building the page using only HTML and CSS because once I know how to do that comfortably then I know I’ll be ready to tackle a more complex design and move on to incorporating some PHP. Like I said before, I’m certainly no HTML or CSS master so sometimes I become confused about how to do different things. For instance, I knew didn’t know how to get my head section colour to run the full way across the page. When I first coded out the section it was just a big lump in the middle of the page, which is not what I wanted (fig.3). I want it to run smoothly across the full length of the browser. I fixed this by doing this:

#header {
padding: 0 1000px;
margin: 0 -1000px;
}

Although that did make the header run the complete way across the page it also gave me a sideways scroll bar which wasn’t ideal. I found a little trick to fix that though:

html body {
overflow-x:hidden;
}

By doing that it hid the sideways bar leaving my head section running the full length of the page. Just what I wanted (fig.4)! I’m sure there is probably a better way of doing that but it worked for me and hasn’t disrupted the rest of my page so that’s a winner in my eyes.

That’s really all I’ve done so far. Even at this early stage I’ve come up against a few challenges but I’m learning how to get around them which is the important thing. Hopefully testing myself in this way will pay off in the end. In my next post I’ll be describing how I coded out the main section which is already causing me some problems.  Oh and just before I go, I should mention that you can click to enlarge any of the images. Until next time!

WordPress Mock Up

Fig.1

Mock Up With Guides

Fig.2

Page With Wrong Header

Fig.3

Page With Right Header

Fig.4

 

 

 

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: