After finding some WordPress themes for inspiration I set about creating the look and feel of my new site. As different developers will take different approaches to designing a site layout there are several ways to go about doing this. I believe that a solid theme will always start with well coded HTML. As a result, the very first thing is to create a homepage with no dynamic data, just a plain HTML page with code for the layout and dummy text as content. Then the look and feel can be applied to the site with CSS files, colors, and images being plugged into the static page.

The rational behind completing the site design/coding and layout first is to make sure that all of the code blocks are in the right place and semantically laid out. In addition, this is a good time to validate the site, checking for errors like an improperly closed div tag that could mess up the site layout. Once the layout code has been added to the WordPress template, errors of this kind are much more difficult to diagnose and fix. This approach provides a chance to nail down the styles that will be used for layout and text without having to worry about any WordPress tags or PHP code getting it the way.

If you look at the illustration below each page in this site is really just split up into four blocks. Even the homepage, while a little different, is just additional content and side blocks within the main content block. Each one of these blocks are marked up and placed in position using div tags and CSS floats. Besides helping to separate the content from presentation, this provides one important additional benefit. I can write the page just once and it should render correctly in most browsers and devices

Block Sections in Each Page

Header Block

The header block of the page contains all the HTML information that needs to be at the top of each WordPress page. This includes the site menu, header image, page title/description and things that belong in the HEAD section of the page, such as the doctype, links to style sheets, and the title. Basically, the header block should contain anything that needs to be repeated across the top of all of the WordPress pages on the site.

Content Block

The content block contains the meat of each WordPress page, either posts or WordPress pages.

Sidebar Block

This block contains anything that will add additional value to the page. For example, on the posts pages I may want to add the latest posts and posts categories.

Footer Block

The footer block contains the information that goes at the bottom of each WordPress page such as copyright and contact information.

Copying the Code into WordPress Templates

Now I can copy my layout code from the static pages into the appropriate files in the theme directory. WordPress themes live in a directory residing in the wp-content/themes/ folder. For example, a theme named ‘mytheme’ would reside in the wp-content/themes/mytheme folder. This directory holds all of the theme’s stylesheets, templates, images, etc. WordPress will load different pages templates for a different query type. Basically, if a category is being queried the template called category.php will be used.

In order to avoid starting completely from scratch I begin by copying all of the files from the default WordPress theme into this directory (Update Note: Alex King mentions that he uses the Sandbox theme as a starting point. Depending on your needs this may be a better choice.) While many different theme files have special meaning to WordPress below is the theme files I included in this site’s new theme.

1. index.php – The main WordPress template. Index.php must be present and will be used if the appropriate query template is not present.
2. style.css – The main stylesheet. This must be included with the theme.
3. archive.php – The archive template. Archive.php is used when a category, author, or date is queried.
4. author.php – The author template. Used when an author is queried.
5. category.php – The category template. Used when a category is queried.
6. comments.php – The comments template.
7. footer.php – The page footer template. Can be used on any page.
8. header.php – The page header template. Can be used on any page.
9. page.php – The page template. Used when a page is queried.
10. sidebar.php – The side portion of the page template. Can be used on any page.
11. single.php – The single post template. Used when a single post is queried.
12. search.php – The search template. Used when a search is performed.
13. 404.php – The 404 Not Found template. Used when WordPress cannot find a post that matches a query.

Conclusion

Now that I have added my layout HTML code to each WordPress template I can begin adding the WordPress tags and PHP code to each one of the WordPress template files, customizing each one to my liking.

Notes:

To help in creating the look and feel, as well as coding the site, the following software was used. I used Dreamweaver and Top Style Light for the XTML/CSS part of the design and Paint Shop Pro for the graphic work. While Top Style Light is freeware, the others are not. A good, free alternative to Dreamweaver is HTLM-Kit and a good, free alternative to Paint Shop Pro is Paint.Net. Besides this software, I needed a browser to test the site as development progressed. I used Mozilla Firefox as my primarily development browser with two essential extensions, Firebug and Web Developer, while at the same time making sure to check my progress in both Internet Explorer 6 and 7.

In addition if you need coming up with layout code take a look at one of the following sites:
Open Source Web Design, Open Web Design, Template World.

This entry was posted on Sunday, March 4th, 2007 at 7:56 pm and is filed under WordPress. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.