J.me

How to create WordPress template part 1

Do you want to create your own WordPress template? It is not hard actually if you have enough knowledge of XHTML (or HTML) and CSS, and a little basic of PHP. This guide will split into multiple part as it is quite long. This is my way of creating WordPress template, so it might different than you. The first part is for preparation and designing, I haven’t touch the coding part yet, it will be on second part. I will make it with example and this example will be available to download for everyone later. Hehe… 🙂

First is the preparation. For me, I will take a paper and a pen and start thinking of how the template will look like. Hmm… As of now, I will create a simple templates like usual blog template. One header with logo and description on top, one sidebar on left side, the content is on the center (right side from the sidebar), and one footer on bottom. That’s it. Okay, once you are ready then, let’s open your favorite graphics editor. For me, it is GIMP.

Now, create a new images. Since most users use the 1024 width screen, I create 1000 x 800 images. And now we will start creating the raw design. Here we go…

We create one layer for each header, sidebar, content and footer first. as you can see here.

sketch 1

Hmm… All is in black… No matter, I want to use black and some gold like color as the base color. 🙂 Then, let’s start playing with a little advance tools from GIMP to make the graphics better. Here it is:

sketch 2

Okay, that’s it. That is the result I want. As you can see, the header have a space (colored with gold one) for menu. I will use this for listing static pages. It is the same as my current template, you can see my static pages is listed in the top menu. Also, in this raw images, all element is still not placed properly, but that doesn’t matter. We just need a small portion from that images.

Now, let’s divide some images that looks same. We will later use CSS to repeat it. Here we go…

list images

See, we just need 13 images there that can represent this look. 🙂 That is enough for today. Tomorrow I will start write the HTML and CSS code.