Wordpress themes: Your own design.

January 9th, 2008

The Layout

Assuming you have already created a design of your own.
Wordpress makes use of templates that gather aspects of a design then puts them together to complete the finished page..
It can be a little daunting/confusing when beginning to try and integrate your own nicely designed single page across a number of templates.

In its most basic configuration wordpress uses four templates to complete a page. These are:
The header…………….Box1
The main index………..Box2
The sidebar……………Box3
The footer…………….Box4

With help from the graphic below I will try and explain how I have achieved this for my new layout coming soon for this site.

Presentation

From your control panel: edit theme.

You can see that when customizing for this design I have put all meta information, such a doc type, links to style sheet, title, header graphic and navigation into the header php.
You will notice that the wrapper and main div tags are left open at this point, to be closed in the footer php. and sidebar php templates respectively.

In the index php. I have my main content area, and div left within which will house the posts themselves.

Take a look at the graphic below of a slightly shortened version of the finished page, and you will see how the template sections fit together.

Uploading markup structure in this way may seem a little counter intuitive in the beginning, leaving divs open in one area and closing them in another.
I found it very helpful when in the building stage to use comments
to keep track of the closing div for a particular section.
It took me a while initially to get my head around the concept of template driven pages. But with time you will understand how the php pulls the essential components of your design from the various templates in your chosen theme.

Entry Filed under: WordPress